The Support Group Blog

How to style your apps in Google App Maker

How To Style Your Apps in Google App Maker

Google App Maker is pretty stylish right out of the box. It has the modern and attractive Google Material Design theme baked right in. As you add new widgets, text objects and buttons, they are automatically styled using this well-known visual language. Nonetheless, there are some of us who would like to give our new apps a little personal flair. Whether it's because we want to get user buy-in or to brand the app so that it works seamlessly with our daily workflow, Google App Maker gives us the tools to put our own fingerprint on our new app. We just have to know where to go and what to do.

What's Your Style?

Let's start with how we figure out what we can style. Let's say you have a button on a page and you want to give it a blue background. First, we need to select it on the page by clicking it, then switch to the Style Editor tab of the Properties Editor (it's the tab with the artist's palette icon). The Style Editor tab is broken into three sections. The top section provides the global name/path for the object/class you just selected, in this case .app-Button. This is the key to telling Google App Maker how to find the object you want to style. 

How To Add Style in Google App Maker Screenshot 1

The next two parts of the Style Editor are the page style and global style areas. I usually leapfrog over the page style section to land on the global styles so that I can first establish my base style before I start customizing each of the pages. Global styles essentially allow you to override the default style throughout the app, regardless of what page that object lives on. So if we want all of the buttons in our app to have a dark blue background and white text (.app-Button {background-color: #003366; color: White}), this is where we would specify that. 

How To Add Style in Google App Maker Screenshot 2

On the other hand, the page style section is where you change the default look and feel for objects/classes on a page by page basis. You can clearly see this in action by selecting the Style Editor tab and then clicking another page. When you move to a new page, the content within the page style section changes whereas the global style section remains constant. Another important requirement to recognize about the page style section is that you need to include the page name in the path to the object (.app-Schedule-Button as opposed to .app-Button) and either the class or object name as specified in the Property Editor (.app-Schedule-MoveToCalendar).

How To Add Style in Google App Maker Screenshot 3

Now that you know where to find the objects to style, let's explore how to apply styles to them. Google App Maker uses a web style standard called Cascading Style Sheets or CSS for short. CSS is a well-documented standard that is used heavily throughout the web to define the way things look. So finding help on it is just a quick Google search away. Each type of object or class, as they're called by Google App Maker, has certain aspects that can be styled. A great resource to learn more about how each type of class can be styled is w3schools.com. Now let's take a look at the code we used to make our buttons have a dark blue background and white text. 

How To Add Style in Google App Maker Screenshot 4

The background color for the button is defined using one of the 216 web safe colors, which is represented by a hexadecimal code found here:  https://www.colorcodehex.com/web-safe-colors.html.

The text color is specified using one of the 140 colors you can simply apply by name. That list is found here: http://html-color-names.com/color-chart.php.

Watch the demo.

With this knowledge about where, what and how to style your Google App Maker solution, you should be well on your way to creating the personalized and professional looking App Maker solution you've been longing for.

We developed a Google App Maker sample file to help you start building your own apps, check it out! And join our mailing list to keep up with the latest custom app development news and trends.

Keep me posted

 

Share this entry
0 replies