How to make flat button in android?

What is flat design?

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

Benefits of flat design

Bright, contrasting colours 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. - creativebloq.com

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 res\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.

Layer radius indicate distance between bottom and top layer of our button. See image below.

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>  

For 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>  

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

<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.

comments powered by Disqus