CODEWITHSUNDEEP
androiduser-interface
arseniy podvalniy
arseniy podvalniy

Reputation: 13

Android multi select ui

I have tried searching as well as I could but I do not even know the right keywords. I want an effect similar to the below screenshot when selecting multiple things.

The idea is to easily see who is selected and simply click an "x" to remove from the selection. I do not know if such a component already exists or if I need to create it manually and if so I have no idea how. The closest I got is a multi select listview but that is ideally not what I want.

Upvotes: 1

Views: 1074

Answers (2)

Beloo
Beloo

Reputation: 9925

You could try solution with using my ChipsLayoutManager for RecyclerView. With it to solve your issue you just need to create an adapter with removal listener (like you may did for any other type of LayoutManager) and items.

ChipsLayoutManager chipsLayoutManager = ChipsLayoutManager.newBuilder()
    .build();
recyclerView.setLayoutManager(chipsLayoutManager);
//your adapter
adapter = new RecyclerViewAdapter(items, onRemoveListener);

in listener just remove deleted item from items list and update an adapter

private OnRemoveListener onRemoveListener = new OnRemoveListener() {
    @Override
    public void onItemRemoved(int position) {
        items.remove(position);
        adapter.notifyItemRemoved(position);
    }
};

Item will be deleted with animation.

Upvotes: 0

kris larson
kris larson

Reputation: 30985

Google refers to that type of UI affordance as a chip.

https://material.google.com/components/chips.html

The container you will most likely want for your chips is a FlowLayout.

The problem is that Google has no ready-made components to implement these.

Here's how I made my chips:

/res/drawable/chip_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/translucent_gray"/>
    <corners android:radius="16dp"/>
</shape>

/res/layout/chip.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="32dp"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    android:layout_marginLeft="4dp"
    android:layout_marginRight="4dp"
    android:layout_marginTop="2dp"
    android:layout_marginBottom="2dp"
    android:background="@drawable/chip_background">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:maxLines="1"
        android:ellipsize="end"
        android:textSize="13sp"
        android:textColor="@android:color/white"
        tools:text="Sample Text"/>

    <ImageButton
        android:id="@+id/removeButton"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:background="@null"
        android:alpha=".8"
        android:scaleType="fitCenter"
        android:padding="7dp"
        android:src="@drawable/ic_cancel_white_24dp"/>

</LinearLayout>

The padding and scale type on the remove button shrink a 24dp icon down a little bit to fit nicely in the chip oval.

For a FlowLayout, you can search GitHub for "Android FlowLayout" and find a library to use.

Upvotes: 3

Related Questions