Android Studio - Tabbed Activity: personalizzazione

In questo articolo vedremo come personalizzare la barra in cui vengono mostrati i titoli delle schede.
Per impostazione predefinita la larghezza delle schede viene suddiviso nello spazio disponibile in base al numero di schede visualizzate, però a volte se il titolo della scheda è molto lungo questo viene tagliato o visualizzato su 2 righe il che a volte non è comodo, quindi per risolvere questo problema esistono due attributi da applicare alla vista tabs:

• tabMinWidth
• tabMode

tabMinWidth
Questo attributo imposta una larghezza minima che deve avere il titolo della scheda

app:tabMinWidth="150dp"

view raw tabMinWidth.xml hosted with ❤ by GitHub

tabMode
Questo attributo se non specificato imposta la modalità dei Tab su fisso, mentre in questo caso vogliamo che sia scorrevole

app:tabMode="scrollable"

view raw tabMode.xml hosted with ❤ by GitHub

Ecco come si presenta il file 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"
	android:theme="@style/AppTheme.AppBarOverlay">
	<TextView
	android:id="@+id/title"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:gravity="center"
	android:minHeight="?actionBarSize"
	android:padding="@dimen/appbar_padding"
	android:text="@string/app_name"
	android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" />
	<com.google.android.material.tabs.TabLayout
	android:id="@+id/tabs"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="?attr/colorPrimary"
	app:tabMinWidth="150dp"
	app:tabMode="scrollable"/>
	</com.google.android.material.appbar.AppBarLayout>
	<androidx.viewpager.widget.ViewPager
	android:id="@+id/view_pager"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	app:layout_behavior="@string/appbar_scrolling_view_behavior" />
	</androidx.coordinatorlayout.widget.CoordinatorLayout>

view raw activity_main_tab2.xml hosted with ❤ by GitHub

I due attributi sono rispettivamente alla riga 29 e riga 30 all'interno della View tabs

Ecco un video dimostrativo

Download Project
Download file APK

---

Vedi anche Tabbed Activity: creazione delle schede
Vedi anche Tabbed Activity: costruire l'app all'interno delle schede
Vedi anche Tabbed Activity: aggiungere OptionMenu in ActionBar