Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the shape of Chips component in android?

When I added ChipGroup and Chips to XML, first it gave me rendering issue which caused activity crash. I solved it by changing the support library version in the gradle.app from implementation 'com.google.android.material:material:1.2.0-alpha05' to alpha02 & changed AppTheme to "Theme.MaterialComponents.Light.DarkActionBar".

**Now the issue is that in the design section of androidStudio shape of the chip is default i.e. rounded but on emulator & actual device it is diamond shaped. I tried the app:chipCornerRadius="5dp" property but it did not gave the desired result.

How to change the shape of the chip to rounded/default?**

<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.our_team.OurTeamActivity">

    <HorizontalScrollView
        android:id="@+id/horizontalScrollView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:scrollbars="none"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.chip.ChipGroup
            android:id="@+id/chipGroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="36dp"
            app:singleLine="true"
            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/chip4"
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipCornerRadius="5dp"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="One Choice"
                android:textAppearance="@style/TextAppearance.AppCompat.Caption" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip5"
                style="@style/Widget.MaterialComponents.Chip.Action"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Two Action"
                android:textAppearance="@style/TextAppearance.AppCompat.Caption" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip6"
                style="@style/Widget.MaterialComponents.Chip.Entry"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Three Entry"
                android:textAppearance="@style/TextAppearance.AppCompat.Caption" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip7"
                style="@style/Widget.MaterialComponents.Chip.Filter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="Four Filter"
                android:textAppearance="@style/TextAppearance.AppCompat.Caption" />
        </com.google.android.material.chip.ChipGroup>

    </HorizontalScrollView>

like image 521
Ashish Bharam Avatar asked Apr 15 '20 16:04

Ashish Bharam


People also ask

What is Chip button in Android Studio?

Chips are compact elements that represent an attribute, text, entity, or action. They allow users to enter information, select a choice, filter content, or trigger an action. The Chip widget is a thin view wrapper around the ChipDrawable , which contains all of the layout and draw logic.

How do you use the chip group on android?

A ChipGroup is used to hold multiple Chip s. By default, the chips are reflowed across multiple lines. Set the app:singleLine attribute to constrain the chips to a single horizontal line. If you do so, you'll usually want to wrap this ChipGroup in a HorizontalScrollView .

How do you use material chips?

Tap a chip to select it. Multiple chips can be selected or unselected. An icon can be added to indicate when a filter chip is selected. Filter chip suggestions can dynamically change as users start to select filters.


Video Answer


2 Answers

Just add this line in both themes.xml.

<item name="chipCornerRadius">4dp</item>
like image 66
Geek Tanmoy Avatar answered Oct 18 '22 10:10

Geek Tanmoy


In the Chip the default value of the corner is defined in the style by the shapeAppearanceOverlay attribute:

<item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MaterialComponents.Chip</item>

with:

  <style name="ShapeAppearanceOverlay.MaterialComponents.Chip" parent="">
    <item name="cornerSize">50%</item>
  </style>

Just remove in your layout app:chipCornerRadius="5dp".

enter image description here

like image 42
Gabriele Mariotti Avatar answered Oct 18 '22 12:10

Gabriele Mariotti