CODEWITHSUNDEEP
androiduser-interface
Sergey Metlov
Sergey Metlov

Reputation: 26341

How can I build such button?

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.

Button

Is it possible?

Thanks in advance.

Upvotes: 1

Views: 414

Answers (3)

XGouchet
XGouchet

Reputation: 10203

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

Upvotes: 1

Anordil
Anordil

Reputation: 150

For the image, you should use 

android:drawableRight

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

Upvotes: -1

C.d.
C.d.

Reputation: 10005

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.

Upvotes: 1

Related Questions