Add tab in android

Делаем вкладки с помощью 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, но не получается нигде изменить значение количества вкладок, которое задано по умолчанию.

Источник

Полный список

— используем навигацию в ActionBar

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

Теперь рассмотрим, как добавить элементы для навигации по приложению. Есть два типа элементов для навигации: табы и выпадающий список. Создадим простое приложение и реализуем в нем сначала один, затем второй способ.

Project name: P1081_ActionBarNavigation
Build Target: Android 4.1
Application name: ActionBarItems
Package name: ru.startandroid.develop.p1081actionbarnavigation
Create Activity: MainActivity

Никакие строки не добавляем, основной layout не трогаем.

Смотрим, что нам нужно, чтобы включить табы.

В onCreate мы получаем доступ к ActionBar и устанавливаем для него режим навигации в NAVIGATION_MODE_TABS. Далее идет добавление табов. Тут все несложно – создаем, пишем текст, присваиваем обработчика, добавляем в ActionBar.

Обработчиком для табов мы сделали MainActivity, оно реализует методы интерфейса ActionBar.TabListener:

onTabReselected – выбран уже выбранный таб

В эти методы поместим запись в лог и посмотрим, как оно все там работает.

Все сохраняем и запускаем приложение.

Сейчас выбран первый таб и лог сразу об этом сообщает:

selected tab: tab1

Нажмем на второй таб,

unselected tab: tab1
selected tab: tab2

Первый таб «развыбран», а второй выбран.

Еще раз нажмем на второй таб:

reselected tab: tab2

Второй таб перевыбран. Все логично и понятно.

Я, чтобы не перегружать урок, не стал реализовывать какие-либо операции по навигации в приложении. А, вообще, подразумевается, что в методах обработчика мы кодим операции с фрагментами. Нам даже любезно предоставляют объект FragmentTransaction для этих целей. При этом хелп предупреждает, что в этих методах нам не надо самим вызывать метод commit, а также мы не можем добавлять транзакцию в BackStack.

Выпадающий список

Теперь посмотрим, как работает навигация с выпадающим списком.

В onCreate получаем ActionBar и включаем ему режим навигации NAVIGATION_MODE_LIST. Для выпадающего списка необходимо создать адаптер, реализующий SpinnerAdapter. Пусть это будет ArrayAdapter. При создании используем массив из трех строк. Далее вызываем метод setListNavigationCallbacks, в который передаем адаптер и обработчик.

Обработчиком у нас снова является Activity, реализует метод onNavigationItemSelected интерфейса ActionBar.OnNavigationListener. Этот метод дает нам позицию и id выбранного из списка элемента. Выводим в лог эту инфу и соответствующий элемент массива.

В манифесте я прописал для MainActivity атрибут темы: android:theme=»@android:style/Theme.Holo.Light». Иначе был темный текст на темном фоне.

Все сохраняем и запускаем.

Первый элемент сразу выбран. В логах видим:

selected: position = 0, one

Выберем какой-нить другой элемент из списка

selected: position = 2, three

Снова все логично и понятно.

Для обоих видов навигации мы всегда можем получить текущий выбранный элемент с помощью метода getSelectedNavigationIndex. А для навигации с табами есть также метод getSelectedTab, возвращающий текущий выбранный таб.

Разумеется, что вместе с навигацией мы можем добавлять в ActionBar и обычные элементы, которые были рассмотрены на прошлом уроке.

При этом, если места будет недостаточно, то ActionBar разделит все свои элементы на две полосы.

Начиная с четвертой версии Андроид, можно использовать атрибут uiOptions для Activity или Application в манифесте. Если присвоить ему значение splitActionBarWhenNarrow, то результат при нехватке места получится такой:

Элементы ушли вниз. Правда, при этом почему-то перестает работать withText в showAsAction.

На следующем уроке:

— работаем с ListFragment

Присоединяйтесь к нам в Telegram:

— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.

— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование

— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня

— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме

Источник

Implementation guide

Published on Tuesday, February 4, 2020 • Updated on Tuesday, December 8, 2020

A complete example is available on the GitHub sample application. It contains re-usable classes to customize the UI, connect to the background service, and handle the lifecycle of both the application and the custom tab activity.

If you follow the guidance from this page, you will be able to create a great integration.

The first step for a Custom Tabs integration is adding the AndroidX Browser Library to your project. Open the app/build.gradle file and add the browser library to the dependencies section.

Once the Browser Library is added to your project there are two sets of possible customizations:

• Customizing the UI and interaction with the custom tabs.
• Making the page load faster, and keeping the application alive.

The UI Customizations are done by using the CustomTabsIntent and the CustomTabsIntent.Builder classes; the performance improvements are achieved by using the CustomTabsClient to connect to the Custom Tabs service, warm-up the browser and let it know which urls will be opened.

# Opening a Custom Tab

A CustomTabsIntent.Builder can be used to configure a Custom Tab. Once ready, call CustomTabsIntent.Builder.build to create a CustomTabsIntent and launch the desired Url with CustomTabsIntent.launchUrl .

# Configure the color of the address bar

One of the most important (and simplest to implement) aspects of Custom Tabs is the ability for you to change the color of the address bar to be consistent with your app’s theme.

The snippet below changes the background color for the address bar. colorInt is an int that specifies a Color .

# Configure a custom action button

As the developer of your app, you have full control over the Action Button that is presented to your users inside the browser tab.

In most cases, this will be a primary action such as Share, or another common activity that your users will perform.

The Action Button is represented as a Bundle with an icon of the action button and a PendingIntent that will be called by the browser when your user hits the action button. The icon is currenlty 24dp in height and 24-48 dp in width.

• icon is a Bitmap to be used as the image source for the action button.
• description is a String be used as an accessible description for the button.
• pendingIntent is a PendingIntent to launch when the action button or menu item was tapped. The browser will be calling PendingIntent#send on taps after adding the url as data. The client app can call Intent#getDataString to get the url.
• tint is a boolean that defines if the Action Button should be tinted.

# Configure a custom menu

The browser has a comprehensive menu of actions that users will perform frequently inside a browser, however they may not be relevant to your application context.

Custom Tabs will have a set of default actions provided by the browser. Those actions can include items like «Forward», «Page Info», «Refresh», «Find in Page» or «Open in Browser».

As the developer, you can add and customize up to five menu items that will appear between the icon row and foot items.

A menu item is added by calling CustomTabsIntent.Builder#addMenuItem with title and a PendingIntent that browser will call on your behalf when the user taps the item are passed as parameters.

# Configure custom enter and exit animations

Many Android applications use custom View Entrance and Exit animations when transitioning between Activities on Android. Custom Tabs is no different, you can change the entrance and exit (when the user presses Back) animations to keep them consistent with the rest of your application.

# Warm up the browser to make pages load faster

By default, when CustomTabsIntent#launchUrl is called, it will spin up the browser and launch the URL. This can take up precious time and impact on the perception of smoothness.

We believe that users demand a near instantaneous experience, so we have provided a Service that your app can connect to and tell the browser and its native components to warm up. Custom Tabs also provide the ability for you, the developer to tell the browser the likely set of web pages the user will visit. Browsers will then be able to perform:

• DNS pre-resolution of the main domain
• DNS pre-resolution of the most likely sub-resources
• Pre-connection to the destination including HTTPS/TLS negotiation.

The process for warming up the browser is as follows:

• Use CustomTabsClient#bindCustomTabsService to connect to the service.
• Once the service is connected, call CustomTabsClient#warmup to start the browser behind the scenes.
• Call CustomTabsClient#newSession to create a new session. This session is used for all requests to the API.
• Optionally, attach a CustomTabsCallback as a parameter when creating a new session, so that you know a page was loaded.
• Tell the browser which pages the user is likely to load with CustomTabsSession#mayLaunchUrl
• Call the CustomTabsIntent.Builder constructor passing the created CustomTabsSession as a parameter.

# Connect to the Custom Tabs Service

The CustomTabsClient#bindCustomTabsService method takes away the complexity of connecting to the Custom Tabs service.

Create a class that extends CustomTabsServiceConnection and use onCustomTabsServiceConnected to get an instance of the CustomTabsClient . This instance will be needed on the next steps.

# Warm up the Browser Process

Warms up the browser process and loads the native libraries. Warmup is asynchronous, the return value indicates whether the request has been accepted. Multiple successful calls will also return true.

Returns true if successful.

# Create a new tab session

Session is used in subsequent calls to link mayLaunchUrl call, the CustomTabsIntent and the tab generated to each other. The callback provided here is associated with the created session. Any updates for the created session (see Custom Tabs Callback below) is also received through this callback. Returns whether a session was created successfully. Multiple calls with the same CustomTabsCallback or a null value will return false.

# Tell the browser what URLs the user is likely to open

This CustomTabsSession method tells the browser of a likely future navigation to a URL. The method warmup() should be called first as a best practice. The most likely URL has to be specified first. Optionally, a list of other likely URLs can be provided. They are treated as less likely than the first one, and have to be sorted in decreasing priority order. These additional URLs may be ignored. All previous calls to this method will be deprioritized. Returns whether the operation completed successfully.

# Custom Tabs Connection Callback

Will be called when a navigation event happens in the custom tab. The navigationEvent int is one of 6 values that defines the state of the page is in. See below for more information.

# What happens if the user doesn’t have a browser that supports Custom Tabs installed?

Custom Tabs is supported by most Android browsers. Nevertheless, since it uses an ACTION_VIEW Intent with key Extras to customize the UI it will open in the system browser, or the user’s default browser if Custom Tabs is not supported.

If the user has a browser that supports Custom Tab installed and it is the default browser, it will automatically pick up the EXTRAS and present a customized UI.

# How can I check whether the Android device has a browser that supports Custom Tab?

It is possible to use the PackageManager to query the Android device for applications that can handle Custom Tabs. We query for applications that are able to handle http Intents, then check if those applications also declare support for the Custom Tabs Service:

Android 11 has introduced package visiblity changes. If your Android app is targeting API level 30 or above, adding a queries section to AndroidManifest.xml is needed, otherwise the code snippet above won’t return results:

Last updated: Tuesday, December 8, 2020 Improve article

Источник