arseniy podvalniy arseniy podvalniy - 1 month ago 29
Android Question

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.

http://imgur.com/a/G1GJO

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.

If anyone could point me to the right direction it would be greatly appreciated.

Thanks.

Answer

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.