best way to manage filters with a custom style

Question

I work on an Android app and I need to implement filters based on the app design guidelines.

There are 2 kinds of filters:

with an icon
without an icon

The filter can be selected/unselected (or checked/unchecked)

Each case can be visible here:

There filters will be displayed through a GridView by 3 columns on several lines.

I would like to know which native control is more appropriate to achieve this?

I've tried to use Chip, which has a checked parameter, but it seems not possible to change the chipIcon position.

I've also tried tried the Button, which allows to change the icon position with app:iconGravity, but there is no checked parameter.

I've also seen ToggleButtons but it requires to use MaterialButtonToggleGroup, whereas I need to display each filter trough the GridView.

So do I need to create a custom control to achieve this?

Cheticamp · Answer 1 · 2022-01-11T00:40:26.927

You can use a ToggleButton with a top drawable as follows:

<ToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/background_selector"
    android:checked="false"
    android:drawableTop="@drawable/car"
    android:drawablePadding="8dp"
    android:drawableTint="@drawable/icon_text_colors"
    android:padding="8dp"
    android:textColor="@drawable/icon_text_colors"
    android:textOff="Car wash"
    android:textOn="Car wash"
    android:textSize="14sp" />

where background_selector.xml is

<selector>
    <item android:drawable="@android:color/darker_gray" android:state_checked="true"/>
    <item android:drawable="@android:color/holo_blue_light" />
</selector>

and icon_text_colors.xml looks like this:

<selector>
    <item android:color="@android:color/white" android:state_checked="true"/>
    <item android:color="@android:color/black" android:state_checked="false"/>
</selector>

The unchecked state looks like this:

while the checked state looks like this:

For the button without the icon, you simply would not specify a drawable for the top.

These are not the colors you want, but this is the idea.

score 0 · Accepted Answer · answered Jan 12 '22 at 17:49

I've finally achieved this with a MaterialButton and the android:checkable property:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.button.MaterialButton
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/CheackableCell"    
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:icon="@drawable/ic_carwash"
    app:iconGravity="textTop"
    app:iconPadding="12dp"
    tools:text="Car Wash"
    android:textAlignment="gravity"
    android:gravity="top|center"
    android:paddingBottom="4dp"
    android:checkable="true"/>

It's very close to solution given by Cheticamp.

best way to manage filters with a custom style

2 Answers2