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