Android how to center text of chip with fixed size?

Question

I have a chip with 100dp of width but the text is not centered how I can center the text.

I use androidx with material library, I've tried put android:textAlignment="center" and android:gravity="center" but not work

<com.google.android.material.chip.Chip
    android:id="@+id/chip"
    style="@style/Widget.MaterialComponents.Chip.Choice"
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:text="7:00" />

I have this

I want this

Answer 1

just now I faced with the same problem, and I solved it by set a chip property: android: textAlignment = "center". I tested your example and it works fine too, here the code that I tested:

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <com.google.android.material.chip.Chip
            android:id="@+id/chip"
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:text="7:00"
            android:textAlignment="center"/>
</FrameLayout>

Also make sure that you don't set or change a chip's text alignment somewhere in your code.

Answer 2

The short answer:

Chips aren't meant to be used the way you are trying to use them. They are supposed to wrap your content. Therefore there isn't a clean way to align the text in the center. There is a workaround tho, you can use Chip_textEndPadding and Chip_textStartPadding attributes, which will be kinda awkward I guess.

I don't really know what you are trying to achieve, I mean, what is your why? Is it a button? Is it suppose just to show some text? Please describe the feature, or at least, part of it.

Anyway:

According to the material design guidelines

Chips allow users to enter information, make selections, filter content, or trigger actions. Chips should appear dynamically as a group of multiple interactive elements. Unlike buttons, which should be a consistent and familiar call to action, one that a user expects to appear as the same action in the same general area.

Does your feature as anything to do with this?

In case you want a clickable, circular component you can simply use material button.

There is a similar question that was asked at github.