How to create chips containing icons only?

user_14536109 0
Viewed 568

I want to create a row of chips similar to the image below but I keep getting an extra space at the right of the icon as if the chip is leaving extra room for text.enter image description here

This is the only code so far:

<com.google.android.material.chip.ChipGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <com.google.android.material.chip.Chip
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipIcon="@drawable/ic_baseline_signal_wifi_4_bar_24"
                app:chipIconSize="40dp"/>
</com.google.android.material.chip.ChipGroup>
android-studio android
2 Answers

Try using circular material buttons example below

<com.google.android.material.button.MaterialButton
            android:id="@+id/btn_wifi"
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:icon="@drawable/ic_dollar_outlined"
            app:iconSize="24dp"
            app:iconGravity="textStart"
            android:padding="0dp"
            app:iconPadding="0dp"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle"
            />
user_136785140

Remove the text padding and make the chip padding symmetrical

<com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIcon="@drawable/ic_baseline_add_24"
            app:chipStartPadding="4dp"
            app:chipEndPadding="4dp"
            app:textStartPadding="0dp"
            app:textEndPadding="0dp"/>
user_102447590
Related