TabLayout is used to implement horizontal tabs. TabLayout is introduced in the design support library to implement tabs. Tabs are created using the newTab() method of TabLayout class. The title and icon of Tabs are set through setText(int) and setIcon(int) methods of TabListener interface respectively. Tabs of layout are attached over TabLayout using the method addTab(Tab) method.
What we are going to build in this article?
In this article, we will make three separate tabs with their respective icons with the help of viewPager. A sample video of what we are going to build in this article is shown below. Note that we are going to implement this project in Java Language.
Step by Step Implementation
Step 1: Create a new project
- Open a new project.
- We will be working on Empty Activity with language as Java. Leave all other options unchanged.
- You can change the name of the project at your convenience.
- There will be two default files named activity_main.xml and MainActivity.java.
If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?
Step 2: Adding required dependency
Navigate to Gradle scripts > build.gradle(module) and the following dependency in it-
implementation 'com.google.android.material:material:1.2.1'
Step 3: Working on XML files
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:context = ".MainActivity" >
< com.google.android.material.tabs.TabLayout
android:layout_width = "match_parent"
android:layout_height = "?actionBarSize"
android:id = "@+id/tab_layout"
android:background = "@color/white"
app:tabInlineLabel = "true"
app:tabTextColor = "@color/teal_700"
app:tabIndicatorColor = "@color/teal_700"
app:tabSelectedTextColor = "@color/teal_700"
app:tabTextAppearance = "@style/TextAppearance.AppCompat.Small" />
< androidx.viewpager.widget.ViewPager
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:id = "@+id/view_pager" />
</ LinearLayout >
|
Navigate to app > right-click > new > fragment > blank fragment. Name the fragment as MainFragment. Below is the code for fragment_main.xml file-
<? xml version = "1.0" encoding = "utf-8" ?>
< FrameLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainFragment" >
< TextView
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:id = "@+id/text_view"
android:textSize = "32sp"
android:textStyle = "bold"
android:gravity = "center" />
</ FrameLayout >
|
Step 4: Working on java files
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file.
package com.example.tablayoutwithicon;
import androidx.annotation.ContentView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.style.ImageSpan;
import com.google.android.material.tabs.TabLayout;
import java.lang.reflect.Array;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
// Initialize variables
TabLayout tabLayout;
ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// assign variable
tabLayout=findViewById(R.id.tab_layout);
viewPager=findViewById(R.id.view_pager);
// Initialize array list
ArrayList<String> arrayList= new ArrayList<>( 0 );
// Add title in array list
arrayList.add( "Basic" );
arrayList.add( "Advance" );
arrayList.add( "Pro" );
// Setup tab layout
tabLayout.setupWithViewPager(viewPager);
// Prepare view pager
prepareViewPager(viewPager,arrayList);
}
private void prepareViewPager(ViewPager viewPager, ArrayList<String> arrayList) {
// Initialize main adapter
MainAdapter adapter= new MainAdapter(getSupportFragmentManager());
// Initialize main fragment
MainFragment mainFragment= new MainFragment();
// Use for loop
for ( int i= 0 ;i<arrayList.size();i++)
{
// Initialize bundle
Bundle bundle= new Bundle();
// Put title
bundle.putString( "title" ,arrayList.get(i));
// set argument
mainFragment.setArguments(bundle);
// Add fragment
adapter.addFragment(mainFragment,arrayList.get(i));
mainFragment= new MainFragment();
}
// set adapter
viewPager.setAdapter(adapter);
}
private class MainAdapter extends FragmentPagerAdapter {
// Initialize arrayList
ArrayList<Fragment> fragmentArrayList= new ArrayList<>();
ArrayList<String> stringArrayList= new ArrayList<>();
int [] imageList={R.drawable.basic,R.drawable.advance,R.drawable.pro};
// Create constructor
public void addFragment(Fragment fragment,String s)
{
// Add fragment
fragmentArrayList.add(fragment);
// Add title
stringArrayList.add(s);
}
public MainAdapter(FragmentManager supportFragmentManager) {
super (supportFragmentManager);
}
@NonNull
@Override
public Fragment getItem( int position) {
// return fragment position
return fragmentArrayList.get(position);
}
@Override
public int getCount() {
// Return fragment array list size
return fragmentArrayList.size();
}
@Nullable
@Override
public CharSequence getPageTitle( int position) {
// Initialize drawable
Drawable drawable= ContextCompat.getDrawable(getApplicationContext()
,imageList[position]);
// set bound
drawable.setBounds( 0 , 0 ,drawable.getIntrinsicWidth(),
drawable.getIntrinsicHeight());
// Initialize spannable image
SpannableString spannableString= new SpannableString( "" +stringArrayList.get(position));
// Initialize image span
ImageSpan imageSpan= new ImageSpan(drawable,ImageSpan.ALIGN_BOTTOM);
// Set span
spannableString.setSpan(imageSpan, 0 , 1 , Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
// return spannable string
return spannableString;
}
}
} |
Go to the MainFragment.java file and refer to the following code. Below is the code for the MainFragment.java file.
package com.example.tablayoutwithicon;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class MainFragment extends Fragment {
// Initialize variable
TextView textView;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Initialize view
View view =inflater.inflate(R.layout.fragment_main, container, false );
// Assign variable
textView=view.findViewById(R.id.text_view);
// Get Title
String sTitle=getArguments().getString( "title" );
// Set title on text view
textView.setText(sTitle);
// return view
return view;
}
} |
Here is the final output of our application.
Output: