Tabs in android app

Советы по Android Tabs

Вкладки являются одним из наиболее часто используемых и полезных компонент мобильных пользовательских интерфейсов. Вкладки обеспечивают быстрый и легкий доступ к различным частям приложения. В Android приложениях вкладки используются в различных формах. В некоторых случаях дизайн вкладок скопирован с других платформ, а в некоторых случаях используется устаревший дизайн старых версий Android. Это понятно, т.к. существует очень много различных реализаций вкладок в связи с тем, что дизайн Android не был определен в самом начале. Сейчас данная ситуация изменилась, и есть ориентир для дизайна пользовательского интерфейса с вкладками.

В этой статье я хотел бы взглянуть на текущее состояние интерфейсов с вкладками и дать несколько советов, как сохранить единообразный стиль платформы.

Вкладки наверх

Год назад была дискуссия — где должны быть вкладки: сверху или снизу. Я думаю, что эта дискуссия закончилась. Вкладки наверх. Есть несколько причин для этого:

1. Природная иерархия вещей идет сверху вниз. Вкладки являются заголовками и выше в иерархии информации, чем контент на экране.
2. Более сложным программам нужно больше, чем один уровень навигации. Выступы на нижней вызовут путаницу для пользователей, когда речь заходит о иерархии навигации.
3. Пользователи сканируют новый экран сверху вниз. Они лучше поймут вашу иерархию на экране, когда вкладки расположены сверху.

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

Стиль вкладок

Стиль вкладок в Android очень отличается от других платформ. Этот дизайн был впервые внедрен в платформу в версии 3.0, но даже на поздних версиях ОС стиль вкладок выглядит устаревшим.

Вот несколько мыслей о стилизации Android вкладок:

1. Android вкладки редко содержат значки. Они чаще всего представлены в виде текста. Есть хорошая причина для этого. Трудно придумать описательные значки для всех возможных вариантов навигации. Часто текст намного лучше.
2. Android вкладки — не квадратные кнопки. Т.к. они в основном содержат текст, можно сэкономить много места на экране, немного сжимая их.
3. Визуальный стиль Android вкладок ровный. Он не должен быть глянцевым или отражающим.

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

Ниже вы можете увидеть приложение Foursquare, в котором вкладки содержат текст.

Самый простой способ испортить вид вашего приложения — это имитировать глянцевые квадратные вкладки IOS. Следующим приложениям необходимо обновление интерфейса (Spiegel Online и PC-Welt).

Выбор цвета для вкладок на Android безграничен. Ни в коем случае все вкладки не должны иметь черный фон и синюю подсветку. Можно использовать бренд вашего приложения при выборе цвета вкладки!

Вкладки для навигации, не для действий!

Вкладки предназначены для использования при навигации между экранами в вашем приложение. Не используйте их, чтобы вызывать действия. Для действий используйте панели действий. Вот еще один пример плохого дизайна в приложении Spiegel Online. Часть из вкладок, на самом деле действия (например, обмен), которые не используются более в приложении. Это сбивает с толку и является неправильным использованием компонента вкладок.

Вкладка всегда должна быть выбрана

К сожалению, в приложении Spiegel Online в значительной степени сделано неправильно все, что только можно сделать неправильно с вкладками. Мало того, что они выглядят не так, находятся в неправильном месте и содержат одновременно навигацию и действия, они так же не активируются корректно.

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

Вкладки и возврат назад

На Android мы всегда должны быть осторожны с работой стэка активити (back stack) и функцией кнопки Назад. Перемещение между вкладками не считается изменением страниц. Большинство приложений, использующих вкладки, не добавляют изменений в стэк.

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

Для осуществления ощущения, что все вкладки на одном экране, вы не должны использовать анимированные переходы активити по умолчанию между вкладками (пользователи ассоциируют данную анимацию с движением глубже в приложении). Вкладки рядом и любые анимации должны отражать это. Лучшая анимация — слайдинг. Это призывает пользователей использовать жесты для перемещения между вкладками.

Swipe!

Интерфейс с вкладками превосходен, если перемещения между вкладками не требует усилий. Хотя нажатия вкладок работают замечательно, слайдинг между ними смотрится еще лучше. Для слайд жеста пользователям не нужно добраться до верхней части интерфейса. Данный способ также более удобен и естественен для нас. Страница ведет себя так, как мы интуитивно ожидаем. Все интерфейсы вкладок должны всегда поддерживать слайд жест!

Масштабируемость

Вкладки очень приятно масштабируются под интерфейс планшета. Если вы используете вкладки в сочетании с панелью действий (action bar), то API позаботится о масштабировании за вас. Если на панели действий есть достаточно места, то вкладки переезжают туда, чтобы сэкономить место на экране. Приложение Google I//O является отличным примером.

Источник

Create a Material Design Tabbed Interface in an Android App

The material design team at Google simply defines the functionality of tabs in Android as follows:

Tabs make it easy to explore and switch between different views.

In this post you’ll learn how to display tabs using the TabLayout and ViewPager API. In this practical tutorial, we’ll cover the following:

• The TabLayout and ViewPager components.
• The different tab modes: scrollable and fixed.
• How to display icons instead of text for the tab titles.
• For a bonus, you’ll also learn how to use the Android Studio templates feature to quickly bootstrap your project with a tabbed interface.

A sample project for this tutorial can be found on our GitHub repo so you can easily follow along.

Prerequisites

To be able to follow this tutorial, you’ll need:

You can also learn all the ins and outs of the Kotlin language in my Kotlin From Scratch series.

Introduction to the TabLayout Component

TabLayout provides a horizontal layout to display tabs.

The TabLayout component is one of the components introduced as part of the material design artifacts. Moreover, it is also included in the design support library. In a TabLayout , when a tab is selected or tapped, a different page (or fragment) is shown to the user.

The TabLayout component can have its displayed tabs function in one of two ways: fixed and scrollable. If the tabs are fixed, all of the tabs will be displayed on the screen at the same time.

The screenshot below is the latest official WhatsApp Android app (as of this writing), which uses a TabLayout with a fixed mode configuration.

In scrollable tabs, if the number of tabs becomes too wide for the screen, the user can swipe left or right to view more tabs.

Here is an example of a TabLayout with scrollable tab mode—showcased in the latest version of the News & Weather Android app by Google.

Furthermore, the information displayed on a tab can be text, an icon, or a combination of both text and an icon. For example, the latest Twitter app for Android uses icons instead of text on each tab.

In the following sections, we’ll dive into coding a simple app that makes use of TabLayout with a ViewPager . Let’s get rolling!

Design is not just what it looks like and feels like. Design is how it works. — Steve Jobs

1. Create an Android Studio Project

Fire up Android Studio 3 and create a new project (you can name it TabLayoutDemo ) with an empty activity called MainActivity .

2. Creating the Fragments (Pages)

We’re going to create a TabLayout with just three tabs. When each of the tabs is selected, it displays a different Android fragment or page. So let’s now create the three Android fragments for each of the tabs. We’ll start with the first fragment class, and you should follow a similar process for the remaining two fragment classes—FragmentTwo.kt and FragmentThree.kt.

Here is my FragmentOne.kt:

Here is also my R.layout.fragment_one :

3. Adding the TabLayout and ViewPager

To begin using TabLayout and ViewPager in your project, make sure you import the design support and also the Android support artifact—so add these to your module’s build.gradle file to import them.

Also, visit your res/layout/activlty_main.xml file to include both the TabLayout widget and the ViewPager view.

Here we created a simple TabLayout with id tab_layout . In our TabLayout XML widget, you can see that we included some attributes—such as app:tabMode to be fixed and also app:tabGravity to be fill . The app:tabGravity property is used to configure how the tab items will be displayed so as to take up the available space. We set this to fill , which will distribute the items evenly across the width of the TabLayout . Note that this will be more visible in wider displays, such as tablets.

I also included a custom style attribute ( @style/CustomTabLayout ) in our TabLayout widget.

We begin customising our TabLayout by setting the values of the attributes to be applied on the TabLayout . Here are the details for some of the attributes applied:

• tabIndicatorColor : sets the tab indicator’s color for the currently selected tab. This can also be set programmatically by calling setSelectedTabIndicatorColor() on a TabLayout instance.
• tabIndicatorHeight : sets the tab indicator’s height for the currently selected tab. This can be also be set programmatically by calling the setSelectedTabIndicatorHeight() on a TabLayout instance.
• tabSelectedTextColor : sets the text colors for the different states (normal, selected) used for the tabs. The equivalent of this attribute in Java is setTabTextColors() .

Immediately after creating our TabLayout widget in XML, the next view was a ViewPager . The official documentation says the following about ViewPager :

Layout manager that allows the user to flip left and right through pages of data.

4. Creating the PagerAdapter

We need to create a subclass in SampleAdapter.kt that extends the FragmentPagerAdapter . This class is responsible for managing the different fragments that will be displayed on the tabs.

Here we override three methods from the parent class: getItem() , getCount() , and getPageTitle() . Here are the explanations for the methods:

• getItem() : returns a Fragment for a particular position within the ViewPager .
• getCount() : indicates how many pages will be in the ViewPager .
• getPageTitle() : this method is called by the ViewPager to obtain a title string to describe the specified tab.

For example, if the selected tab is the first tab with title «Tab 1 Item» , a FragmentOne page will be shown to the user immediately.

5. Initialization of Components

Next, we are going to initialize instances of our TabLayout , ViewPager , and SampleAdapter . Initialization is going to happen inside onCreate() in MainActivity.kt.

We got references to our TabLayout and ViewPager from R.layout.activity_main and initialized them. We also created an instance of our SampleAdapter —passing an instance of FragmentManager as an argument. We need to supply the views for our ViewPager , so we called setAdapter() and passed in our created adapter to it. Finally, we called setupWithViewPager() on an instance of TabLayout to do some work:

• creation of the required tab for every page
• setting up the required listeners

When the user taps on a tab, it changes the pages in the ViewPager and shows the required page (or Fragment ). Also, swiping between pages updates the selected tab. In other words, this method helps us take care of scroll state change and clicks on the tabs.

The onTabSelectedListener() is used to include a listener that will be invoked when tab selection changes. We’ve overridden the following callbacks:

• onTabSelected() : triggered when a tab enters the selected state.
• onTabUnselected() : invoked when a tab exits the selected state.
• onTabReselected() : invoked when a tab that is already selected is chosen again by the user.

Note that we can also set the tab mode programmatically—instead of via the layout XML—using setTabMode() on an instance of TabLayout . We pass the mode (fixed or scrollable) to this method as arguments. For example, we can pass TabLayout.MODE_FIXED for a fixed mode—or TabLayout.MODE_SCROLLABLE for a scrollable mode.

Note that if you want to explicitly create the tabs instead of using the helper method setUpWithViewPager() , you can instead use newTab() on a TabLayout instance.

Note also that we could explicitly create the tabs via XML instead of programmatically.

6. Testing the App

Finally, you can run the app!

Try interacting with the application by swiping left or right and tapping the tabs.

7. Scrollable Tabs

The official material design guidelines on tabs says the following about scrollable tabs:

Scrollable tabs display a subset of tabs at any given moment. They can contain longer tab labels and a larger number of tabs than fixed tabs. Scrollable tabs are best used for browsing contexts in touch interfaces when users don’t need to directly compare the tab labels.

Let’s see how to create tabs with scrollable mode configuration. I made the title for each of the tabs longer than before. Here is the result in fixed mode:

You can see that TabLayout has used multiple lines to display each of the tab’s titles. In some situations, it will even truncate the titles! This creates a bad user experience, so if your tab titles need to be very long, you should consider using scrollable mode. Note also that if you are going to have more than four tabs, it’s recommended to make the tab mode scrollable.

Let’s change the app:tabMode property from fixed to scrollable .

Remember, you can also set the tab mode programmatically, as discussed earlier.

8. Showing Tab Icons

Let’s now dive into how to replace the tab item text with icons instead.

Here we called the getTabAt() on an instance of TabLayout . Calling this method will return the tab at the specified index. Next, we call setIcon() . Calling this method will set the icon displayed on this tab.

I also set the tab mode to be fixed.

I still override the getPageTitle() inside the SampleAdapter .

Here is the result:

Now, if you want only the icons, you simply don’t override getPageTitle() .

9. Bonus: Using Android Studio Templates

Instead of writing so much code just to create a tabbed interface or activity from scratch, Android Studio 3.0 has some pre-existing code templates (available in Java and Kotlin) to help kick-start your project. One such template can be used to create a tabbed activity.

I’ll show you how to use this handy feature in Android Studio 3.

For a new project, fire up Android Studio 3.

Enter the application name and click the Next button.

You can leave the defaults as they are in the Target Android Devices dialog. Click the Next button again.

In the Add an Activity to Mobile dialog, scroll down and select Tabbed Activity. Click the Next button after that.

In the last dialog, scroll down to the Navigation Style drop-down menu and select Action Bar Tabs (with ViewPager). Finally, click the Finish button to accept all configurations.

Android Studio has now helped us to create a project with a tabbed activity. Really cool!

You are strongly advised to explore the code generated.

In an already existing Android Studio project, to use this template, simply go to File > Activity > Tabbed Activity. And follow the similar steps that were described previously.

The templates that come included with Android Studio are good for simple layouts and making basic apps, but if you want to kick-start your app even further, you might consider some of the app templates available from Envato Market.

They’re a huge time saver for experienced developers, helping them to cut through the slog of creating an app from scratch and focus their talents instead on the unique and customised parts of creating a new app.

Conclusion

In this tutorial, you learned how to create a tabbed interface in Android using the TabLayout and ViewPager API from scratch. We also explored how to easily and quickly use the Android Studio templates to create a tabbed interface.

I highly recommend checking out the official material design guidelines for tabs to learn more about how to properly design and use tabs in Android.

To learn more about coding for Android, check out some of our other courses and tutorials here on Envato Tuts+!

Источник