Making the App Material TabLayout

 Admin   
4866 View    Feb 9 2020 3:21AM

 

1. In Android Studio, go to File New Project and fill all the details required to create a new project. When it prompts to select a default activity, select Blank Activity and proceed.

2. Open build.gradle and add android design support library

build.gradle

dependencies {

 

implementation 'androidx.annotation:annotation:1.0.2'
implementation 'androidx.lifecycle:lifecycle-extensions:2.0.0'

}

 

style

<resources>


<!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>
</resources>

 

 

Android mainfaist

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.mindspark.studio">


<application
android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" />
<category
android:name="android.intent.category.LAUNCHER" /> </intent-filter>      </activity>
</application>
</manifest>

 

One Fragment.java

package com.mindspark.studio;

import android.os.Bundle;


import
android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;
import
androidx.fragment.app.Fragment;
public class
OneFragment extends Fragment {
public OneFragment() { // Required empty public constructor
}
@Override
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); }
 @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); }
}

 

fragment_one.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"

    android:layout_width="match_parent"

    xmlns:card_view="https://schemas.android.com/apk/res-auto"

    android:layout_height="match_parent"

    android:orientation="vertical">



<TextView
android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="One" android:textSize="45dp"/>





</LinearLayout>

 

Likewise create few more fragment activities with same code we used for OneFragment.java. I have created TwoFragment.java, ThreeFragment.java, FourFragemnt.java ….. upto TenFragment.java

2. Fixed Tabs

Fixed tabs should be used when you have limited number of tabs. These tabs are fixed in position

Open the layout file of main activity (activity_main.xml) and add below layout code.

activity_main.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=".MainActivity">



<androidx.viewpager.widget.ViewPager
android:id="@+id/viwepager" android:layout_width="match_parent" android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="top" />
</androidx.viewpager.widget.ViewPager>


</androidx.constraintlayout.widget.ConstraintLayout>

 

Open MainActivity.java and do the below changes.

 

MainActivity.java

package com.mindspark.studio;
import
androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentPagerAdapter; import androidx.viewpager.widget.ViewPager;
import
java.util.ArrayList; import java.util.List; import android.os.Bundle;
import
com.google.android.material.tabs.TabLayout; import com.mindspark.studio.OneFragment; import com.mindspark.studio.TwoFragment; import com.mindspark.studio.ThreeFragment; public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout; private ViewPager viewPager; private int[] tabIcons = { R.drawable.fiber_new_24px, R.drawable.shopping_basket_24px, R.drawable.map_24px };
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viwepager); setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tablayout); tabLayout.setupWithViewPager(viewPager); setupTabIcons(); }
private void setupTabIcons() { tabLayout.getTabAt(0).setIcon(tabIcons[0]); tabLayout.getTabAt(1).setIcon(tabIcons[1]);   tabLayout.getTabAt(2).setIcon(tabIcons[2]); }
private void setupViewPager(ViewPager viewPager) { ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.addFrag(new OneFragment(), "ONE"); adapter.addFrag(new TwoFragment(), "TWO"); adapter.addFrag(new ThreeFragment(), "THREE"); viewPager.setAdapter(adapter); }
class ViewPagerAdapter extends FragmentPagerAdapter { private final List<Fragment> mFragmentList = new ArrayList<>(); private final List<String> mFragmentTitleList = new ArrayList<>();
public
ViewPagerAdapter(FragmentManager manager) { super(manager); }
@Override
public Fragment getItem(int position) {   return mFragmentList.get(position); }
@Override
public int getCount() { return mFragmentList.size(); }
public void addFrag(Fragment fragment, String title) { mFragmentList.add(fragment); mFragmentTitleList.add(title); }
@Override
public CharSequence getPageTitle(int position) { return mFragmentTitleList.get(position); } }



Screenshot

Link Code