How to Implement Tabs, ViewPager and Fragment in Android using Kotlin?
In some android apps, Tabs are used, which allows developers to combine multiple tasks (operations) on a single activity. On another side, it provides a different look to that app. It is also possible to provide different feel like left and right swipe by using ViewPager. And to implement this topic, few terms are required such as ViewPager, Fragments, and TabLayout. For practice purposes, Kotlin programming language is used in this article.
What are TabLayout, ViewPager, and Fragment?
- TabLayout: This view allows us to make use of multiple tabs in the android app. This Layout holds different tabs. In this article, tabs are used to navigate from one Fragment to another Fragment.
- ViewPager: This view allows us to make use of the left and right swipe feature to show another fragment.
- Fragments: This is a part of the Activity. This view is necessary, to do multiple tasks on a single activity. The Fragment also makes use of layout file which contains view/s as per need.
A sample GIF is given below to get an idea about what we are going to do in this article.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.
Step 2: Create Fragments
- Go to app > res > layout > right-click > New > Layout Resource File and after that, it asks for the file name then gives “layout_login” as the name of that layout file.
- Use the same method to create another layout file “layout_signup”.
- After that, use the following code for the “layout_login.xml” file. Here one TextView is shown.
- Below is the code for the layout_signup.xml file.
- To create Fragment class, right-click on the first package of java directory which is located at app > java > “com.example.gfgtabdemo”, where “gfgtabdemo” is the project name in a small case. Move cursor on “New” and select “Kotlin file/class”.
- Give “LoginFragment” as a name to that file and select the “class” option as shown in the below screenshot.
- To create a Fragment, it is necessary to make this class as a child of the Fragment class by using the “:” symbol. And override the “onCreateView” method to set the layout resource file to that fragment file as shown in the following code snippet.
- Use the above procedure to create the “SignupFragment” file.
- After that, use the following code in the “LoginFragment.kt” file.
- Use the following code in the “SignupFragment.kt” file.
Step 3: Theme Configuration
- Open “styles.xml” which is placed inside of folder “app > res > values > styles.xml” as shown in the image below.
- Add the following code inside of <resources> tag in styles.xml.
- Below is the complete code for the complete styles.xml file.
- After that open, the “AndroidManifest.xml” file placed inside of folders ”app > manifest > AndroidManifest.xml”. We need to set the theme “@style/AppTheme.NoActionBar” inside of <activity> tag. To do the same type the highlighted line in the following screenshot, inside of that activity tag, in which you want to use tab layout.
Step 4: Adding Required Views
For the implementation of this topic, it is important to add some views. To do the same first, open build.gradle (Module: app) file, located at “Gradle Script > build.gradle (Module: app)”, and add the following dependency inside of dependencies block. And don’t forget to click on “sync now”. This dependency is required, to make use of “appbar layout”.
Note: Type this dependency line rather than copy and paste. Because due to copy and paste formatting or text style may be unaccepted if it is not matched with the required format.
Step 5: Working with the activity_main.xml file
After that, it is necessary to add the following views in a layout file of activity so open it. Here we use “activity_main.xml”.
Add the following code to the “activity_main.xml” file. Comments are added inside the code to understand the code in more detail.
Step 6: Working with the MainActivity.kt file
After that, open “MainActivity.kt”. In this file, it is important to create the object of Toolbar, ViewPager, and TabLayout and use the “findViewById()” method to identify the view. Its syntax is shown below.
var object_name = findViewById<ViewName>(unique_id_assigned_to_view)
Go to the MainActivity.kt file, and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.