Question

I need to implement such button for my Android app. It would be great to do this without using full image as button.
I’ve done almost the same button using <shape> with <gradient>. The only thing I need is to add bottom blue button shadow and include image.

Is it possible?

Thanks in advance.

Answer 1

You can do this by combining Shape Drawables inside a Layered Drawable. To do so, you’ll have 3 xml files as below:

• button.xml (the one you already have i guess)

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle" >
  
      <corners android:radius="16dp" />
  
      <gradient
          android:angle="270"
          android:centerColor="#FFFFFF"
          android:endColor="#CAEBF8"
          android:startColor="#FFFFFF"
          android:type="linear" />
  
      <padding
          android:bottom="8dp"
          android:left="8dp"
          android:right="8dp"
          android:top="8dp" />
  
      <stroke
          android:width="2dp"
          android:color="#FFFFFF" />
  
  </shape>
  

• button_bg.xml (to add the blue border below the button)

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle" >
  
      <corners android:radius="16dp" />
  
      <solid android:color="#6FC8F1" />
  
  </shape>
  

• layered_button.xml (to combine the previous xml, and the drawable to use as background on your button)

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  
      <item android:drawable="@drawable/button_bg"/>
      <item
          android:bottom="2dp"
          android:drawable="@drawable/button"/>
  
  </layer-list>
  

You’ll find more information on the Layer List in the Drawables Documentation