How to Tab on Android

Charlotte Daniels

Android, Tutorials

Android phones have become an integral part of our lives, allowing us to access various applications and perform multiple tasks with ease. One of the key features of Android is the ability to use tabs in order to switch between different screens or sections within an app. In this tutorial, we will explore how to effectively use tabs on Android devices.

What are Tabs?
Tabs are graphical elements that allow users to navigate between different sections of an application by tapping on them. They are commonly used in apps that have multiple screens or categories, such as social media apps, news apps, or e-commerce apps.

Step 1: Setting up the TabLayout
To begin using tabs in your Android application, you need to add the TabLayout widget to your layout file. The TabLayout provides a horizontal layout for displaying the tabs.

First, make sure you have the necessary dependencies added to your project’s build.gradle file:

“`html
dependencies {
implementation ‘com.google.Android.material:material:1.2.0’
}
“`

Next, open your layout XML file and add the following code snippet inside a LinearLayout or RelativeLayout:

“`html

“`

In this code snippet, we set the `tabGravity` attribute to “fill” and `tabMode` attribute to “fixed”. These attributes ensure that the tabs stretch horizontally across the screen and remain fixed in size.

Step 2: Creating Fragments
Tabs usually display different content screens known as fragments. A fragment is a modular section of an activity that has its own lifecycle and can be reused across multiple activities.

Create a new Java class for each fragment you want to display in your tabs. For example, if you want to display three tabs, create three fragment classes.

To create a new fragment class, right-click on your package directory in Android Studio and select “New” -> “Java Class”. Give it a meaningful name, such as “TabFragment1”, and make sure it extends the Fragment class.

In each fragment class, override the `onCreateView()` method and inflate the corresponding layout XML file:

“`java
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_tab1, container, false);
}
“`

Make sure to replace `fragment_tab1` with the name of your layout XML file for each fragment.

Step 3: Adding Fragments to Tabs
Now that we have our TabLayout set up and our fragments created, we need to associate each tab with its corresponding fragment.

In your activity’s Java class (e.g., MainActivity), add the following code snippet inside the `onCreate()` method:

“`java
// Get the TabLayout from the layout file
TabLayout tabLayout = findViewById(R.id.tab_layout);

// Create instances of your fragments
TabFragment1 tabFragment1 = new TabFragment1();
TabFragment2 tabFragment2 = new TabFragment2();
TabFragment3 tabFragment3 = new TabFragment3();

// Add each fragment to the adapter along with its title
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(tabFragment1, “Tab 1”);
adapter.addFrag(tabFragment2, “Tab 2”);
adapter.addFrag(tabFragment3, “Tab 3”);

// Set the adapter for the ViewPager
ViewPager viewPager = findViewById(R.view_pager);
viewPager.setAdapter(adapter);

// Connect the TabLayout with the ViewPager
tabLayout.setupWithViewPager(viewPager);
“`

In this code snippet, we first obtain a reference to the TabLayout from the layout file using its id. Then, we create instances of our fragment classes.

Next, we create an instance of the `ViewPagerAdapter` class and add each fragment to it along with its title. The `ViewPagerAdapter` is a custom adapter that extends `FragmentPagerAdapter` and manages the fragments for the ViewPager.

Finally, we set the adapter for the ViewPager and connect the TabLayout with the ViewPager using the `setupWithViewPager()` method.

Step 4: Customizing Tabs
By default, tabs are displayed as simple text labels. However, you can customize them to make them more visually appealing.

To customize tabs, you can use a combination of XML attributes and styles. For example, you can change the text color, background color, or even use custom icons for each tab.

To change the text color of the selected tab, add the following code to your activity’s Java class:

“`java
tabLayout.setTabTextColors(Color.WHITE, Color.YELLOW);
“`

This code sets the text color of unselected tabs to white and selected tab to yellow. You can replace these colors with your own preferences.

To add custom icons to each tab, create drawable resources for your icons and use them when adding fragments to your ViewPagerAdapter:

“`java
adapter.addFrag(tabFragment1, “Tab 1”, R.drawable.ic_tab1);
adapter.addFrag(tabFragment2, “Tab 2”, R.ic_tab2);
adapter.addFrag(tabFragment3, “Tab 3”, R.ic_tab3);
“`

Replace `ic_tab1`, `ic_tab2`, and `ic_tab3` with your own drawable resources.

Conclusion
Tabs are a great way to organize content within an Android application. They provide a clean and intuitive user interface for navigating between different sections of an app. By following the steps outlined in this tutorial, you can easily implement and customize tabs in your own Android projects.

Now that you have learned how to create tabs on Android, you can start exploring more advanced features and customization options to enhance the user experience of your application. Happy coding!

Android - iPhone - Mac

 © 2023 UI-Transitions

Privacy Policy