Android material tab layout

Урок 19. Как создать андроид-приложение с вкладками – TabLayout с ViewPager2 на Kotlin

На прошлом уроке мы познакомились с ViewPager2 и создали андроид-приложение, в котором можно листать экраны свайпом вправо или влево. На этом уроке добавим в верхней части экрана вкладки, которые будут содержать заголовки и индикатор экрана, на котором находится пользователь в данный момент, а также рассмотрим некоторые их свойства и способы оформления.

В этом уроке будем использовать проект из прошлого урока, можно скачать его на странице урока 18 по ссылке вверху.

Добавление TabLayout в макет разметки экрана

Чтобы добавить вкладки на экран, нужно открыть макет разметки и добавить компонент com.google.android.material.tabs.TabLayout в верхней части экрана:

Для корректного размещения нужно изменить компонент ViewPager2 – высоту укажем 0dp. Таким образом, высоту компонента будет регулировать корневой ConstraintLayout по заданным ограничениям. А вместо ограничения app:layout_constraintTop_toTopOf=»parent» поставим app:layout_constraintTop_toBottomOf=»@+id/tab_layout» – чтобы верх компонента ViewPager2 был ограничен не верхней границей родительского компонента, а нижней границей компонента TabLayout.

Рассмотрим подробнее компонент com.google.android.material.tabs.TabLayout. Свойство app:tabMode=»scrollable» обеспечивает размещение в видимой части экрана только нескольких вкладок, остальные будут доступны в процессе прокрутки. Если мы не укажем это свойство, то в видимой части экрана будут одновременно отображаться все вкладки, и при большом их количестве визуальное восприятие будет затруднено.

Свойство app:tabIndicatorColor=»@color/teal_200″ указывает цвет, а app:tabIndicatorHeight=»4dp» – толщину индикатора вкладки.

Далее идут свойства ширины – указываем по родителю – и высоты – указываем по содержимому.

Последние три свойства – ограничения верхней части и боковых сторон компонента по родителю.

Реализация вкладок в MainActivity

Открываем класс MainActivity и пишем реализацию вкладок:

Источник

Android Material Design Tabs (Tab Layout) with Swipe

Jan 16, 2018 · 7 min read

Tab layout are visible below toolbar with View pager, used to create swipeable views on. Tabs are designed to work with fragments. Use them to swipe fragments in view pager. In this article, we are going to show you how to implement material design tabs in your android app.

After creating new project, open build.gradle of app level and add design support library because Tablayout is a part of Android Design Support Library:

Add Tab layout and View pager in you layout activity_main.xml

app_bar.xml for toolbar

Create tab ad a pter which extends to FragmentStatePagerAdapter. Create two list for fragment list and title list. Create method for passing fragment and title that you want to add.

Create Fragments for view pager. We will add fragments in adapter from activity.

Layout for Tab1Fragment fragment_one.xml

Similarly create more fragment that you want to add, Tab2Fragment, Tab3Fragment and so on.. with their layouts.

Define Tab layout and view pager from layout, define adapter, add your fragments with title, set adapter to view pager and tablayout setup with view pager as viewpager swipe with tablayout.

Run this code and you will find below output:

Some options to customize tabs appearance:
app:tabGravity=”fill” for Navigation tab gravity. Other is center for placing navigation tabs from center
app:tabIndicatorColor=”@color/white” for indicator in tabs. Here you can see white indicator.
app:tabIndicatorHeight=”4dp” for indicator height.
app:tabMode=”fixed” for tab mode. Other is scrollable for many more tabs.
app:tabTextColor=”@color/semi_yellow” for unselected tab text color.
app:tabSelectedTextColor=”@color/yellow” for selected tab text color.

If you want to add icons to tab, you have to do is call setIcon() method of tab. Create icon array and assign each one for each tab like this:

If you want to put only icons to tab, modify getPageTitle() method in adapter class as below:

Here you can see there is no more customization after this. For more custom tabs, you have to create custom tabview for navigation tabs manually.

Custom Navigation Tab Layout:
Create custom layout for tab custom_tab.xml

Add below method in your TabAdapter:

Remove below code from your activity:

Add below code in your activity after calling setAdapter() method:

Now if you want to show big text on selected tab or change text color, then you can do this by creating separate method in your adapter like getSelectedTabView() as below:

Modify your DemoActivity.java code as below:

Now same as TextView, add ImageView to tab layout:

Change to your DemoActivity.java code:

Changes to you Tab Adapter class:

Here it is your output for custom navigation tab.

You can change tab text style using typeface, bold, italic, color, text size etc as well as for tab icon.

Источник

Android material tab layout

Tabs organize content across different screens, data sets, and other interactions.

Contents

Before you can use Material tabs, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

A TabLayout can be added to a layout:

TabItem s can then be added as children of the TabLayout and adjusted as needed:

Observe changes to tab selections:

Making tabs accessible

The Android tab components support screen reader descriptions for tabs and badges. While optional, we strongly encourage their use.

Adding a content description to the entire TabLayout can be done in XML with the android:contentDescription attribute or programmatically:

Content descriptions can also be added to individual tabs:

BadgeDrawable also has a number of content description setters for different badge states:

Using tabs with ViewPager

A TabLayout can be set up with a ViewPager in order to:

• Dynamically create TabItem s based on the number of pages, their titles, etc.
• Synchronize the selected tab and tab indicator position with page swipes

First, your PagerAdapter (or subclass) needs to override the getPageTitle function in order to set the tab text label:

After the adapter has been set on the ViewPager , synchronize the TabLayout :

Further customization of the dynamically-created TabItem s (such as setting icons) needs to be done separately:

Using tabs with ViewPager2

Setting up a TabLayout with a ViewPager2 relies on the same concepts as doing so with a ViewPager , but the implementation is different. Everything is handled by the TabLayoutMediator class:

Adding badges to tabs

Tabs support badging with the BadgeDrawable class:

There are two types of tabs: 1. Fixed tabs, 2. Scrollable tabs

Fixed tabs display all tabs on one screen, with each tab at a fixed width. The width of each tab is determined by dividing the number of tabs by the screen width. They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available.

Fixed tabs example

API and source code:

The following example shows a row of fixed tabs.

Scrollable tabs are displayed without fixed widths. They are scrollable, such that some tabs will remain off-screen until scrolled.

Scrollable tabs example

API and source code:

The following example shows a row of scrollable tabs.

Anatomy and key properties

Tabs have a container and each tab item has an optional icon and text label. Tab items can be in an active or inactive state. The tab indicator is shown below the active tab item.

1. Container
2. Active icon (optional if there’s a label)
3. Active text label (optional if there’s an icon)
4. Active tab indicator
5. Inactive icon (optional if there’s a label)
6. Inactive text label (optional if there’s an icon)
7. Tab item

Element	Attribute	Related method(s)	Default value
Color	android:background	setBackground getBackground	?attr/colorOnSurfaceVariant
Elevation	android:elevation	setElevation	0dp
Height	N/A	N/A	48dp (inline text) or 72dp (non-inline text and icon)
Tab mode	tabMode	setTabMode getTabMode	fixed

Tab item icon attributes

Element	Attribute	Related method(s)	Default value
Icon	android:icon	setIcon getIcon	null
Color	tabIconTint	setTabIconTint setTabIconTintResource getTabIconTint	colorOnSurfaceVariant and colorPrimary (activated) (see all states)

Tab item text label attributes

Element	Attribute	Related method(s)	Default value
Text	android:text	setText getText	null
Color	tabTextColor	setTabTextColors getTabTextColors	colorOnSurfaceVariant and colorPrimary (activated) (see all states)
Typography	tabTextAppearance	N/A	?attr/textAppearanceLabelLarge
Inline label	tabInlineLabel	setInlineLabel setInlineLabelResource isInlineLabel	false

Tab item container attributes

Element	Attribute	Related method(s)	Default value
Ripple color	tabRippleColor	setTabRippleColor setTabRippleColorResource getTabRippleColor	colorOnSurfaceVariant at 16% opacity and colorPrimary at 16% opacity (activated) (see all states)
Unbounded ripple	tabUnboundedRipple	setUnboundedRipple setUnboundedRippleResource hasUnboundedRipple	true
Gravity	tabGravity	setTabGravity getTabGravity	fill
Min width	tabMinWidth	N/A	72dp (scrollable) or wrap_content
Max width	tabMaxWidth	N/A	264dp
Padding	tabPaddingStart tabPaddingEnd tabPaddingTop tabPaddingBottom tabPadding	N/A	12dp 12dp 0dp 0dp 0dp

Tab indicator attributes

Element	Attribute	Related method(s)	Default value
Color	tabIndicatorColor	setSelectedTabIndicatorColor	colorPrimary
Drawable	tabIndicator	setSelectedTabIndicator getSelectedTabIndicator	m3_tabs_rounded_line_indicator
Height	tabIndicatorHeight	setSelectedTabIndicatorHeight	2dp
Full width	tabIndicatorFullWidth	setTabIndicatorFullWidth isTabIndicatorFullWidth	false
Animation mode	tabIndicatorAnimationMode	setTabIndicatorAnimationMode getTabIndicatorAnimationMode	elastic
Gravity	tabIndicatorGravity	setSelectedTabIndicatorGravity getTabIndicatorGravity	bottom
Animation duration	tabIndicatorAnimationDuration	N/A	250

Element	Style
Default style	Widget.Material3.TabLayout
Style for elevateable surfaces	Widget.Material3.TabLayout.OnSurface
Primary secondary color style	Widget.Material3.TabLayout.Secondary

Default style theme attribute: ?attr/tabStyle

Additional style theme attributes: ?attr/tabSecondaryStyle

See the full list of styles and attrs.

Tabs support Material Theming which can customize color and typography.

Tabs theming example

API and source code:

The following example shows a row of scrollable tabs with Material Theming.

Implementing tabs theming

Use theme attributes and styles in res/values/styles.xml which applies to all tabs and affects other components:

Use default style theme attributes, styles and theme overlays, which apply to all tabs but do not affect other components:

Use the style in the layout, which affects only these tabs:

Источник