How to create tabs using fragments in android

Tabs are becoming popular features and are being embraced by various android applications due to their capability of allowing users to access multiple features or pages while on one screen. The best example of tab layouts in android is the most popular app in the world right now, WhatsApp.

The use of tabs by WhatsApp allows it to outstand from all other applications since all the core features are visible at a glance in the home activity or the first screen when you access the app

Tab view or tab layout is a layout that is available in android studio that allows the fragments or views to be added as horizontal sliding tabs

In this article, we shall introduce how to create tabs in android at the very beginning level, and then in the next articles, we shall focus on the advanced features for tab layouts.

To create tabs in android,

• First, you will need to launch the android studio
• Next, you will need to create a new project by clicking file then new, and finally new project

• In the modal that pops up, you will need to scroll to the bottom and select Tabbed Activity

• Click next once you select tabbed activity
• In the next screen that appears, you will need to assign a name to your project, the language we are using kotlin, and ensure the minimum SDK is high so that it can support almost all devices

• Click finish

Wait for Gradle to build and import all the required files. (It may take a while if you are using tabbed activity for the first time)

• Once it’s done, it will create various files

The first file created is the activity_main.xml file which will contain;

• the view pager that uses the material design for horizontal scrolling from one tab to another
• the app bar layout that will contains the title of the project and also the tabs title
• the tab layout that will support the tabs
• an additional of floating button which you can remove, it is mostly used in WhatsApp when you want to start a new conversation

The activity_main.xml design code will be as follows

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.MyApplication1.AppBarOverlay">
 
        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:minHeight="?actionBarSize"
            android:padding="@dimen/appbar_padding"
            android:text="Tab Project"
            android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" />
 
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary" />
    </com.google.android.material.appbar.AppBarLayout>
 
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

The main_activity.kt does not have a lot other than linking the xml file. (We will see its function when we add functionality and more tabs in our next articles)

• Save your application and run the app in your device or emulator which is the testing environment.

You will notice that already by default, there are already two tabs that are created labelled tab 1 and tab 2 and they will have a default text message. When you scroll horizontally, the tabs will change from tab 1 to tab 2 and back.

For the introduction on how to create tabs using fragments in android is up to that point. Follow the next article as we add more tabs, change tab names and add functionality to tabs