Using A Custom Color For Button Background While Using Selectableitembackground Attribute

December 26, 2023 Post a Comment

I am trying to use android:background='?android:attr/selectableItemBackground' to get my button to do appropriate effects for each android version like rippling, etc. But this p

Solution 1:

If you read the source code of Button.java then you will see that it is a subclass of TextView.java. I have made a simple workaround for the problem in question.

<LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:clickable="true"android:background="#1f5050"><TextViewandroid:layout_width="some_dp"android:layout_height="some_dp"android:id="@+id/button"android:background="?android:selectableItemBackground" /></LinearLayout>

In code:

button.setOnClickLisetener(new Onclicklistener() {
    // do your stuff here
}

It would be much better if someone can extend the TextView class and make a custom Button with the feature in question.

Note: my minsdk is 14. also, the lollipop ripple effect works just fine

Solution 2:

Just move your desired color in outer/parent level, e.g. "@color/Red" is button color:

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/Red"android:layout_weight="1"><Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="?attr/selectableItemBackground"android:gravity="center"android:text="Hello"android:textColor="@color/White"/></LinearLayout>

Solution 3:

Using this method, you can customize ripple effect color. First, you have to create an xml file in your drawable resource directory. Create a ripple_effect.xml file and add following code. I use background colour as Red.

res/drawable/ripple_effect.xml

<?xml version="1.0" encoding="utf-8"?><ripplexmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:color="#af0c0e"tools:targetApi="lollipop"><itemandroid:id="@android:id/mask"><shapeandroid:shape="rectangle"><solidandroid:color="#af0c0e" /></shape></item></ripple>

And set background to above drawable resource file. Final code of xml layout activity looks like this. res/layout/ripple_animation.xml

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.CardViewandroid:layout_width="match_parent"android:layout_height="wrap_content"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_marginLeft="6dp"android:layout_marginRight="6dp"android:layout_marginBottom="8dp"android:layout_marginTop="8dp"android:paddingBottom="30dp"app:cardBackgroundColor="#e7e7e7"android:id="@+id/cardview"xmlns:android="http://schemas.android.com/apk/res/android"><LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"android:clickable="true"android:background="@drawable/ripple_effect"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:layout_marginRight="16dp"android:layout_marginLeft="16dp"android:paddingBottom="5dp"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Pending"android:layout_weight="1"android:layout_marginBottom="2dp"android:textSize="25dp"android:textColor="#d11010"android:id="@+id/txtpending" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Assigned to:"android:layout_marginLeft="20dp"android:textColor="#ff000000"android:id="@+id/txtassigned"android:layout_weight="1"/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:paddingBottom="5dp"android:paddingTop="5dp"android:layout_marginLeft="16dp"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="Student Name"android:id="@+id/txtstudentname"/><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="Student Number"android:id="@+id/txtstudentnumber"/><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="Parent Name"android:id="@+id/txtparentname"/><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="Parent Number"android:id="@+id/txtparentnumber"/><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="Transfer Status"android:id="@+id/txttransfer"/></LinearLayout></LinearLayout></LinearLayout></android.support.v7.widget.CardView>

Now,ripple effect is Red colour.

Solution 4:

if you want to do it programmatically:

funsetSelectableBgWithColor(view: View, bgColor: Int? = null) {
    val bgSelectable = getDrawableResCompat(view.context, android.R.attr.selectableItemBackground)
    val bg = if (bgColor == null) bgSelectable else LayerDrawable(
        arrayOf(ColorDrawable(color), bgSelectable)
    )

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        view.background = bg
    } else {
        view.setBackgroundDrawable(bg)
    }
}

fungetDrawableResCompat(context: Context, @AttrRes id: Int): Drawable? {
    return TypedValue()
        .also { context.theme.resolveAttribute(id, it, true) }
        .let {
            val resId = if (it.resourceId != 0) it.resourceId else it.data
            ContextCompat.getDrawable(context, resId)
        }
}

Solution 5:

Edit: this is now possible using AppCompat and backgroundTint

   android:backgroundTint="@color/yourColor"

Previous solution:

I had the same problem and ended up doing this programmatically:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        ColorStateListcolors=newColorStateList(newint[][]{
                newint[]{android.R.attr.state_enabled},
        }, newint[]{pressed});
        GradientDrawableitem=newGradientDrawable();
        item.setCornerRadius(radius);
        item.setColor(normal);
        RippleDrawableripple=newRippleDrawable(colors, item, null);
        button.setBackgroundDrawable(ripple);
    } else {
        StateListDrawablestateListDrawable=newStateListDrawable();
        GradientDrawable item;
        item = newGradientDrawable();
        item.setCornerRadius(radius);
        item.setColor(pressed);
        stateListDrawable.addState(newint[]{android.R.attr.state_enabled, android.R.attr.state_pressed}, item);
        item = newGradientDrawable();
        item.setCornerRadius(radius);
        item.setColor(normal);
        stateListDrawable.addState(newint[]{android.R.attr.state_enabled}, item);
        button.setBackgroundDrawable(stateListDrawable);
    }

Android Tech Blog