Adding ripple effect for View in onClick

Rodriquez picture Rodriquez · Jul 28, 2016 · Viewed 36k times · Source

Hello I am trying to add a ripple effect onClick method for View, but this one no working. All my items having an ID, but I don't know how to call it

Here is a code.

 @Override
public void onClick(View v) {
    int[] attrs = new int[]{R.attr.selectableItemBackground};
    TypedArray typedArray = getActivity().obtainStyledAttributes(attrs);
    int backgroundResource = typedArray.getResourceId(0, 0);
    v.setBackgroundResource(backgroundResource);

    switch (v.getId()) {
        case ACTION_PLAY_ID:
            Log.d(MainActivity.TAG, getString(R.string.detail_action_play));
            v.setBackgroundResource(backgroundResource);
            Intent intent = new Intent(getActivity(), PlayerActivity.class);
            intent.putExtra(Video.VIDEO_TAG, videoModel);
            startActivity(intent);

            break;
        case ACTION_BOOKMARK_ID:
            if (bookmarked) {
                v.setBackgroundResource(backgroundResource);
                deleteFromBookmarks();
                ((ImageView) v).setImageDrawable(res.getDrawable(R.drawable.star_outline));
            } else {
                v.setBackgroundResource(backgroundResource);
                addToBookmarks();
                ((ImageView) v).setImageDrawable(res.getDrawable(R.drawable.star));
            }
            break;
        case ACTION_REMINDER_ID:
            if (!isReminderSet) {
                createReminderDialog((ImageView) v);
            } else {
                cancelReminder(liveTvProgram.getProgramId());
                ((ImageView) v).setImageDrawable(res.getDrawable(R.drawable.alarm));
            }
            break;
    }
}

For Lubomir

i have something like this but not working too:

 @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle
        savedInstanceState) {
    View view = inflater.inflate(R.layout.item_detail, container, false);
    ButterKnife.bind(this, view);

    View myView = view.findViewById(R.id.actions_container);
    int[] attrs = new int[]{R.attr.selectableItemBackground};
    TypedArray typedArray = getActivity().obtainStyledAttributes(attrs);
    int backgroundResource = typedArray.getResourceId(0, 0);
    myView.setBackgroundResource(backgroundResource);

    loadImage();
    init();

    return view;
}

ImageViews(actionbuttons) is creating in java for LinearLayout actions_container

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <ImageView
        android:id="@+id/header_image"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="@dimen/detail_image_1_state"
        android:elevation="8dp"/>

    <RelativeLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="@dimen/detail_bottom_margin"
        android:layout_marginTop="@dimen/detail_top_margin"
        android:background="@color/primary_color">

        <LinearLayout
            android:id="@+id/actions_container"
            android:layout_width="match_parent"
            android:layout_height="@dimen/detail_actions_height"
            android:layout_alignParentTop="true"
            android:background="@drawable/ripple_effect_image"
            android:elevation="2dp"
            android:orientation="horizontal"
            android:paddingLeft="300dp"
            android:paddingStart="300dp"/>

        <LinearLayout
            android:id="@+id/content_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/actions_container"
            android:orientation="vertical"
            android:paddingLeft="300dp"
            android:paddingStart="300dp">

            <TextView
                android:id="@+id/title"
                style="@style/TextTitleStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <TextView
                android:id="@+id/subtitle"
                style="@style/TextSubtitleStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="gone"/>

            <TextView
                android:id="@+id/duration"
                style="@style/TextSubtitleStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <TextView
                android:id="@+id/season"
                style="@style/TextDescriptionStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="gone"/>

            <TextView
                android:id="@+id/episode"
                style="@style/TextDescriptionStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="gone"/>

            <TextView
                android:id="@+id/description"
                style="@style/TextDescriptionStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxLines="7"/>

        </LinearLayout>

        <FrameLayout
            android:id="@+id/recommended_frame"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_alignParentBottom="true">

            <android.support.v17.leanback.widget.HorizontalGridView
                android:id="@+id/recommendation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clipChildren="false"
                android:clipToPadding="false"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"/>
        </FrameLayout>

        <TextView
            android:id="@+id/recommended_text"
            style="@style/TextHeaderStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@id/recommended_frame"
            android:text="@string/related_programs"/>

    </RelativeLayout>


</RelativeLayout>

Also my xml ripple effect file is like:

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

Answer

Lubomir Babev picture Lubomir Babev · Jul 28, 2016

Clickable Views

In general, ripple effect for regular buttons will work by default in API 21 and for other touchable views, it can be achieved by specifying

android:background="?android:attr/selectableItemBackground"

In code:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.your_layout);

    View myView = findViewById(R.id.myView);
    int[] attrs = new int[]{R.attr.selectableItemBackground};
    TypedArray typedArray = getActivity().obtainStyledAttributes(attrs);
    int backgroundResource = typedArray.getResourceId(0, 0);
    myView.setBackgroundResource(backgroundResource);
}