Highlighting the Selected Item in the Listview in Android

How to highlight selected row in listview?

use android:listSelector and set color you want to Highlight

   <ListView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/popup_lstview_relations"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_above="@+id/relativeLayout"
                android:choiceMode="singleChoice"
                android:listSelector="@android:color/darker_gray"/>

ListView Highlight selected items

You can do it by below code instead of applying in adapter class,
Check below code,

    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

            parent.getChildAt(position).setBackgroundColor(Color.TRANSPARENT);
            //cardAdapter.setSelectedIndex(position);
        }
    });

How to highlight or check selected list items

"I am mostly interested in knowing the standard way of doing this according to material design guidelines and/or the most common way."

I'm not sure my answer is material design or common but I've done a GridView based off handling of selections in the Google "Photos" app. I have tested it and know that it will both include a highlighted border and a 'checkbox'.

** disclaimers **

I considered using a selector but there seems to be problems with that if your view scrolls (see this). Also, I used a custom checkbox (really just two different drawables), partially because of this. Also, this answer just basically handles a phone in portrait mode. More would need to be added to handle different configurations (screen size, orientation, etc.)

There's a lot here, but like I said, I've tested it. The whole project has been posted to GitHub.

1st, in MainActivity onCreate()

mList = new ArrayList<>();

// fill your list here

mAdapter = new GridAdapter(getApplicationContext(), R.layout.grid_item, mList);
GridView gridView = (GridView)findViewById(R.id.grid_view);
gridView.setAdapter(mAdapter);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        Log.d(TAG, "item clicked = " + i);
        boolean isSelected = mList.get(i).isSelected();
        mList.get(i).setSelected(!isSelected);

        mAdapter.notifyDataSetChanged();
    }
});

Next, overide getView() in your Adapter (I'm using an ArrayAdapter)

@NonNull
@Override
public View getView(int position, View convertView, @NonNull ViewGroup parent) {

    RelativeLayout itemLayout;

    GridItem gridItem = (GridItem)getItem(position);

    // use existing Views when we can
    if(convertView == null) {
        LayoutInflater inflater = (LayoutInflater)
                getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        itemLayout = (RelativeLayout) inflater.inflate(R.layout.grid_item, null);
    } else {
        itemLayout = (RelativeLayout) convertView;
    }

    // get your bitmap or list item etc. here
    BitmapDrawable bitmap = gridItem.getBitmap();
    ImageView imageView = (ImageView)itemLayout.findViewById(R.id.image_view);
    imageView.setBackground(bitmap);

    if(gridItem.isSelected()) {
        final int PADDING = 16;

        Log.d(TAG, "position " + position + " is selected");
        itemLayout.findViewById(R.id.image_frame).setPadding(PADDING, PADDING, PADDING, PADDING);
        itemLayout.findViewById(R.id.custom_check_box)
                .setBackgroundResource(R.drawable.custom_check_box_selected);
    } else {
        Log.d(TAG, "postion " + position + " is NOT selected");
        itemLayout.findViewById(R.id.image_frame).setPadding(0,0,0,0);
        itemLayout.findViewById(R.id.custom_check_box)
                .setBackgroundResource(R.drawable.custom_check_box_unselected);
    }
    return itemLayout;
}

Here's the core of the GridItem class, left out the getters & setters.

public class GridItem {

    private BitmapDrawable bitmap = null;
    private boolean isSelected = false;

    public GridItem(BitmapDrawable bitmap) {
        this.bitmap = bitmap;
    }
}

That's it for the Java. Now for some xml

grid_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    >
    <FrameLayout
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:id="@+id/image_frame"
        >
        <!-- view for the main image -->
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="center"
            android:background="@android:color/white"
            android:id="@+id/image_view"
            />
    </FrameLayout>

    <!-- view for the 'checkbox' in upper left corner -->
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:src="@drawable/custom_check_box_unselected"
        android:id="@+id/custom_check_box"
        />
</RelativeLayout>

And this would go in content_main.xml or activity_main.xml, etc.

<GridView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="2"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="20dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
    android:id="@+id/grid_view"
    >
</GridView>

And now 2 files for your drawable folder.

custom_check_box_unselected.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="20dp"
    android:width="20dp"

    android:viewportWidth="400"
    android:viewportHeight="400">

    <!-- the outside box -->
    <!-- top line & top left corner -->
    <path android:pathData="M 340 30 H 62 c -20 0 -35 15 -35 35 "
        android:strokeColor="#000000" android:strokeWidth="20" />

    <!-- left line & bottom left corner -->
    <path android:pathData="M 27 64 v271 c0 20 15 35 35 35 "
        android:strokeColor="#000000" android:strokeWidth="20" />

    <!-- bottom line & bottom right corner -->
    <path android:pathData="M 60 370 h275 c20 0 35 -15 35 -35"
        android:strokeColor="#000000" android:strokeWidth="20" />

    <!-- right line & top right corner -->
    <path android:pathData="M 370 336 v -271 c0 -20 -15 -35 -35  -35"
        android:strokeColor="#000000" android:strokeWidth="20" />
</vector>

custom_check_box_selected.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="20dp"
    android:width="20dp"

    android:viewportWidth="400"
    android:viewportHeight="400">

    <!-- the outside box -->
    <path android:pathData="M 340 30 H 62 c -20 0 -35 15 -35 35
            v271 c0 20 15 35 35 35
            h275 c20 0 35 -15 35 -35
            v -271 c0 -20 -15 -35 -35  -35 "
        android:fillColor="#FDD835"  android:strokeColor="#000000" android:strokeWidth="20" />

    <!-- the check mark -->
    <path android:pathData="M 140 320 l -100 -100 25 -30
            l 75 75 l 190 -190
            l 25 30 l -190 190"
        android:fillColor="#000000"  android:strokeColor="#000000" android:strokeWidth="2" />
</vector>

highlight selected row in listview

either add listView.requestFocusFromTouch() :

public void highlightItem(int position) {
    listView.requestFocusFromTouch();
    listView.setSelection(position);
 }

or

Alternative solution is to call listView.setItemChecked(position, true); without requesting focus or setting selection, for this to work add

<item android:state_activated="true" android:drawable="@color/pressed_color"/>

in your drowable/bg_key.xml

Important: : oh, and dont forget to set choice mode for you list, you need to do it once, i.e.:

listView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);

Hope that helps

How to Highlight single item in Listview

add boolean flag in your pojo class say

Boolean isSelected;

apply getter and setters in it.
initially set all the values for isSelected = false so that no list item is selected

now during onItem click set the current Object's isSelected to true
like this

within the onItemClick apply this

OnItemClickListener listViewOnItemClick = new OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView<?> adapter, View arg1, int position, long id) {

for(int i =0;i  < lstcategory.size();i++}{
lstcategory.get(i).setIsSelected(false);
}

lstcategory.get(position).setIsSelected(true); 
            mAdapter.notifyDataSetChanged();

    }
};

now in getview of your adapter class check if the lists item isChecked or not.

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    final View view = View.inflate(context, R.layout.item_list, null);

    if (lstcategory.get(position).getIsSelected()) {
        // set selected your color
    }else{
       //set default color
    }

    return view;
}

Why is my ListView item selected, but not highlighted after click?

Although @jyomin provided a solution to my problem it may generate a few bugs:

• When user scrolls (down or up) enough to hide the selected item, it will return to the unselected state.
• If user touches the screen (at any place) it will remove the ListView item focus.

That being said (and tested), I decided to find another workaround to my old code, as I want to not only highlight but activate the ListView item.

I found out that I was setting the background behavior at the wrong place. It should have been set before at the LinearLayout inside list_item_layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="@layout/list_selected" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center"
        android:layout_marginLeft="20dp"
        android:scaleType="fitCenter"
        android:src="@drawable/datahora" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="10dp"
        android:fontFamily="sans-serif-light"
        android:text="TextView"
        android:textColor="@layout/text_selected"
        android:textSize="22dp" />

</LinearLayout>

Simply added the activated state to the View:

@Override
    public void onListItemClick(ListView listView, View view, int position,
            long id) {
        super.onListItemClick(listView, view, position, id);

        view.setSelected(true);
        view.setActivated(true);

        // Notify the active callbacks interface (the activity, if the
        // fragment is attached to one) that an item has been selected.
        mCallbacks.onItemSelected(DummyContent.ITEMS.get(position).id);

    }

And defined a new selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Selected Item -->

    <item android:state_selected="true"
        android:drawable="@android:color/holo_blue_light" />
    <item android:state_activated="true"
        android:drawable="@android:color/holo_blue_light" />

    <!-- Default Item -->
    <item android:state_selected="false"
        android:drawable="@android:color/white" />
</selector>

Way to go, Machado. :)

Highlight the list-view selected item programatically in xamarin.forms

Solution:

You can bind your Cell's background color with the property in your model. When the user clicked on that notification, change the background color of the specific cell in model and then it will change in listview:

    private void ClickNotification(object sender, EventArgs e)
    {
        var index = _myViewModel.Users.IndexOf(selectedUser);

        //change the background color of the specific cell in model
        myModel model = _myModelList[index];
        model.myBackColor = Color.Blue;
    }

In the model:

class myModel : INotifyPropertyChanged
{
    Color backColor;

    public event PropertyChangedEventHandler PropertyChanged;

    public myModel( Color myColor)
    {
        backColor = myColor;
    }

    public Color myBackColor
    {
        set
        {
            if (backColor != value)
            {
                backColor = value;

                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs("myBackColor"));
                }
            }
        }
        get
        {
            return backColor;
        }
    }
}

And in the xaml:

<ListView x:Name="myListView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal" BackgroundColor="{Binding myBackColor}">

                </StackLayout>

            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

---

Related Topics