Adding a custom shape to selected item inside RecyclerVIew

Question

How to show a custom shape as background behind the selected item inside a recyclerview. I've tried several things but all failed:

activity_main.xml:

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/nav_drawer_recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/drawer_background"
                android:theme="@style/drawer"></android.support.v7.widget.RecyclerView>

        </LinearLayout>

drawer_background.xml:

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/drawable_shape_selected" android:state_checked="true"></item>
    <item android:drawable="@android:color/transparent"></item>
</selector>

drawable_shape_selected.xml:

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFB74D"></solid>

</shape>

custom_layout.xml:For RecyclerView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/TextViewDisplay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello" />

</LinearLayout>

Update:

itemView.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean b) {
                Toast.makeText(context, "Position " + getAdapterPosition(), Toast.LENGTH_SHORT).show();
            }
        });

Sharath kumar · Accepted Answer · 2017-10-04T13:01:55.347

0

Change your drawer_background.xml like this

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/drawable_shape_selected"
          android:state_pressed="true" />
    <item android:drawable="@drawable/drawable_shape_selected"
          android:state_focused="true" />
    <item android:drawable="@android:color/transparent" />
</selector>

Also add android:focusableInTouchMode="true" to the linear Layout of custom_layout.xml

This is because by default when the view is touched it will take click instead of focus.If you want view to be focused and change its background when pressed add this to your view i.e LinearLayout in xml.

EDIT:focusableInTouchMode makes the view touch mode for the first time disabling click.So to make button click happen for the first time add focus listener in java class for the button and onFocuschange add view.performClick() to make button takes click.

Button button = view.findViewById(R.id.buttonPanel2);
button.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean focus) {
                if(focus){
                   view.performClick();
                }
             }
        });

edited Oct 04 '17 at 13:01

answered Oct 04 '17 at 05:50

Sharath kumar

4,064
1
14
20

Thanks!! And what if I wanted to add shadow behind that shape. – Sumit Shukla Oct 04 '17 at 05:56
Your most welcome..shadow can be added in xml and also by creating custom class..check this link for the answer... https://stackoverflow.com/questions/26356060/how-to-add-shadow-effect-on-drawable-in-android – Sharath kumar Oct 04 '17 at 05:58
Brother.!! This focusableInTouchMode has locked recyclerView first click, it only works on second click – Sumit Shukla Oct 04 '17 at 11:52
bro updated code..check now..this should solve your problem :) – Sharath kumar Oct 04 '17 at 12:17
add that inside your viewholder – Sharath kumar Oct 04 '17 at 12:36
what position?inside your viewholder where you initialize your button..add the focuslistener there..it wil work – Sharath kumar Oct 04 '17 at 12:39
Every time focus changes it gives two position.first previous focus and next new focus. – Sumit Shukla Oct 04 '17 at 12:49
I dont think you will get any problem if you add that code inside the view holder constructor..If so then use getAdapterPosition() to get the position. – Sharath kumar Oct 04 '17 at 12:53
Yes I am doing the same thing.But it giving last position as well as new position as i am printing in Toast. – Sumit Shukla Oct 04 '17 at 12:54
but why do you need position?view.performClick(); lets you add click on the first click only.Also focus change listener is called two times always..once in focus lost and once in focus gain..the boolean value is to check if focus is gained or lost.When you click new item last item is shown because it lost the foucs and new item gained the focus – Sharath kumar Oct 04 '17 at 12:59
Great but I have to open a new activity everytime when focus is changed or text is clicked.... – Sumit Shukla Oct 04 '17 at 13:25
then add focus listener to textview not itemview – Sharath kumar Oct 04 '17 at 13:41
Bro..RecyclerView loses background of the selected item when drawer is closed!! – Sumit Shukla Oct 06 '17 at 06:55

Adding a custom shape to selected item inside RecyclerVIew

1 Answers1