Change FAB color with ripple effect

Question

in Android, I want to do something like this (but with 2 alternating colors black and white:

changing color with ripple effect like this

What I tried to do is :

1) set default backgroundTint & ripple color via XML

app:backgroundTint="@android:color/black"
app:rippleColor="@android:color/white"

2) in onclick method, changed backgroundTint to white and ripple color to black

set a string for initial color i.e. high_color = "black". then,

fab.setOnClickListener(new View.OnClickListener() {
        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        @Override
        public void onClick(View v) {
            if(high_color.equals("black")){
                fab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(getApplicationContext(), R.color.white)));
                fab.setImageTintList(ColorStateList.valueOf(ContextCompat.getColor(getApplicationContext(), R.color.black)));
                fab.setRippleColor(ContextCompat.getColor(getApplicationContext(), R.color.black));
                high_color = "white";
            }else {
                fab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(getApplicationContext(), R.color.black)));
                fab.setImageTintList(ColorStateList.valueOf(ContextCompat.getColor(getApplicationContext(), R.color.white)));
                fab.setRippleColor(ContextCompat.getColor(getApplicationContext(), R.color.whites));
                high_color = "black";
            }
        }
    });

now I am getting something like this :

what I am getting is this

is there anyway to make this one look like the first one ? like slowing down the ripple animation speed or anything like that?

Answer 1

Well, never tried this on FAB, but I have implemented the same on an ImageButton for the sake of simplicity as shown below and it works. Hope it helps. This is targeted for API;s greater than 21 (Lollipop). My ImageButton has a resting elevation of 6dp by default and on touch it will be raised to 18dp (6dp + 12dp) which you can change it if you need in lift_on_touch.xml. Also, I am using StateListAnimator which changes based on the state change of the ImageButton.

<ImageButton
    android:id="@+id/share_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:background="@drawable/ripples_on_touch"
    android:elevation="6dp"
    android:padding="16dp"
    android:src="@drawable/ic_share_white_24dp"
    android:stateListAnimator="@animator/lift_on_touch"
    tools:targetApi="lollipop" />

v21/ripples_on_touch.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#F83E0ACC"
tools:targetApi="lollipop">
<item>
    <shape android:shape="oval">
        <solid android:color="#FFFF6F00" />
    </shape>
</item>
</ripple>

v21/lift_on_touch.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
    <set>
        <objectAnimator
            android:duration="@android:integer/config_longAnimTime"
            android:propertyName="scaleX"
            android:valueTo="1.250"
            android:valueType="floatType" />
        <objectAnimator
            android:duration="@android:integer/config_longAnimTime"
            android:propertyName="scaleY"
            android:valueTo="1.250"
            android:valueType="floatType" />
        <objectAnimator
            android:duration="@android:integer/config_longAnimTime"
            android:propertyName="translationZ"
            android:valueTo="12dp"
            android:valueType="floatType" />
    </set>
</item>

<item>
    <set>
        <objectAnimator
            android:duration="@android:integer/config_longAnimTime"
            android:propertyName="scaleX"
            android:valueTo="1.0"
            android:valueType="floatType" />
        <objectAnimator
            android:duration="@android:integer/config_longAnimTime"
            android:propertyName="scaleY"
            android:valueTo="1.0"
            android:valueType="floatType" />
        <objectAnimator
            android:duration="@android:integer/config_longAnimTime"
            android:propertyName="translationZ"
            android:valueTo="0dp"
            android:valueType="floatType" />
    </set>
</item>
</selector>

Answer 2

I think you should use Selectors. Selectors allows making changes in the background easily.

Use Selectors in a similar way like this:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/white" state_enabled="true "/>
    <item android:color="@android:color/black" state_enabled="false "/>
</selector>

Use it as a background of FAB with below snippet:

app:background ="@drawable/selector"

This Will Make White Color As Background When It Is Tapped. Else It Will Be Black. There Are Many More attribute namespaces to tweak selectors even more. So, Read About Selectors On Android developers Site. Reply Me If This Really Helped You.