New Material Design Layouts are Available in the AppStudio
We are excited to announce the release of five brand new beautiful material design layouts. These ready-to-use layouts will not only help you get started in creating material design apps with AppStudio but also get you familiarized with the latest Qt Material Control style. You can find these layouts in the AppStudio Desktop Edition.
What’s Material Design
Material design, which takes inspiration from the study of paper and ink, is a visual and interactive card-based design tool that was announced by Google in 2014. Google’s initiative is to develop a much cleaner and more colorful unified user experience that can be adapted across different platforms and different device sizes. Many Google applications were revamped to follow the material design principles (such as Gmail, Google Drive, Google Calendar, YouTube, etc.).
Material Styles
The new Qt Quick Controls 2.0 comes with three styles: Default, Material, and Universal. We added support for Material Style, which is based on the Material Design Guidelines, and Universal Style, which is based on the Microsoft Universal Design Guidelines in the AppStudio for ArcGIS 2.0 release. The material style is not a native Android style; it is a cross-platform control style that runs on any platform. You may have noticed that one of the AppStudio templates, the Map Viewer template app, has been updated to the material design standard.
New Material Design Layouts
We released five brand-new material design layouts to help you get started with implementing the material design in your apps.
Simple Layout (Material Design)
This is a one-page simple layout with a header and a floating action button on it. When you tap the floating action button, a dialog will pop up with the message “Welcome to AppStudio” on it.
Multipage Layout (Material Design)
This is a multiple page layout using a StackView QML type demonstrates how to navigate between different pages in your app. You can press the button to go to the next page and press the back icon on the header to go back to the previous page.
Side Menu Layout (Material Design)
The side menu layout is one of the most demanding and popular layouts. When you hit the menu icon on the top right, a navigation drawer slides in from the left with all of the navigation options on it. You can find this layout in many popular apps such as Twitter, Gmail, and Uber.
Tab Layout (Material Design)
This tab layout is extremely useful when there are multiple tabs in a page. When you hit different tabs, the corresponding item shows up on the page.
Onboarding Layout (Material Design)
The onboarding is the very first thing you see after downloading an app. Onboarding screens introduce you to the app and demonstrate how to use the app. SwipeView QML Type is used in this layout to navigate between different pages by swiping.
How to Get Material Design Layouts
- Open AppStudio Desktop
- Click on the New App Button
- Click on the Layouts tab
- Select the Layout and click on the Create button
You can also create your own material design app without using material design layout. All you need to do is add the import statement when creating a new app.
import QtQuick.Controls.Material 2.1
I hope you are as excited as we are about the new material design layouts. Now it is your turn to create some awesome apps with the material design style.