androidandroid-layoutandroid-chips

Material Chip Margin Top does nothing

I have a ChipGroup and two chips inside it. I am trying to add marginTop to the chips but they are stacked on the top of the ChipGroup. The marginStart is working as expected but the marginTop does nothing.

enter image description here

Here is my xml:

<com.google.android.material.chip.ChipGroup
        android:id="@+id/chipGroup"
        android:layout_width="match_parent"
        android:layout_height="33dp"
        android:background="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.chip.Chip
            android:id="@+id/chip_1"
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="92dp"
            android:layout_height="25dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="5dp"
            android:text="Test"
            app:chipCornerRadius="5dp"
            app:chipMinTouchTargetSize="0dp"
            app:closeIcon="@drawable/ic_close"
            app:closeIconSize="10dp" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chip_2"
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="92dp"
            android:layout_height="25dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="5dp"
            android:text="Test"
            app:chipCornerRadius="5dp"
            app:chipMinTouchTargetSize="0dp"
            app:closeIcon="@drawable/ic_close"
            app:closeIconSize="10dp" />
 </com.google.android.material.chip.ChipGroup>
Solution

  • Try this solution.

    enter image description here

    <com.google.android.material.chip.ChipGroup
    android:id="@+id/chipGroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:paddingTop="@dimen/dp_15"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.chip.Chip
        android:id="@+id/chip_1"
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="92dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="@dimen/dp_50"
        android:text="Test"
        app:chipCornerRadius="5dp"
        app:chipMinTouchTargetSize="0dp"
        app:closeIcon="@drawable/ic_close"
        app:closeIconSize="10dp" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip_2"
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="92dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="@dimen/dp_5"
        android:text="Test"
        app:chipCornerRadius="5dp"
        app:chipMinTouchTargetSize="0dp"
        app:closeIcon="@drawable/ic_close"
        app:closeIconSize="10dp" />
</com.google.android.material.chip.ChipGroup>