How to Add Customize Tabs in Android?
Last Updated :
14 Nov, 2022
In this article, custom tabs are added in android. TabLayout provides a horizontal layout to display tabs. TabLayouts can be added using viewPager also, check here, but it can not be customized. Whenever the user clicks on the tab it will lead to the transaction of one Fragment to another. Custom tabs can be created to achieve this same task. Icons, animation, text, etc according to our need can be added with tabs. Below image shows an example of a custom tab:
Approach:
Step 1: Create an AlgorithmFragment by right click on java package, select new ? Fragment(Blank).
Step 2: Follow the above step for CourseFragment and LoginFragment.
Step 3: Now add the following code in the fragment_algorithm.xml file. Here a TextView is added in the layout.
fragment_algorithm.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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=".Fragments.AlgorithmFragment"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Algorithm"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 4: Now add the following code in fragment_course.xml file. Here a textView is added in the layout.
fragment_course.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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=".Fragments.AlgorithmFragment"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Course"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 5: Now add the following code in fragment_profile.xml file. Here a textView is added in the layout.
fragment_profile.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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=".Fragments.AlgorithmFragment"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Algorithm"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 6: Now add the following code in the tab_bar.xml file. In this file, design the layout of the custom tabs. Here for every fragment, a TextView and an icon (ImageView) is added.
tab_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:background="@color/colorPrimaryDark"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="70dp"
android:orientation="horizontal">
<LinearLayout
android:onClick="onClick"
android:id="@+id/algo_lay"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="70dp"
android:orientation="vertical">
<ImageView
android:layout_gravity="center"
android:src="@drawable/ic_algorithm"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:id="@+id/first_icon"/>
<TextView
android:id="@+id/commerce_first_text"
android:textColor="#FFFF"
android:layout_marginTop="3dp"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:text="Algorithm"
/>
</LinearLayout>
<LinearLayout
android:onClick="onClick"
android:id="@+id/course_lay"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="70dp"
android:orientation="vertical">
<ImageView
android:layout_gravity="center"
android:src="@drawable/ic_course"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:id="@+id/sec_icon"/>
<TextView
android:id="@+id/commerce_sec_text"
android:textColor="#FFFF"
android:layout_marginTop="3dp"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:text="Course"
/>
</LinearLayout>
<LinearLayout
android:onClick="onClick"
android:id="@+id/profile_lay"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="70dp"
android:orientation="vertical">
<ImageView
android:layout_gravity="center"
android:src="@drawable/ic_account"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:id="@+id/third_icon"/>
<TextView
android:id="@+id/commerce_third_text"
android:textColor="#FFFF"
android:layout_marginTop="3dp"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:text="Profile"
/>
</LinearLayout>
</LinearLayout>
Step 7: Now add the following code in the activity_main.xml file. In this file, add the layout of the custom tabs and a container for the fragment.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:orientation="vertical">
<include
layout="@layout/tab_bar"/>
<FrameLayout
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
Step 8: Now add the following code in the MainActivity.java file. In this file, add OnNavigationItemSelectedListener that helps to navigate between the fragments. It will switch the fragment when the user taps on the icon.
MainActivity.java
package org.geeksforgeeks.customtabs;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportFragmentManager().beginTransaction()
.add(R.id.layout,new AlgorithmFragment()).commit();
}
public void onClick(View v){
switch (v.getId()){
case R.id.algo_lay:
getSupportFragmentManager().beginTransaction()
.replace(R.id.layout,
new AlgorithmFragment()).commit();
break;
case R.id.course_lay:
getSupportFragmentManager().beginTransaction()
.replace(new CourseFragment().commit(),R.id.layout);
break;
case R.id.profile_lay:
getSupportFragmentManager().beginTransaction()
.replace(R.id.layout,
new ProfileFragment()).commit();
break;
}
}
}
Output:
Similar Reads
How to Customize Toast in Android?
A Toast is a feedback message. It takes very little space for displaying and it is displayed on top of the main content of an activity, and only remains visible for a short time period. In this article, we will learn how to customize Toast in android. So, we will understand this by making a simple a
2 min read
How to Use Custom Chrome Tabs in Android?
Many apps have to display different types of web pages inside their application. For displaying webpages in Android there are so many features with which we can display webpages in our Android app. Developers generally prefer to use WebView or redirect users to any browser inside their application.
3 min read
How to add a custom styled Toast in Android
A Toast is a feedback message. It takes very little space for displaying and it is displayed on top of the main content of an activity, and only remains visible for a short time period. This article explains how to create Custom Toast messages, which has custom background, image, icon, etc, which ar
4 min read
How to Customise MDC Sliders in Android?
In the article of Material Design Components Sliders in Android, it's been discussed how to implement the Material Design Component sliders in android and also handled the click listener for all types of sliders. In this article, it's been discussed how to customize the Material Design Component sli
4 min read
How to Add Custom Toolbar Background in Android?
A toolbar is basically a form action bar that contains many interactive items. A toolbar supports a more focused feature than an action bar. The toolbar was added in Android Lollipop (API 21) and is the successor of the ActionBar. The toolbar is a ViewGroup that can be put anyplace in the XML layout
3 min read
How to add ColorSeekBar in Android
Seekbar is a type of progress bar. We can drag the seekbar from left to right and vice versa and hence changes the current progress. ColorSeekbar is similar to seekbar but we use this to select a color from multiple colors and can select any custom color. With the help of this widget, we can give mo
2 min read
How to Add Mask to an EditText in Android?
EditText is an android widget. It is a User Interface element used for entering and modifying data. It returns data in String format. Masking refers to the process of putting something in place of something else. Therefore by Masking an EditText, the blank space is replaced with some default text, k
3 min read
How to Add Easy FlipView in Android?
EasyFlipView is an Android library that allows us to easily create a flip view in our android app. We can use this feature in many apps such as the app in which we store the credit or debit card details of the user (the user can easily flip the card to view the CVV of the card). A sample GIF is give
4 min read
Chrome Custom Tabs in Android with Kotlin
As developers, we have the option of displaying web content to a user in their browser or via WebViews, but both have their own limitations: starting the browser is a large, non-customizable context transition for users, whereas WebViews don't support all aspects of the web platform. To address this
3 min read
How to Add ParticleSmasher in Android App?
ParticleSmasher is an Android library that allows us to easily particle effect to our views in our android app .we can use this feature in many apps such as the app in which we destroy a particular UI after completion of the task or when we delete a particular file. A sample GIF is given below to ge
9 min read