How to add ripple effect to preferences in android?

Question

I am working on adding ripple effect when the preference is touched (selected). I have customized my preference by extending the ListPreference. I have tried to set the ripple effect programmatically by using RippleDrawable but I don't see the animation.

Here is my customized preference class

public class CustomListPreference extends ListPreference {

        public CustomListPreference(Context context, AttributeSet attrs) {
            super(context, attrs);
        }

        public CustomListPreference(Context context) {
            super(context);
        }

        @Override
        protected void onBindView(View view) {
            super.onBindView(view);
            setCustomStyle(view);
        }

        private void setCustomStyle(View view) {
            TextView titleView = (TextView) view.findViewById(android.R.id.title);
            titleView.setTypeface(InitActivity.TYPEFACE_REGULAR);
            TextView summary = (TextView) view.findViewById(android.R.id.summary);
            summary.setTypeface(InitActivity.TYPEFACE_REGULAR);

            //Setting the drawable here, but it doesn't work.        
            RippleDrawable drawable = (RippleDrawable) getContext().getResources().getDrawable(R.drawable.my_ripple_background);
            view.setBackGround(drawable);
        }

} 

My preferences layout

<?xml version="1.0" encoding="utf-8"?>

<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- opens a subscreen of settings -->
    <com.abc.app.CustomListPreference
            android:defaultValue="1"
            android:entries="@array/sampleEntries"
            android:entryValues="@array/SampleEntryValues"
            android:key="some_preference"
            android:title="@string/some_preferences" />

    <com.abc.app.CustomCheckboxPreference
           android... />


</PreferenceScreen>

My ripple xml

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/light_black_overlay"> <!--#22000000-->
    <item>
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/background_light" />
        </shape>
    </item>
</ripple>

Am I setting the animation for the correct view? Any ideas are appreciated. Thanks.

Retool

Answer 1

This is a minimal complete example for adding a custom ripple effect to a class that extends ListPreference. I just made and tested this with API 21 (5.0).

SettingsActivity (Launch Activity)

public class SettingsActivity extends PreferenceActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        addPreferencesFromResource(R.xml.pref_general);
    }
}

pref_general.xml

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

    <CheckBoxPreference
        android:defaultValue="true"
        android:key="example_checkbox"
        android:summary="a checkbox"
        android:title="Checkbox test" />

    <!-- replace with com.abc.app.CustomListPreference in your case-->
    <com.timcastelijns.rippletest.CustomListPreference
        android:defaultValue="1"
        android:entries="@array/sampleEntries"
        android:entryValues="@array/SampleEntryValues"
        android:key="some_preference"
        android:title="test" />

</PreferenceScreen>

arrays.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="sampleEntries">
        <item>1</item>
        <item>2</item>
        <item>3</item>
    </string-array>

    <string-array name="SampleEntryValues">
        <item>4</item>
        <item>5</item>
        <item>6</item>
    </string-array>
</resources>

CustomListPreference

public class CustomListPreference extends ListPreference {

    private Context ctx;

    public CustomListPreference(Context context, AttributeSet attrs) {
        super(context, attrs);
        ctx = context;
    }

    public CustomListPreference(Context context) {
        super(context);
        ctx = context;
    }

    @Override
    protected void onBindView(View view) {
        super.onBindView(view);
        setCustomStyle(view);
    }

    private void setCustomStyle(View view) {
        RippleDrawable drawable = (RippleDrawable) ctx.getDrawable(R.drawable.my_ripple_background);
        view.setBackground(drawable);
    }
}

my_ripple_background.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/holo_blue_light">
    <item android:id="@android:id/mask">
        <color android:color="@android:color/white" />
    </item>
</ripple>

When pressed, it shows a light blue ripple effect, as specified in the xml:

---

I built this example based on your code, and code from the example SettingsActivity in the android SDK samples.

---

Edit:
After some time in chat and trying various things, we have come to a conclusion that the problem is caused by OP's phone (Samsung S5) or it's settings. When OP tried the code in the emulator, it all worked properly.

For reference - this is how it looked in OPs phone:

Eldoneldora

I have accidentally added .xml file extension in my code. I think I executed my code without the file extension. I'll try other snippets though. – Retool

Tried your code, I could see the blue colored background on touch but it's not like a ripple. A ripple should expand from the point of touch to the side ways of the view. – Retool

@prudhvi it does exactly that for me though. What sdk are you using? Could you include some more of your code so I can check it? Especially your ripple xml – Eldoneldora

I used my ripple xml in other Activities (not preferences) and it is working well so I don't think it has a problem. I'm using minSdkVersion 18 and targetSdkVersion 21. I have included the ripple xml only in drawable-v21 folder. – Retool

@prudhvi and your phone is sdk 21 compatible yes? Can you include the activity code where you use the ripple that works? – Eldoneldora

Yes my phone supports sdk 21. And in that activity where the ripple works, I'm not setting it dynamically. I just use android:background="@drawable/ripple_background" in the xml of the activity. – Retool

@prudhvi is it correct that you have two ripple files? ripple_background and my_ripple_background? – Eldoneldora

No, just one. I always replace my original file/activity names with dummy names in SO questions. – Retool

@prudhvi can you set up a new project to test and use only the code I provided and see if that works? It's late here, I will do some more research in the morning :-) – Eldoneldora

Sure, I appreciate your help. – Retool

@prudhvi I added a gif to show how it works for me. I'm not sure what the problem is for you. Maybe if you can share more of your project we can try find out. – Eldoneldora

I have tested your code by creating a new application and I can see the ripple. But if I replace it with my ripple xml I couldn't see. Could you please verify by using my ripple xml. I have updated the question. – Retool

@prudhvi I used your ripple.xml and color and it works fine for me – Eldoneldora

Let us continue this discussion in chat. – Eldoneldora