best way to manage filters with a custom style

Issue

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?

Solution

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.

Answered By - Gold.strike