Hello, everyone! Today, as part of the Android app development course using Java, we will learn in detail how to construct a tab layout. The tab layout helps make the user interface (UI) more intuitive and allows easy switching between various screens. In this tutorial, we will enhance our understanding of the basic structure of the tab layout, its various components, and practical examples using Java code.
What is a Tab Layout?
A tab layout is a UI component that allows users to switch between multiple screens or views using tab buttons. Users can easily navigate and access different information by clicking on the tab buttons. The Android tab layout is mainly implemented by combining TabLayout, ViewPager, and Fragment.
Basic Preparation for Implementing Tab Layout
To implement a tab layout, you need to create a new project using Android Studio. In this example, we will create a project that supports Android API 21 or higher as a basic requirement.
- Run Android Studio and select “New Project”.
- Choose “Empty Activity,” then enter the project name and package information on the next screen.
- Finally, click the “Finish” button to create the project.
Gradle Setup
You need to add the necessary dependencies to the project’s build.gradle file.
Add the following code to the build.gradle (Module: app) file’s dependencies section.
implementation 'com.google.android.material:material:1.4.0'Layout File Configuration
Let’s create the layout file required for configuring the tab layout. Open the res/layout/activity_main.xml file in your project and modify it as follows.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/tabLayout"/>
</RelativeLayout>Modifying MainActivity.java File
Open the MainActivity.java file and write the code to set up the tab layout and view pager.
Paste the code below into MainActivity.java.
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;
import com.google.android.material.tabs.TabLayout;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
ViewPager viewPager;
TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = findViewById(R.id.viewPager);
tabLayout = findViewById(R.id.tabLayout);
setupViewPager(viewPager);
tabLayout.setupWithViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new FragmentOne(), "Tab 1");
adapter.addFragment(new FragmentTwo(), "Tab 2");
adapter.addFragment(new FragmentThree(), "Tab 3");
viewPager.setAdapter(adapter);
}
}Creating Fragments
Each tab consists of a Fragment. We will create FragmentOne, FragmentTwo, and FragmentThree.
Refer to the code below to create each Fragment file.
FragmentOne.java
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class FragmentOne extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_one, container, false);
}
}FragmentTwo.java
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class FragmentTwo extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_two, container, false);
}
}FragmentThree.java
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class FragmentThree extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_three, container, false);
}
}Creating Fragment Layout Files
Create layout files for each Fragment. In the res/layout folder, create fragment_one.xml, fragment_two.xml, and fragment_three.xml files, and add the following content to each.
fragment_one.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fragment 1"
android:layout_centerInParent="true"/>
</RelativeLayout>fragment_two.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fragment 2"
android:layout_centerInParent="true"/>
</RelativeLayout>fragment_three.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fragment 3"
android:layout_centerInParent="true"/>
</RelativeLayout>Creating ViewPagerAdapter Class
Create an adapter class that connects the ViewPager and the Fragments. Create a class named ViewPagerAdapter and write the following code.
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import java.util.ArrayList;
import java.util.List;
public class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> fragmentList = new ArrayList<>();
private final List<String> fragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(@NonNull FragmentManager fm) {
super(fm);
}
@NonNull
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
public void addFragment(Fragment fragment, String title) {
fragmentList.add(fragment);
fragmentTitleList.add(title);
}
@Override
public CharSequence getPageTitle(int position) {
return fragmentTitleList.get(position);
}
}Run the App and Check Results
Once all the code is prepared, run the app in Android Studio.
When testing the app on an emulator or actual device, you will see three tab buttons, and clicking on each tab will display the corresponding Fragment.
Conclusion
So far, we have learned how to configure a tab layout in the Android app development course using Java.
Through this course, you have learned how to implement the tab layout, which is commonly used in Android UI design.
With this foundational knowledge, you can add more features to your projects and create apps that provide a better user experience!
If you have any questions or further inquiries, please leave a comment. I will continue to prepare many useful Android development courses in the future.
Thank you!