best way to manage filters with a custom style-CodePudding

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

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.

CodePudding user response：

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.