Android studio tablayout custom

Custom TabLayout Indicator in — Android.

Make your Indicator with your choice.

Mar 2, 2020 · 4 min read

This article belongs to what I have learned today, so basically I need to Implement a custom TabLayout Indicator, with rounded corners and with some extra spacing like the below example.

Basic TabLayout Indicator Color:

If we need to set the Indicator color, without any custom Indicator, so in that case, we only need to set the app:tabIndicatorColor as you can from the below XML file:

From the above XML, you will see the normal TabLayout Indicator color, without any custom view.

Result:

More Attributes:

You can also play with other attributes of TabLayout some of them are listed below.

Custom TabLayout Indicator Implementation:

Now, le t ’s start with the custom TabLayout Indicator Implementation, Let’s break into steps:

Step1

Make a drawable of layer-list, with the name tab_indicator , Like below code snippet.

In the above code, I added a rectangle shape tag, with a corner radius of 5dp ànd with a solid color.

Step2

We need to add a drawable to our TabLayout, Like below code snippet.

Now what we achieved is half of our requirements, currently showing a custom TabLayout Indicator, but now we need some spacing from the bottom and as well as from left, right Indicator.

Step3

For bottom padding, we need to add android:paddingBottom to TabLayout, Like the below code snippet, and we will see the result.

Step4

For Left/Right Indicator Margins, we need to add margin in our drawable file tag, which we created earlier.

In the above code, what I did is to add an end and `margin to the tag, and we will see the result.

Finally, we achieved our goal, everything is perfectly fine, what I noticed is it’s working fine on all versions of Android except Android 9.0 which is Pie. Let me show you how it look on Android 9.0

The issue was it’s not picked up the color which I defined in my drawable, now let’s directly move towards the solution.

Solution:

The Solution for the above issue is to define the app:tabIndicatorColor the color which I defined on my drawable, the same color I defined in the app:tabIndicatorColor

That’s it after defining the app:tabIndicatorColor it’s working fine in all the android versions.

Conclusion

This article described to you how you can create a custom TabLayout Indicator, also described to you how you can be fixed the Android 9.0 color issue.

I hope this article is helpful. If you think something is missing, have questions, or would like to give feedback, go ahead and leave a comment below. I’d appreciate the feedback.

I’ve written some other Android-related content, and if you liked what you read here, you’ll probably also enjoy this:

Источник

Делаем вкладки с помощью TabLayout

Сейчас вкладки лучше всего реализовывать за счёт использования ViewPager с пользовательским «индикатором вкладок» сверху. В этой статье мы будем использовать TabLayout от Google, включенный в библиотеку Android Support Design в Android 6.0 Marshmallow (API 23).

До Android Marshmallow самым простым способом создания вкладок с помощью фрагментов было использование вкладок ActionBar. Однако, все методы, связанные с режимами навигации в классе ActionBar (такие как setNavigationMode(), addTab(), selectTab() и т.д.) на данный момент являются устаревшими.

Библиотека Android Support Design

Перед началом работы с вкладками, нужно добавить необходимую библиотеку. Чтобы добавить библиотеку в свой проект, нужно в файле build.gradle модуля приложения добавить следующую зависимость в блок dependencies.

Создание TabLayout

Просто добавьте android.support.design.widget.TabLayout, который будет использоваться для отображения различных параметров вкладок, в код разметки. Компонент android.support.v4.view.ViewPager будет использоваться для создания страницы, отображающей фрагменты, которые мы создадим далее.

Создание фрагментов

Теперь, когда у нас есть ViewPager и вкладки в разметке, мы можем перейти к определению содержимого каждой из вкладок. Поскольку каждая вкладка представляет собой только фрагмент, нам необходимо создать и определить Fragment, который нужно показать. В зависимости от ваших требований, в вашем приложении может быть один или несколько фрагментов.

В папке res/layout создадим файл fragment_page.xml и определим в нём код разметки, который будет отображаться на экране при выборе определённой вкладки.

Теперь создадим класс PageFragment и определим в нём логику подключения для фрагмента.

Подключение FragmentPagerAdapter

Следующее, что нужно сделать, это реализовать адаптер для вашего ViewPager, который контролирует порядок вкладок, заголовков и связанного с ними контента. Наиболее важными методами для реализации здесь являются getPageTitle(int position), который используется для получения заголовка нужно вкладки, и getItem(int position), который определяет фрагмент для каждой вкладки.

Настройка вкладки

Наконец, нам нужно прикрепить наш ViewPager к SampleFragmentPagerAdapter, а затем настроить вкладки с помощью двух шагов:

• В методе onCreate() активности определим ViewPager и подключим адаптер.
• Установим ViewPager в TabLayout, чтобы подключить пейджер с вкладками.

Посмотрим, что получилось:

Настройка TabLayout

Существует множество атрибутов, которые вы можете использовать для настройки поведения TabLayout, например:

Название	Параметры	Описание
tabBackground	@drawable/image	Фон, применяемый к вкладкам
tabGravity	center, fill	Гравитация вкладок
tabIndicatorColor	@color/blue	Цвет линии индикатора
tabIndicatorHeight	@dimen/tabh	Высота линии индикатора
tabMaxWidth	@dimen/tabmaxw	Максимальная ширина вкладки
tabMode	fixed, scrollable	Выбор режима — фиксированные вкладки или прокручиваемый список
tabTextColor	@color/blue	Цвет текста на вкладке

Здесь вы можете посмотреть все атрибуты для TabLayout.

Создание стиля для TabLayout

Как правило, цвет индикатора вкладки устанавливается как accent, определённый в вашей теме Material Design. Вы можете переопределить этот цвет, создав свой собственный стиль в файле res/values/styles.xml и затем применить этот стиль к TabLayout.

Вы можете переопределить этот стиль для TabLayout в коде разметки:

Ниже вы можете увидеть пример ещё одного стиля, который можно задать для TabLayout:

Добавление иконок в TabLayout

В настоящее время класс TabLayout не предоставляет модель, которая позволяет добавлять иконки для вкладок. Однако вы можете вручную добавить иконки после настройки TabLayout.

Внутри класса FragmentPagerAdapter вы можете удалить строку getPageTitle() или просто вернуть null.

После настройки TabLayout в классе активности, вы можете использовать функцию getTabAt() для установки иконки:

Добавление иконок и текста в TabLayout

Другой подход — использовать SpannableString для добавление иконок и текста в TabLayout. Снова перепишем метод getPageTitle().

По умолчанию, вкладка, созданная TabLayout, устанавливает для свойства textAllCaps значение true, что предотвращает визуализацию ImageSpans. Вы можете переопределить это поведение. изменив в styles.xml свойство tabTextAppearance.

Обратите внимание на дополнительные пробелы, которые добавляются перед заголовком вкладки при создании класса SpannableString. Пустое пространство используется для размещения иконки, чтобы название отображалось полностью. В зависимости от того, где вы хотите разместить иконку, вы можете указать начало диапазона и его конец в методе setSpan().

Добавление пользовательской разметки в TabLayout

В некоторых случаях вместо разметки вкладки по умолчанию мы можем использовать собственную разметку для каждой вкладки. Чтобы добиться этого, переберём все вкладки после прикрепления их к ViewPager в коде активности.

Теперь добавим метод getTabView() в класс SampleFragmentPagerAdapter.

Таким образом, можно настроить любую вкладку в адаптере.

Получение или выбор текущей страницы

С последними обновлениями библиотеки Android Suppoty Design вы также можете получить выбранную позицию вкладки, вызвав метод getSelectedTabPosition(). Если вам нужно сохранить или восстановить выбранную позицию вкладки во время поворота экрана или других изменений конфигурации, этот метод полезен для восстановления исходной позиции.

Во-первых, переместите экземпляры tabLayout и viewPager в глобальные переменные класса активности.

Во-вторых, мы можем сохранить и восстановить позицию вкладки, используя методы onSaveInstanceState() и onRestoreInstanceState().

Использование вкладок без фрагментов

В случае, если вы не хотите использовать в своём приложении фрагменты, вы можете воспользоваться классом android.support.v4.view.PagerAdapter, как, например, в нашем приложении «Карточки для детей«.

Здесь вместо фрагментов в ViewPager передаётся адаптер, наследующий от PagerAdapter. Его код можно увидеть ниже.

Установка адаптера аналогична способам выше, просто вызываем метод setAdapter() и передаёт в него экземпляр класса TabAdapter.

Ещё вариант реализации вкладок

Также вы можете создать свои собственные вкладки с помощью шагов ниже. Такой подход используется в нашем приложении «Менеджер паролей для Wi-Fi сетей«.

Для этого в разметке нужно использовать компоненты TabHost и TabWidget. Внутри с помощью FrameLayout мы задаём, какой контент будет отображаться на экране.

Затем в коде активности добавим следующий код для определения этих компонент и настройки вкладок.

В этом случае переключать вкладки можно легко с помощью метода у TabHost setCurrentTab(int position).

Делаем вкладки с помощью TabLayout : 3 комментария

Я создал ретрофит запрос, получил данные и хочу установить количество вкладок соответственно количеству полученных строк. Куда в адаптере мне вставить этот код? Я создал AsyncTask, но не получается нигде изменить значение количества вкладок, которое задано по умолчанию.

Источник

Google Play Style Tabs using TabLayout

Tabs are now best implemented by leveraging the ViewPager with a custom «tab indicator» on top. In this guide, we will be using Google’s new TabLayout included in the support design library release for Android «M».

Prior to Android «M», the easiest way to setup tabs with Fragments was to use ActionBar Tabs as described in ActionBar Tabs with Fragments guide. However, all methods related to navigation modes in the ActionBar class (such as setNavigationMode() , addTab() , selectTab() , etc.) are now deprecated.

To implement Google Play style sliding tabs, make sure to add the Material Design Components Library. In your root build.gradle , make sure the google() entry is listed:

Add this dependency to your app/build.gradle list:

Simply add com.google.android.material.tabs.TabLayout , which will be used for rendering the different tab options. The androidx.viewpager.widget.ViewPager component will be used to page between the various fragments we will create.

Now that we have the ViewPager and our tabs in our layout, we should start defining the content of each of the tabs. Since each tab is just a fragment being displayed, we need to create and define the Fragment to be shown. You may have one or more fragments in your application depending on your requirements.

In res/layout/fragment_page.xml define the XML layout for the fragment which will be displayed on screen when a particular tab is selected:

In PageFragment.java define the inflation logic for the fragment of tab content:

The next thing to do is to implement the adapter for your ViewPager which controls the order of the tabs, the titles and their associated content. The most important methods to implement here are getPageTitle(int position) which is used to get the title for each tab and getItem(int position) which determines the fragment for each tab.

Finally, we need to attach our ViewPager to the SampleFragmentPagerAdapter and then configure the sliding tabs with a two step process:

• In the onCreate() method of your activity, find the ViewPager and connect the adapter.
• Set the ViewPager on the TabLayout to connect the pager with the tabs.

Heres the output:

There are many attributes you can use to customize the behavior of your TabLayout as shown below:

The most important properties available are listed below:

Name	Options	Description
tabBackground	@drawable/image	Background applied to the tabs
tabGravity	center , fill	Gravity of the tabs
tabIndicatorColor	@color/blue	Color of the tab indicator line
tabIndicatorHeight	@dimen/tabh	Height of the tab indicator line
tabMaxWidth	@dimen/tabmaxw	Maximum width of the tab
tabMode	fixed , scrollable	Small number of fixed tabs or scrolling list
tabTextColor	@color/blue	Color of the text on the tab

Normally, the tab indicator color chosen is the accent color defined for your Material Design theme. We can override this color by defining a custom style in styles.xml and then applying the style to your TabLayout :

You can then override this style for your TabLayout:

There are several other styles that can be configured for the TabLayout :

Currently, the TabLayout class does not provide a clean abstraction model that allows for icons in your tab. However, you can manually add the icons after you have setup your TabLayout.

Inside your FragmentPagerAdapter, you can delete the getPageTitle() line or simply return null:

After you setup your TabLayout, you can use the getTabAt() function to set the icon:

Sliding tabs with images:

We can also apply color tinting to the tabs by following this guide.

Another approach is to use SpannableString to add icons and text to TabLayout :

By default, the tab created by TabLayout sets the textAllCaps property to be true, which prevents ImageSpans from being rendered. You can override this behavior by changing the tabTextAppearance property.

Note the additional spaces that are added before the tab title while instantiating SpannableString class. The blank spaces are used to place the image icon so that the actual title is displayed completely. Depending on where you want to position your icon, you can specify the range start…end of the span in setSpan() method.

In certain cases, instead of the default tab view we may want to apply a custom XML layout for each tab. To achieve this, iterate over all the TabLayout.Tab s after attaching the sliding tabs to the pager:

Next, we add the getTabView(position) method to the SampleFragmentPagerAdapter class:

With this you can setup any custom tab content for each page in the adapter.

With the recent updates to the design support library, you can also get the selected tab position by calling getSelectedTabPosition() . If you need to save or restore the selected tab position during screen rotation or other configuration changes, this method is helpful for restoring the original tab position.

First, move your tabLayout and viewPager as member variables of your main activity:

Next, we can save and restore the last known tab position by implementing methods on onSaveInstanceState() and onRestoreInstanceState() to persist this data. When the view is recreated, we can use this data and set the current tab to the last selected tab value.

Источник