Change android chip icon position

Question

I have added a few chips in my app. The default chip have tick icon when you select it like this.

I want to change the icon position to the bottom. Like this.

There is no property to change the icon position. How can I achieve this result.

Is it mandatory to use material chips to achieve these kind of UI results? I think you can do it in any other ways. — A S M Sayem, Oct 22 '19 at 17:29
Yes I achieved this result with the help of layer-list but wanted to do it with the help of chips — kartoos khan, Oct 22 '19 at 17:42
You can't do it with a Chip.You can use an iconStart or an iconEnd. — Gabriele Mariotti, Oct 22 '19 at 17:57
Okay then use custom layout for your chip view, and inflate it when you are adding your chip. Use layer-list background to which one is selected or not. Will these procedure serve your purposes?@kartooskhan — A S M Sayem, Oct 22 '19 at 18:04

score 0 · Answer 1 · edited Feb 15 '22 at 10:39

0

use this property to change chip icon position:

android:layoutDirection="rtl"

edited Feb 15 '22 at 10:39

Elikill58

4,050
24
23
45

answered Feb 15 '22 at 10:08

junaidirshad098

39
4

score 0 · Answer 2 · answered Dec 13 '22 at 12:40

Start icon

app:chipIconVisible — visibility of the chip icon. app:chipIcon — drawable icon to show at the start of the chip. app:chipIconSize — size of the chip icon.

chip.setOnClickListener {
   // Handle chip click
}

close icon

app:closeIconVisible — visibility of the close icon. app:closeIcon — drawable icon show at end of the chip. app:closeIconSize — size of the close icon.

chip.setOnCloseIconClickListener {
    // Handle chip close icon click
}

score 0 · Answer 3 · answered Feb 20 '23 at 08:12

You can utilize the closeIcon properties since it already on the right side of the chip. something like this:

 <com.google.android.material.chip.Chip
        android:id="@+id/customerListChipSort"
        style="@style/MyChip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sort"
        android:textStyle="bold"
        app:closeIcon="@drawable/ic_dropdown"
        app:closeIconEnabled="true"
        app:closeIconSize="@dimen/dimens_12dp"
        app:closeIconTint="@color/observatory_green" />

and the results is this:

score -1 · Answer 4 · answered Feb 21 '22 at 14:13

-1

You could set android:layoutDirection="rtl" or the opposite of your current direction to put the icon on the right.

For more: https://material.io/design/usability/bidirectionality.html

answered Feb 21 '22 at 14:13

Codemaker2015

12,190
6
97
81

Change android chip icon position

4 Answers4