Filter with chips android

Question

I would like to ask you if exist in component which is an radiobutton, but it is format from chips like this image. it is an component presents in Google Play Games when you want search an game

thank for ours response

Answer 1

It is not exactly what you are looking for but you can use:

• a container with rounded corners, like a CardView or a LinearLayout
• single Button with rounded corners for each items
• add animations on the onClick event

Something like:

   <LinearLayout
        android:id="@+id/ll_container"
        ..>

             <com.google.android.material.button.MaterialButton
                 style="@style/materialButtonOutlinedStyle"
                  .../>

              <View
                 android:layout_width="1dp"
                 android:layout_height="..."
                 ../>

              <com.google.android.material.button.MaterialButton
                  style="@style/materialButtonOutlinedStyle"
                  ..>

              <!-- ..... -->

        </LinearLayout>

with:

  <style name="materialButtonOutlinedStyle" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="strokeWidth">0dp</item>
    <item name="shapeAppearanceOverlay">@style/rounded_button</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
  </style>

  <style name="rounded_button">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

For the container you can wrap the buttons with a CardView with rounded corners or you can simply apply to a LinearLayout something like:

float radius = getResources().getDimension(R.dimen.default_corner_radius);
LinearLayout linearLayout= findViewById(R.id.ll_container);
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
    .toBuilder()
    .setAllCorners(CornerFamily.ROUNDED,radius)
    .build();

MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color.white));
shapeDrawable.setStrokeWidth(1.0f);
shapeDrawable.setStrokeColor(ContextCompat.getColorStateList(this,R.color...));


ViewCompat.setBackground(linearLayout,shapeDrawable);