[Widget.Material3.Badge] Badge in TabLayout overlaps text

[JohnGale87]

Description: Material 3 appears to have regressed this issue. A badge containing numbers overlaps the text so much that it obscures the last letter of the label.

Expected behavior: The label should not be obscured

Source code:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/topAppBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:title="@string/app_name" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginHorizontal="@dimen/standard_margin"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

MainActivity.kt - onCreate

TabLayoutMediator(tabs, viewPager) { tab, position ->
    val badge = tab.getOrCreateBadge()
    badge.number = 1
    tab.text = resources.getString(TAB_TITLES[position])
}.attach()

Android API version: Tested on API 29

Material Library version: com.google.android.material:material:1.5.0

Device: AVD - Nexus 4

[drchen]

Confirmed with designers. We are supposed to put badges at the trailing edge of the text. It seems like a bug in our implementation.

[imhappi]

FYI there's a small design update with badges that tweaks alignment. This issue will be exacerbated since the badge now has a smaller horizontal offset from the anchor.

Will speak with the current designer for badges about specs for badges and text, but for now you can use setHorizontalOffset to increase the horizontal offset of the badge

[dturant]

@drchen @imhappi Any updates on this issue?
I want to position badges with gravity END like in material 3 docs, but it seems not to be possible as of 1.12.0.

I also tried to achieve this effect manually with offsets, but I can only make horizontal offset work, vertical offset never centers the badge.

[imhappi]

Hey @dturant, this is on our roadmap