Buttons

  • Buttons in One UI should be easy to understand and provide an immediate action. Background color can be used to emphasize buttons, but only one button style should be used on any given screen.
  • Flat
  • Low Emphasis
  • Contained
  • Medium Emphasis
    High Emphasis
The background drawable of Button can be configured as below.

/res/drawable/button.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
	android:color="?attr/colorControlHighlight">
	<item android:id="@android:id/mask" android:drawable="@drawable/button_mask"/>
	<item android:drawable="@drawable/button_background"/>
</ripple>

/res/drawable/button_mask.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">
	<solid android:color="@color/white"/>
	<corners android:radius="18dp" />
</shape>

/res/drawable/button_background.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	   android:shape="rectangle">
	<solid android:color="?attr/colorButtonNormal"/>
	<corners android:radius="18dp"/>
</shape>

Flat button

  • Flat buttons without any background color are used for actions that don't need any emphasis. They should also be used in toolbars and dialogs to avoid adding unnecessary layers.

Contained button

  • Background color can be used to make a button stand out on a crowded screen. Use a gray background for moderate emphasis, and apply a colored background for a high level of emphasis.