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.

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: