Android Material Design: Tabs with TabLayout

Tabs are placed next to each other as peers, in categories of equal importance. They organize content into categories to help users easily find different types of information.

Tabs can be represented by an icon and text, text only or an icon only. The tabs can be fixed or scrollable. Users can navigate between tabs by tapping a tab or using a swipe gesture over the content.

Example: My travel

In the example to the left, there are three fixed tabs, so the screen width is shared equally among them. All three tabs are peers, so of equal importance. They are organized under the topic "My travel". The selected Trips tab is highlighted and presents trip dates and departure and arrival airports. The Flights tab may contain flight numbers and boarding times. The Explore tab may allow the user to search for and book flights.

Example: Dog breeds

The example to the right has various tabs, each representing a distinct dog breed. This TabLayout has scrollable tabs, so tabs are displayed without fixed widths. The tabs are scrollable, such that some tabs will remain off-screen until scrolled.

Example: Travel

In the app below, the tabs INFO and TAGS are embedded in the column to the right and when tapped, control the content there. Tabs should always be placed above content they control.

Example: Tabs nested in a Card

The fixed tabs DAY, WEEK and MONTH are nested in a card. They control the UI region beneath them.

Summary

In summary, tabs are one of the most commonly used components of mobile UIs. Tabs improve mobile navigation by letting users quickly move between a small number of equally important views. Read more about tabs in the Material Design documentation.

For more information on Tabs check out Swipe Tabs Example with TabLayout & ViewPager2

Can you think of any great uses of TabLayout in Android? Leave a comment below.