MaterialR - UI Framework

MaterialR

What is MaterialR?

MaterialR is an easy-to-use UI framework that can be used to create your own UI library easily. There are also different built-in elements that you can easily add to your game. These UI elements are based on Material Design and anyone can easily use the framework to add high-quality, modern UIs to a game.

Why MaterialR over others?

The framework isn’t just a small module with a few built-in features, we give 100% customization! You can add your own elements by simply creating a folder with the element name and that will enable you to do :Get(element) .

How to add your own elements

image
Simply create a folder with the name of the element you are creating, add folders for events, props, functions, optionally add support for enums.

The last step is just to create a Dark and Light folder for themes and place your element in the folder.

Boom, you have a custom element!

Getting Started

Only Global ZIndex behavior is supported

To start using the framework, take the module, go to Roblox Studio, and place the module into ReplicatedStorage.

UI Examples

TextBox Images

Button Images

API

MaterialPro:Get(object)
Example Usage: MaterialPro:Get("TextBox")

Instantiates a Material Design instance

Examples

TextBox

local MaterialR = require(path.to.module)

local TextBox = MaterialR:Get("TextBox")
TextBox.AnchorPoint = Vector2.new(.5, .5)
TextBox.Size = UDim2.new(0, 200, 0, 40)
TextBox.Position = UDim2.new(.5, 0, .5, 0)
TextBox.Parent = script.Parent

TextButton

local MaterialR = require(path.to.module)

local TextButton = MaterialR:Get("TextButton")
TextButton.AnchorPoint = Vector2.new(.5, .5)
TextButton.Text = "TextButton"
TextButton.Size = UDim2.new(0, 200, 0, 40)
TextButton.Position = UDim2.new(.5, 0, .5, 0)
TextButton.Parent = script.Parent

Elements

TextBox

Properties

Properties that access the Object

String Theme (“Light” or “Dark”)
Vector2 AnchorPoint
boolean Active
string Name
Instance Parent
UDim2 Size
UDim2 Position
int LayoutOrder
Instance NextSelectionDown
Instance NextSelectionLeft
Instance NextSelectionRight
Instance NextSelectionUp
boolean Visible
int ZIndex

Properties that access the TextBox

Enum.Font Font
string Text
number TextSize
Enum.TextXAlignment TextXAlignment
Enum.TextYAlignment TextYAlignment

Events

Changed - Fires when the text input changes
Focused - Fires when the textbox is focused
FocusLost - Fires when the textbox loses focus

Functions

GetInputText - Returns the current text input

TextButton

Properties

Properties that access the Object

String Theme (“Light” or “Dark”)
Vector2 AnchorPoint
boolean Active
string Name
Instance Parent
UDim2 Size
UDim2 Position
int LayoutOrder
Instance NextSelectionDown
Instance NextSelectionLeft
Instance NextSelectionRight
Instance NextSelectionUp
boolean Visible
int ZIndex

Properties that access the TextLabel

Enum.Font Font
string Text
number TextSize
Enum.TextXAlignment TextXAlignment
Enum.TextYAlignment TextYAlignment

Events

Clicked - Fires on MouseButton1Click

Planned updates

  • Add support for Roact

Changelog

V1.0 - Initial Release
V1.1 Fix bugs with AnchorPoint
V1.2 Add documentation for TextButton
V1.3 Added Switch object

40 Likes

This topic was automatically closed after 1 minute. New replies are no longer allowed.

This looks like a nice UI framework but my question is “why?”. Why would you want to use a UI framework instead of using open-sourced UIs. I usually create my own UIs but sometimes I do not due to lack of time, but when I do I use open sourced ones because I find them easier to use, adjust and modify. I prefer having my UIs not inserted by scripts and easily editable. To the people who prefer using UI frameworks, why do you use them?

2 Likes

I personally use Roact for my UI. I like it because it’s all in code, which makes it easier to write. I also don’t have to make my UI look all nice in Studio, which in my experience, is hard to do. I prefer to have pre built UI components, and while Roact doesn’t directly solve this, it makes it a much easier goal to achieve. Currently with Roact I’ve just been designing my own UI components, but I wish there was something similar to Apple’s UIKit for Roblox. Anyways, that’s my opinion on using UI frameworks.

5 Likes

That’s a good point. In the module, each element has a UI folder and in those folders are the physical UIs which you can use if you want.

2 Likes

Looks very good, you can expect me to start using this.

1 Like

Thank you! Will definitely use in the future.

This is really cool but I have one questions. How is this better then designing UI with the UI editor? Isn’t it harder and more tedious to create it in scripts? I’ve never used anything like this before but it looks interesting. What’s the main reason people use this instead of classic UI design?

1 Like

That is the exact question I asked above, apparently it is according to preferences, some people want their UI all created by scripts as “it is easier”. But hey people can use what they find easier ¯\_(ツ)_/¯

It would be quite cool seeing a custom “UI Editor” made out of this to suit those people’s needs. I can understand using this as some developers don’t want to waste tons of time polishing user interface.

This would be assuming you decide to make a UI Editor plugin:
Since you could open-source the plugin (and already the module) it also makes this fully customization so if someone wants to re-theme it to their game’s needs it could feel more like a custom “UI Editor” to builds based on your game’s user interface.

I honestly love the idea of this. You could possibly consider adding Roact support for people that prefer using it.

Last edit: Since you’re clearly going with an open-source route here, you should consider using Github since it has integrated tools for making documentation and is also directly meant for open source (and other things of course, I’m not stating it has to be used with open source all the time). :+1:

2 Likes

A buddy told me animations for UI especially fancy ones are pretty impractical for roact which is what holds me back. Can confirm?

Animations are kinda strange to do. If you want to use TweenService you have to first create a Ref to the Roblox object and then use that. This page has more details about Refs.
https://roblox.github.io/roact/advanced/bindings-and-refs/

UI is extremely clean! Definitely will use.

Collaborating with @spooky_month to redo this and add more UI components. Feel free to comment with suggestions anyone may have.

Updated to V1.3!

What we changed:

  • Converted module to package for easy updates
  • Fixed a bug with certain TextBox properties
  • Added a Switch object

1 Like

While it’s nice to get notified of new updates, they should rather go into the op in a spoiler with subspoilers, example below.
The framework looks nice, but are there any plans for the future to make this a roact component for those who use roact primarily (it’s a pain to implement those frameworks into roact sometimes)?

(Now the update example)

Updates
Version 1.3

Changelog

Will update the thread tomorrow night. Also, I am planning to collaborate with other developers to help add roach compatibility and plan to start this Thursday or maybe even earlier.

YES OMG DARK MODE MY EYES ARE SAVED THX YOU

This is a module i’d use; The UI especially looks modern, and looks fitting in one of my games.

1 Like

This open-sourced right? Correct me if I’m wrong.