Choosing a Button style with purpose and intent
Users may not notice how nice an app looks, but they always notice when it looks bad. That’s why it’s important to choose the right components for every corner of your app. When it comes to buttons, that can be difficult. The standard button can come in three forms: flat, raised, or as a floating action button. Choosing a button type to use depends largely on how prominent you want that button to be.
Wait, what? How can a button be prominent?
When I say “prominence,” what I’m really getting at are those layers of your layout. Consider your layout’s dimensionality. While you may think it’s only two-dimensional, I want to talk about the third dimension: depth. Your main layout forms your base layer, and then you build upon that with each view. While an ImageView and a TextView may share a layer, your Toolbar probably sits on top of that. And so on. So, when I say that a Button deserves more prominence, I mean you should raise it to a higher level to make it stand out.
To visualize this 3D perspective, Feedly shared a pretty fantastic image when they explored Material Design. After attending some of the Google-hosted design sprints, they were able to implement these principles in their own app, and their initial experience may be interesting to you. But what they illustrate here is perfect: the content forms several layers, while prominent features, such as the toolbar, nav view, and search bar all stand apart. And that is what we mean when we say you need to determine your button’s prominence.
When it comes to determining that prominence for your button, it’s generally a question of function. The role that the button is meant to play should determine where it lives among your layout’s layers.
The Flat Button
The flat button was designed to minimize distractions from the content around it. It’s a simple approach with the least prominence. We call it “flat” because it exists in the same layer as the content it references. It has no shadowing (obviously, since it’s on the same layer), but it also has no visible border.
The simple look of the flat button is why it works so well in a Toolbar or a Dialog. But you can also use it inline when your content isn’t visually busy. If you have a lot of design elements next to a flat button, it might not be apparent that it is even a button.
Creating a flat button is very simple. Basically, you create any ol’ button, and then you give it a borderless style.
<Button
android:id="@+id/my_flat_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="@string/flat"
android:textAppearance="@style/TextAppearance.AppCompat.Button"
android:textColor="@color/app_body_text"
style="?borderlessButtonStyle" />The Raised Button
Some buttons want to steal the spotlight, though. The raised button is a great way to draw attention to your button. This is the button type that is most commonly used. A raised button has a visible border and lives a layer above the content it references. The style guide includes a great example of a use case for a raised button with a settings menu that contains a lot of information. Having a prominent raised button here distinguishes between the information and the actions available to the user.
Creating a gray raised button is also simple, since this is the typical use case (which means no style attribute is needed). The difficulty comes when you want to customize the look of your button. For example, specifying a custom background often leaves developers wondering why the material design animations and effects have disappeared. This is where you want to use the AppCompat colored button style, which uses your colorButtonNormal for the disabled color and colorAccent for the default color. (But if you want custom colors, there’s no need to change those values throughout your entire activity. You can use a custom ThemeOverlay as explained in this protip by Ian Lake.)
<Button
android:id="@+id/my_raised_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="@string/raised"
android:textAppearance="@style/TextAppearance.AppCompat.Button"
android:textColor="@color/app_body_text"
style="@style/Widget.AppCompat.Button.Colored" />The Floating Action Button
Finally, the floating action button offers users an action that they’ll probably take. It holds the most prominence because it should represent a common and useful action. It is a circular button with a simple image that represents that common and intuitive action. And it floats above all other layers because of it’s clear prominence.
Creating a floating action button (FAB) is harder. But the design support library is here to help. The basics are the same, but the color of the FAB will be your colorAccent selection (since it is supposed to stand out). You can also choose to specify a slightly smaller size for your button, if that suits your layout more. It’s a mini Fab!
<android.support.design.widget.FloatingActionButton
android:id="@+id/my_fab_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/fab_icon"
app:fabSize="mini" />Hopefully this helps clarify why we have so many button choices, and what our designers were expecting. Either way, just choose the one that works best in your app, so that your users won’t cringe. Because that’s how you #BuildBetterApps.
Follow the Android Development Patterns Collection for more!
