Custom styled checkbox (Material Chips) for android studio

Question

I would like to create chips in android like shown below:

Is it possible to do so with android studio? If so, how can I do it with XML?

Tried creating this CheckBox but want to know how to add theme like the above screenshot:

<CheckBox android:id="@+id/checkBox" android:layout_width="wrap_content" 
  android:layout_height="wrap_content" android:layout_marginTop="40dp" 
  android:text="Gold" app:layout_constraintBottom_toBottomOf="parent" 
  app:layout_constraintEnd_toEndOf="parent" 
  app:layout_constraintHorizontal_bias="0.113" 
  app:layout_constraintStart_toStartOf="parent" 
  app:layout_constraintTop_toBottomOf="@+id/textView" 
  app:layout_constraintVertical_bias="0.008" />

What have you tried? Please post some code. – OhhhThatVarun Apr 06 '20 at 14:01 — OhhhThatVarun, Apr 06 '20 at 14:01
I have just made a default checklist. '' – Apr 06 '20 at 14:13 — , Apr 06 '20 at 14:13
I want to know how to design it as per the picture. Thanks – Apr 06 '20 at 14:14 — , Apr 06 '20 at 14:14
Put this code in the question. – OhhhThatVarun Apr 06 '20 at 14:14 — OhhhThatVarun, Apr 06 '20 at 14:14
These are called Chips not CheckBoxes – Zain Apr 06 '20 at 15:08 — Zain, Apr 06 '20 at 15:08

score 2 · Accepted Answer · answered Apr 06 '20 at 14:10

2

The view components you refer to are called chips. By using the material design library, you can use chips like this:

<com.google.android.material.chip.Chip
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world"/>

Source: https://material.io/develop/android/components/chip/

In order to use the material design library, you need to:

Add the dependency to your app module's gradle file

implementation 'com.google.android.material:material:1.0.0'

Use AppCompatActivity
Use one of the material desing themes as your parent theme in the app. E.g. Theme.MaterialComponents.DayNight

Check out the full getting-started guide here.

answered Apr 06 '20 at 14:10

Alexander Hoffmann

5,104
3
17
23

When I use this component, it asks me to change my app layout theme to material components. Once I do that, it messes up my entire application button's color and position – Apr 12 '20 at 07:09
Please tell me what to do – Apr 12 '20 at 07:09
@LubnaA.Shakoor You can first try out if the birdge themes work. They shouldn't mess up to much: https://material.io/develop/android/docs/getting-started/#bridge-themes If not, then you'll have to fix your layouts by hand so that they work with the material theme. – Alexander Hoffmann Apr 14 '20 at 06:51

Custom styled checkbox (Material Chips) for android studio

1 Answers1