CardView selector?

Question

I'm creating a notes app and I'm using a contextual action bar to delete notes. I have my notes displayed in a card view. I have the action bar working to the point where I can select notes and delete them. But when I select notes I want to use a checkmark as a selector if possible (otherwise any selector) which I have been unsuccessful in achieving.

contextual action bar

mListViewNotes = (ListView) findViewById(R.id.listview_notes);
    mListViewNotes.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE_MODAL);
    mListViewNotes.setMultiChoiceModeListener(new AbsListView.MultiChoiceModeListener() {

        CardView cardView = (CardView) findViewById(R.id.cardView);

        @Override
        public void onItemCheckedStateChanged(ActionMode mode, int position, long id, boolean checked) {
            if (list_items.contains(notes.get(position))) {
                count = count-1;
                list_items.remove(notes.get(position));
                mode.setTitle(count + " Notes Selected");
            } else {
                count = count+1;
                list_items.add(notes.get(position));
                mode.setTitle(count + " Notes Selected");
            }

            if (count == 0) {
                mode.setTitle("No Notes Selected");
            }
        }

        @Override
        public boolean onCreateActionMode(ActionMode mode, Menu menu) {

            app_bar.setVisibility(View.GONE);
            MenuInflater inflater = mode.getMenuInflater();
            inflater.inflate(R.menu.context_menu, menu);
            actionMode = mode;
            return true;
        }

        @Override
        public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
            return false;
        }

        @Override
        public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
            deleteNote();
            return true;
        }

        @Override
        public void onDestroyActionMode(ActionMode mode) {
            count = 0;
            app_bar.setVisibility(View.VISIBLE);
            list_items.clear();
        }
    });
}

item_note.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/light_sand"
android:orientation="vertical"
android:id="@+id/item_note">

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_gravity="center"
    android:layout_marginBottom="6dp"
    android:layout_marginEnd="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="6dp"
    card_view:cardCornerRadius="4dp"
    card_view:cardElevation="6dp">

    <ImageView
        android:layout_width="1000dp"
        android:layout_height="150dp"
        android:layout_gravity="start"
        android:layout_marginLeft="-80dp"
        android:layout_marginTop="-12dp"
        android:background="@drawable/texture_tile_old"
        android:scaleType="fitStart" />

    <ImageView
        android:id="@+id/clef_note"
        android:layout_width="70dp"
        android:layout_height="120dp"
        android:layout_gravity="start"
        android:layout_marginTop="10dp"
        android:background="@drawable/treble_clef" />

    <View
        android:layout_width="780dp"
        android:layout_height="1dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="43dp"
        android:background="@color/black" />

    <View
        android:layout_width="780dp"
        android:layout_height="1dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="70dp"
        android:background="@color/black" />

    <View
        android:layout_width="780dp"
        android:layout_height="1dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="97dp"
        android:background="@color/black" />

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:scaleType="center">

        <TextView
            android:id="@+id/list_note_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="65dp"
            android:layout_marginTop="8dp"
            android:textColor="@color/black"
            android:textSize="28sp" />

        <TextView
            android:id="@+id/list_note_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="46dp"
            android:layout_marginLeft="65dp"
            android:layout_marginTop="0dp"
            android:maxLines="2"
            android:textColor="@color/gunmetal"
            android:textSize="20sp"
            android:lineSpacingExtra="4dp"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/brown"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="4dp"
            android:text="Last Updated:"
            android:textColor="@color/white" />

        <TextView
            android:id="@+id/list_note_date"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="4dp"
            android:gravity="end"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="@color/white" />
    </LinearLayout>
</android.support.v7.widget.CardView>

Answer 1

You can add a CheckBox to your item layout, and/or change the background of the layout itself to display a selected state.

With the first option, you can change the layout to the selected state just by setting the isChecked to true.

checkBox.setChecked(true);

To change the background of the layout, you can simply set the background to a new color resource.

itemLayout.setBackgroundResource(R.color.color_selected);

Or you can use a ColorStateList to do some more advanced state changes (such as a ripple effect to a solid color).

ripple_selector.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/color_highlight">
    <item android:drawable="@drawable/color_highlight"/>
</ripple>

item_selector_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"
            android:drawable="@color/color_selected"/>
    <item android:drawable="@drawable/ripple_effect"/>
</selector>

To use this, you can set the background attribute in your layout xml to item_selector_background then changed the selected state in your code.

itemLayout.setSelected(true);

Answer 2

MaterialCardView can be a good solution. result

<com.google.android.material.card.MaterialCardView
            android:id="@+id/cardView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:strokeWidth="4dp"
            app:rippleColor="@color/colorPrimary"
            app:strokeColor="@color/colorAccent"
            app:cardCornerRadius="@dimen/margin_app"
            app:cardBackgroundColor="@android:color/white">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:paddingVertical="@dimen/margin_large"
                android:paddingHorizontal="@dimen/margin_xlarge"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                ...

            </androidx.constraintlayout.widget.ConstraintLayout> 

  </com.google.android.material.card.MaterialCardView>