Programming

Android flat button (xml) Tutorial

What is flat design?

Flat design is a minimalistic design approach that emphasizes usability. It features clean, open space, crisp edges, bright colors and two-dimensional/flat illustrations.

Benefits of flat design

Bright, contrasting colors make illustrations and buttons pop from backgrounds, easily grab attention, and guide the user’s eye. The purpose of minimalistic imagery also contributes to flat design’s functional character.

Tutorial

First we need to choose two colors: for normal state and pressed state. Usually that’s the same colors with different type of depth. Pressed state color will also be used as for bottom line of flat button normal state.

Create colors.xml file inside values folder and define two colors there:

<resources>
    <color name="blue_pressed">@android:color/holo_blue_dark</color>
    <color name="blue_normal">@android:color/holo_blue_light</color>
</resources>

We used two standard android holo colors:

<!-- A dark Holo shade of blue -->
<color name="holo_blue_dark">#ff0099cc</color>
<!-- A light Holo shade of blue -->
<color name="holo_blue_light">#ff33b5e5</color>

 

Now we need to create dimen.xml file inside values folder and define two parameters:

<resources>
    <dimen name="corner_radius">4dp</dimen>
    <dimen name="layer_padding">3dp<<dimen>
</resources>

Corner radius indicate how rounded the corners of our button will be. See image below.say-hello-android-flat-button-1

 

Layer radius indicate distance between bottom and top layer of our button. See image below.say-hello-android-flat-button-2

 

Next step is to define shapes for button background. Create rect_pressed.xml file inside drawable folder. This will be our pressed state background and bottom layer for normal state.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <corners android:radius="@dimen/corner_radius" />
  <solid android:color="@color/blue_pressed" />
</shape>>

 

say-hello-android-flat-button-drawableFor normal state create rect_normal.xml file inside drawable folder. This drawable combines two layers, for bottom layer we used rect_pressed drawable and for top layer we defined new shape with little padding on the bottom (to make bottom layer visible) and new blue color.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/rect_pressed" />
 
  <item android:bottom="@dimen/layer_padding">
      <shape android:shape="rectangle">
          <corners android:radius="@dimen/corner_radius" />
          <solid android:color="@color/blue_normal" />
      </shape>
  </item>
</layer-list>

say-hello-android-flat-button-drawable-1

Last thing to do is to define selector for our button. Create flat_selector.xml file inside drawablefolder.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true" android:drawable="@drawable/rect_pressed"/>
  <item android:drawable="@drawable/rect_normal"/>
</selector>

That’s all, now simply define your button and set background to flat_selector.

<Button
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:background="@drawable/flat_selector"
      android:textColor="@android:color/white"
      android:text="Say Hello" />

Hope you enjoy this little article.

Previous ArticleNext Article