Android Chip Custom Height Or Padding - Chipgroup spacing

Question

Is there a way to change default material Chip vertical padding or height? From the docs I see there surely is a way to set the minimal height, but I would like to make chips "thinner", like in this design:

Chopstick

Answer 1

There's a very straightforward way to achieve what I want: all I needed to do was to set the android:layout_height attribute on the ChipGroup enclosing my chips.

I guess it makes sense that it's not possible to achieve that on a single chip... :>

Chopstick

If you just restrict the height with the "android:layout_height", it can cut the chip. The better way is to change the parameter "chipMinTouchTargetSize" to 0 as @Pramod Garg suggested – Pacien

Answer 2

In the 1.1.0-alpha* versions extra spacing is added for the chip. After a lot of hit and trial I managed to remove that spacing using:

app:chipMinTouchTargetSize="0dp"

Looking at the class file for Chip, it seems that it's related to Android's minimum touch target size, so consider that before changing this.

Beavers

Thanks! This was so annoying and puzzling. – Canossa

Additionally one can achieve this behavior by calling setEnsureMinTouchTargetSize(false) on the Chip programmatically. – Seaman

It's incredible how Android creators can hide margin setting under such name. Thanks! – Bathsheba

Many thanks! After searching much, finally, you solution worked. – Tsosie

UPDATE: just app:chipMinHeight="{size}" is required to change the size of the chip. – Watering

how to set chipMinTouchTargetSize programatically as my chip are dynamically created in the Kotlin Code – Bowser

Thanks a lot. app:chipMinTouchTargetSize is not mentioned upfront anywhere. – Balkh

It can be achieved also with app:ensureMinTouchTargetSize="false" which is imho better approach. – Disharmonious

This is the answer. Thanks a lot friend – Pronounced

Answer 3

Belows are the Chip Attributes for padding. Hopefully, It may help you

Paddings

app:chipStartPadding
app:iconStartPadding
app:iconEndPadding
app:textStartPadding
app:textEndPadding
app:closeIconStartPadding
app:closeIconEndPadding
app:chipEndPadding

Fore more info: Click here

Suave

Sorry, I probably wasn't too clear, I am looking for something in the lines of textBottomPadding and textTopPadding OR chipHeight :) or some dirty hack to achieve it. – Chopstick

It would be better to customize your own chip by the help of drawable. – Suave

yep, that's what I'll probably end up doing, just wanted to make sure I am not missing something first. – Chopstick

I found this third party library: code.hootsuite.com/… – Suave

If you want to make custom then have a look over this link: devexchanges.info/2017/01/… – Suave

Answer 4

In order to make a Chip thinner, you need to adjust two properties: chip height and text size.

<style name="ThinnerChip" parent="Widget.MaterialComponents.Chip.Action">
    <item name="chipCornerRadius">12dp</item>
    <item name="chipMinHeight">24dp</item>
    <item name="android:textAppearance">@style/SmallerText</item>
</style>

<style name="SmallerText" parent="TextAppearance.AppCompat.Small">
    <item name="android:textSize">11sp</item>
</style>

Then apply the style as ussually.

<com.google.android.material.chip.Chip
    style="@style/ThinnerChip"
    ...
    />

Erode

Answer 5

This removed default vertical paddings for me:

app:ensureMinTouchTargetSize="false"

Needham

Answer 6

You can use a custom style:

  <style name="MaterialComponents_Chip_Thin" parent="@style/Widget.MaterialComponents.Chip.Entry">
    <item name="chipMinHeight">24dp</item>
    <item name="chipMinTouchTargetSize">24dp</item>
    <item name="chipIconSize">18dp</item>
    <item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Body2_Thin</item>
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MaterialComponents.Chip_Thin</item>
  </style>
  <style name="ShapeAppearanceOverlay.MaterialComponents.Chip_Thin" parent="">
    <item name="cornerSize">12dp</item>
  </style>
  <style name="TextAppearance.MaterialComponents.Body2_Thin" parent="TextAppearance.MaterialComponents.Body2">
    <item name="android:textSize">12sp</item>
  </style>

And apply it with:

    <com.google.android.material.chip.Chip
        style="@style/MaterialComponents_Chip_Thin"
        .../>

Tramontane

chipMinTouchTargetSize is what I was missing. Thanks – Tiffanytiffi

Answer 7

You have to set the height of your Chip to make it "thinner".
Check below code:

build.gradle (app)

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

ic_vector_android.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/>
</vector>

your_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e3e3e3"
    android:orientation="vertical"
    android:padding="20dp">

    <com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipSpacing="18dp">

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:checkable="false"
            android:text="KRAKOW"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
            android:textColor="#636161"
            app:chipCornerRadius="10dp"
            app:chipIcon="@drawable/ic_vector_android"
            app:chipIconSize="14dp"
            app:chipIconTint="#636161"
            app:chipStartPadding="8dp"
            app:chipStrokeColor="#636161"
            app:chipStrokeWidth="1dp"
            app:closeIconEnabled="false" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:checkable="false"
            android:text="Today"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
            android:textColor="#ffffff"
            app:chipBackgroundColor="#636161"
            app:chipCornerRadius="10dp"
            app:closeIconEnabled="false" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:checkable="false"
            android:text="Tomorrow"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
            android:textColor="#ffffff"
            app:chipBackgroundColor="#636161"
            app:chipCornerRadius="10dp"
            app:chipIcon="@drawable/ic_vector_android"
            app:chipIconSize="14dp"
            app:chipStartPadding="8dp"
            app:closeIconEnabled="false" />
    </com.google.android.material.chip.ChipGroup>
</LinearLayout>

To get the thinner Chip I have to set the following properties:

android:layout_height="20dp" // Thinner Height
app:chipIconSize="14dp"      // Smaller icon size
app:chipStartPadding="8dp"   // Add padding to start of icon
app:chipCornerRadius="10dp"  // Set Corner radius

Preview

Katalin

Hi Viraj, How to set the layout height for a dynamic chip programmatically!!? – Phlegmatic

@Phlegmatic Instead of creating chip programmatically, add an inflated layout to the chip group. That way you have full control of height via xml layout. Check this https://mcmap.net/q/353669/-change-chip-widget-style-programmatically-not-working-android – Mosque

Answer 8

Use setEnsureMinTouchTargetSize(false) to ensure the spacing is minimal.

Chip chip = new Chip(getContext());
    chip.setId(selectedWordGroup.id);
    chip.setText(selectedWordGroup.getName());
    chip.setTag(i);
    chip.setCheckable(true);
    chip.setCheckedIconVisible(false);
    chip.setChecked((mFlashcardSetupActivity.allWordGroups.get(i).getSelected()));
    chip.setClickable(true);
    chip.setFocusable(true);
    chip.setEnsureMinTouchTargetSize(false);
    chip.setChipDrawable(ChipDrawable.createFromAttributes(getContext(), null, 0, R.style.CustomChipChoice));

    chip.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(CompoundButton compoundButton, boolean selected) {
        }
    });
    mChipGroupGroups.addView(chip);




<com.google.android.material.chip.ChipGroup
                    android:id="@+id/chip_group_groups"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="4dp"
                    card_view:chipSpacing="4dp"
                >

Warram

in my case, chip.setEnsureMinTouchTargetSize(false); is solution. Thanks! – Erenow

Answer 9

using java code :

int paddingDp = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 10,
                getResources().getDisplayMetrics()); 

        mChip.setPadding(paddingDp, 0, paddingDp, 0);

output :

Barrio

Answer 10

This is working for me

app:chipSpacingVertical="-14dp"

Infirmary

Answer 11

 //need or other way put parent ChipGroup LinearLayout and set h*W  
  //and  also width and height

 <com.google.android.material.chip.Chipandroid 
    android:paddingLeft="10dp" 
    android:paddingRight="10dp" 
    android:layout_width="10dp" 
    android:layout_height="10dp" 
    app:mcv_textColor="@color/white" /> 

Tracery

this will break on different font size – Eryn

@rishabh deep Singh u need to set size in dimantion different size layout xdpi,mdpi,xxdpi – Tracery

Answer 12

If you add multiline Chip dynamically to ChipGroup until it expand to multiple rows, there is zero margin vertical margin. Set app:chipSpacingVertical on ChipGroup to enable margin spacing.

<com.google.android.material.chip.ChipGroup
    android:id="@+id/mainTagChipGroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:chipSpacingVertical="4dp"
    />

NOTE: You can set app:chipSpacingHorizontal or app:chipSpacing as well. NOTE: Strangely, default margin for static Chip defined in xml vs dynamic Chip added programatically is different. I am using com.google.android.material:material:1.1.0-alpha04. NOTE: Setting layoutParams on Chip doesn’t work.

Summons

Answer 13

app:chipStartPadding="@dimen/_10sdp"

Candlemas

Answer 14

use app:chipMinHeight="" property.

Outpatient

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Representative