Button with frame background like Google play button

Question

I want to add this button in my application:

I can create drawable with the frame. But I do not know, how to add this background to the button. If I set android:background property, then the button will loose material design effects.

How can I do this?

Possible duplicate of this question https://stackoverflow.com/questions/26686250/material-effect-on-button-with-background-color — Srihari, Jul 11 '17 at 06:33
srihari, I already saw this question. It's do not help me. Because I can not set my drawable as `colorButtonNormal`. App crashed with `Resources$NotFoundException` — Yura Shinkarev, Jul 11 '17 at 06:40

score 0 · Answer 1 · answered Jul 11 '17 at 06:56

Try this,

First create a drawable having frame

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@android:color/white" />
    <stroke
        android:width="2dp"
        android:color="@color/colorAccent" />

</shape>

After this create your ripple effect drawable for drawable-v21 (version >= Lollipop) :-

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/your_ripple_color">

    <!-- button background -->
    <item android:drawable="@drawable/abc"/>
</ripple>

don't forget to add the selector or drawable with the same name in drawable folder for pre-lollipop device

score 0 · Accepted Answer · answered Jul 11 '17 at 07:18

Try This,

Create Drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ffffff"></solid>
<stroke
    android:width="2dp"
    android:color="#05BC32"></stroke>
<corners android:radius="5dp"></corners>
</shape>

Apply on Button in your layout
         <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:background="@drawable/button_back"
         android:textColor="#05BC32"
         android:textSize="18sp"
         android:text="OPEN"/>

Mohammed Farhan · Answer 3 · 2017-07-11T08:16:53.637

Fist declare green colour in your colors.xml file

 <?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="green">#3cb879</color>
    <color name="white">#ffffff</color>
</resources>

then create a drawable file called green_button.xml and cop this code

        <?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#e78181" />
            <stroke android:width="5dip" android:color="@color/green" />
            <corners android:radius="10dip" />
            <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient android:startColor="#ffffff" android:endColor="#ffffff" android:angle="270" />
            <stroke android:width="1dp" android:color="#ffffff" />
            <corners android:radius="4dp" />
            <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
        </shape>
    </item>
</selector>

and then in activity_main.xml create button and apply background to it like this.

<Button
        android:layout_width="150dp"
        android:layout_height="60dp"
        android:text="OPEN"
        android:textColor="@color/green"
        android:textSize="30sp"
        android:layout_margin="5dp"
        android:background="@drawable/green_button"/>

see output here

See edited green_button.xml code. Update your green_button.xml code with this edited one. I have used red colour to show click listener effects. Change it to your requirements. — Mohammed Farhan, Jul 11 '17 at 08:16

score 0 · Answer 4 · answered Jul 11 '17 at 08:25

First declare the colors you want and then use the following xml as your button's background. I guess that it will work fine if you use instead of shape="rectangle" the shape you have declared already

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
  <item  >
    <shape android:shape="rectangle">
      <solid android:color="@color/primary" />
    </shape>
  </item>
  <item android:id="@android:id/mask">
    <shape android:shape="rectangle">
      <solid android:color="@color/primary_dark" />
    </shape>
  </item>
</ripple>

Button with frame background like Google play button

4 Answers4