Gravit Android UI Kit

Material Design UI Kit for the Gravit Designer Software

All the UI Kit is following the Google Material Design Guidelines

Download latest version here

Features

Roadmap

• [X] FAB
• [X] Bottom Naigation View
• [X] ToolBar
• [X] Status
• [X] Guides
• [X] Material Colors Styles (Accent 200,500,700)
• [X] Text Styles (Caption, Toolbar, Toast)
• [X] Toast
• [X] Checkbox
• [X] SnackBar
• [X] Device Buttons
• [X] Keyboard
• [ ] Dialog
• [ ] Cards
• [ ] Button
• [ ] Radio Button
• [ ] Text Input
• [ ] Progress Bar
• [ ] Seek Bar
• [ ] Toggle Button
• [ ] Switch
• [ ] Chips
• [ ] Stepper
• [ ] Navigation Drawer

Version 1.3

• Added Keyboard

Version 1.2

• Added Checkbox
• Added Snackbar & Snackbar Texts
• Added Device Buttons
• Added Fab Variation (Open with 2 items)

Version 1.1

• Added Shadow to FAB
• Added Shadow to ToolBar
• Added Toast
• Improved StatusBar

Version 1.0

• FAB
• Navigation View
• ToolBar
• StatusBar
• Material Colors (200,500,700)
• Guides
• Sample Screen
• Caption Text
• Toolbar Text

How to Use

Choosing Color of Component

1. Choose a component
2. Go to the style option (right menu) and choose the desired color (500,700,200, etc)

Placing Text

1. Click on the Text tool and place your text
2. Click on your text and change it's content
3. Go to the style option (right menu) and choose the desired text style (Toolbar, Caption, etc)

Tip: The text styles are the last ones :wink:

Importing Icons

To import an icon, I will use the Material Design Icons library (you can use whatever library you want).

Obs.: It's better if the icon is in the SVG format

Follow the steps below:

1. Download the icon as SVG Optimized from the site

2. Click on Place/Import from the Gravit Designer and choose the icon that you downloaded

3. Go to the area that says "Place Your Icon Here" and move the imported icon and change it's size to fill the squared area

4. Done!