How can I build such button?

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

Make your button's android:background attribute to point your desired image. Create your image with the text and the little person icon. It's not possible to put a text and an image at the same time inside a button.

For the blue shadow, you can either include it in your image or achieve the same result with the gradient attribute as you already said in your question.

Answer 2

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

Answer 3

For the image, you should use

android:drawableRight

As for the shadow I'm not sure how this is achieved.