CODEWITHSUNDEEP
androidxml
Sermilion
Sermilion

Reputation: 2049

Android: selectableItemBackground not working on button with xml drawable

I made a rounded button with xml drawable and applied android:foreground="?attr/selectableItemBackground" in hope of getting a ripple effect. However, ripple effect does not work. Is there anyway to make the ripple effect work? As a workaround I wrapped the button with a FrameLayout and applied android:foreground="?attr/selectableItemBackground" to it, but in that case the ripple is rectangular and goes beyond button (as it is rounded).

xml:

<Button
            android:id="@+id/reg_next"
            android:layout_width="125dp"
            android:layout_height="40dp"
            android:text="@string/next"
            android:layout_gravity="center"
            android:textAllCaps="false"
            android:textColor="@color/colorPrimary"
            android:textSize="18sp"
            android:background="@drawable/rounded_button_background"
            android:foreground="?attr/selectableItemBackground"/>

rounded_button_background:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <solid android:color="#ebeff1"/> <!-- this one is ths color of the Rounded Button -->
    <stroke android:width="1px" android:color="#979797" />
    <corners
        android:radius="20dp"
        android:bottomLeftRadius="20dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp"/>
    </shape>

Upvotes: 0

Views: 1110

Answers (1)

Fori
Fori

Reputation: 485

You need to create ripple drawable and set it as button background (without foreground attribute):

rounded_button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#2793c9">
    <item>
        <shape
            android:padding="10dp"
            android:shape="rectangle">
            <solid android:color="#ebeff1" /> <!-- this one is ths color of the Rounded Button -->
            <stroke
                android:width="1px"
                android:color="#979797" />
            <corners
                android:bottomLeftRadius="20dp"
                android:radius="20dp"
                android:topLeftRadius="20dp"
                android:topRightRadius="20dp" />
        </shape>
    </item>
</ripple>

If you want support api bellow 21 (without ripple effect), add this drawable to directory drawable-v21 and in directory drawable create these files:

rounded_btn_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle">
    <solid android:color="#ebeff1" /> <!-- this one is ths color of the Rounded Button -->
    <stroke
        android:width="1px"
        android:color="#979797" />
    <corners
        android:bottomLeftRadius="20dp"
        android:radius="20dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp" />
</shape>

rounded_btn_active.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle">
    <solid android:color="#2793c9" /> <!-- this one is ths color of the Rounded Button -->
    <stroke
        android:width="1px"
        android:color="#979797" />
    <corners
        android:bottomLeftRadius="20dp"
        android:radius="20dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp" />
</shape>

rounded_button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/rounded_btn_active" android:state_enabled="true" android:state_pressed="true" />
    <item android:drawable="@drawable/rounded_btn_normal" android:state_enabled="true" />
</selector>

Upvotes: 3

Related Questions