1

I need to make my TabLayout use all available space, so I use app:tabMode="fixed", app:tabGravity="fill". I want titles of my TabItems be singleline and if the titles cannot be shown in full, a part is replaced by ... (android:ellipsize = "end" behavior). I want something like this enter image description here .

I try to gain it usings styles but failed.

Part of my fragment layout `

<com.google.android.material.tabs.TabLayout
    android:id="@+id/credit_details_tab_layout"
    style="@style/CreditDetailsTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/margin_horizontal"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/credit_details_text_deposit_up_to"
    app:tabMode="fixed"
    app:tabGravity="fill"
    android:maxWidth="0dp"
    app:tabPaddingStart="0dp"
    app:tabPaddingEnd="0dp"
    android:layout_marginHorizontal="@dimen/spacing_M">
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/information"/>
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/history"/>
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/management"/>
</com.google.android.material.tabs.TabLayout>

` from styles

<style name="CreditDetailsTabLayout" parent="Widget.Design.TabLayout">
    <item name="background">@color/black_for_tabs</item>
    <item name="tabRippleColor">@android:color/transparent</item>
    <item name="android:textAlignment">center</item>
    <item name="tabBackground">@color/white</item>
    <item name="tabTextAppearance">@style/CreditDetailsTabLayoutTextAppearance</item>
</style>

<style name="CreditDetailsTabLayoutTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">16sp</item>
    <item name="textAllCaps">false</item>
    <item name="singleLine">true</item>
    <item name="textColor">@color/black_for_tabs</item>
    <item name="android:ellipsize">end</item>
    <item name="maxLines">1</item>

and finally screen

enter image description here

Can I achieve this without using CustomView ?

MihaelKrau
  • 31
  • 1
  • 1
    The reason that setup doesn't work is that those are `View` attributes, not text attributes, so you can't apply them through a `TextAppearance`. Also, since [the default layout](https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/tabs/res/layout/design_layout_tab_text.xml) hard-codes `maxLines`, we can't alter it through themes/styles. I'm not sure if this counts as a custom `View`, but it seems the simplest fix might be to copy that layout into your project with a different filename, change `maxLines`… – Mike M. Jan 13 '23 at 22:53
  • 1
    …and then override the library layout like is shown in [this answer](https://stackoverflow.com/a/47777812). Alternatively, we can modify the field set from that attribute at runtime, but that's a bit more work 'cause it's not public: https://drive.google.com/file/d/1EDYieAKpuuMIm9NBXIPXYPIiQihpQ4NU/view?usp=share_link. – Mike M. Jan 13 '23 at 22:53

0 Answers0