\n 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.\n <\/p>\n
\n 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 \n 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<\/strong> as a basic requirement.\n <\/p>\n \n You need to add the necessary dependencies to the project’s build.gradle file. \n Let\u2019s create the layout file required for configuring the tab layout. Open the \n Open the MainActivity.java file and write the code to set up the tab layout and view pager. \n Each tab consists of a Fragment. We will create FragmentOne<\/strong>, FragmentTwo<\/strong>, and FragmentThree<\/strong>. \n Create layout files for each Fragment. In the \n Create an adapter class that connects the ViewPager and the Fragments. Create a class named ViewPagerAdapter<\/strong> and write the following code.\n <\/p>\n \n Once all the code is prepared, run the app in Android Studio. \n So far, we have learned how to configure a tab layout in the Android app development course using Java. \n 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. <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"TabLayout<\/code>, ViewPager<\/code>, and Fragment<\/code>.\n <\/p>\nBasic Preparation for Implementing Tab Layout<\/h2>\n
\n
Gradle Setup<\/h2>\n
\n Add the following code to the build.gradle (Module: app)<\/code> file’s dependencies<\/code> section.\n <\/p>\nimplementation 'com.google.android.material:material:1.4.0'<\/code><\/pre>\nLayout File Configuration<\/h2>\n
res\/layout\/activity_main.xml<\/code> file in your project and modify it as follows.\n <\/p>\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n tools:context=\".MainActivity\">\n\n <com.google.android.material.tabs.TabLayout\n android:id=\"@+id\/tabLayout\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"\n android:layout_alignParentTop=\"true\"\/>\n\n <androidx.viewpager.widget.ViewPager\n android:id=\"@+id\/viewPager\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:layout_below=\"@id\/tabLayout\"\/>\n\n<\/RelativeLayout><\/code><\/pre>\nModifying MainActivity.java File<\/h2>\n
\n Paste the code below into MainActivity.java.\n <\/p>\nimport androidx.appcompat.app.AppCompatActivity;\n import androidx.fragment.app.Fragment;\n import androidx.fragment.app.FragmentPagerAdapter;\n import androidx.viewpager.widget.ViewPager;\n import com.google.android.material.tabs.TabLayout;\n import android.os.Bundle;\n\n public class MainActivity extends AppCompatActivity {\n\n ViewPager viewPager;\n TabLayout tabLayout;\n\n @Override\n protected void onCreate(Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n setContentView(R.layout.activity_main);\n viewPager = findViewById(R.id.viewPager);\n tabLayout = findViewById(R.id.tabLayout);\n\n setupViewPager(viewPager);\n tabLayout.setupWithViewPager(viewPager);\n }\n\n private void setupViewPager(ViewPager viewPager) {\n ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());\n adapter.addFragment(new FragmentOne(), \"Tab 1\");\n adapter.addFragment(new FragmentTwo(), \"Tab 2\");\n adapter.addFragment(new FragmentThree(), \"Tab 3\");\n viewPager.setAdapter(adapter);\n }\n }<\/code><\/pre>\nCreating Fragments<\/h2>\n
\n Refer to the code below to create each Fragment file.\n <\/p>\nFragmentOne.java<\/h3>\n
import android.os.Bundle;\n import android.view.LayoutInflater;\n import android.view.View;\n import android.view.ViewGroup;\n import androidx.fragment.app.Fragment;\n\n public class FragmentOne extends Fragment {\n\n @Override\n public View onCreateView(LayoutInflater inflater, ViewGroup container,\n Bundle savedInstanceState) {\n \/\/ Inflate the layout for this fragment\n return inflater.inflate(R.layout.fragment_one, container, false);\n }\n }<\/code><\/pre>\nFragmentTwo.java<\/h3>\n
import android.os.Bundle;\n import android.view.LayoutInflater;\n import android.view.View;\n import android.view.ViewGroup;\n import androidx.fragment.app.Fragment;\n\n public class FragmentTwo extends Fragment {\n\n @Override\n public View onCreateView(LayoutInflater inflater, ViewGroup container,\n Bundle savedInstanceState) {\n \/\/ Inflate the layout for this fragment\n return inflater.inflate(R.layout.fragment_two, container, false);\n }\n }<\/code><\/pre>\nFragmentThree.java<\/h3>\n
import android.os.Bundle;\n import android.view.LayoutInflater;\n import android.view.View;\n import android.view.ViewGroup;\n import androidx.fragment.app.Fragment;\n\n public class FragmentThree extends Fragment {\n\n @Override\n public View onCreateView(LayoutInflater inflater, ViewGroup container,\n Bundle savedInstanceState) {\n \/\/ Inflate the layout for this fragment\n return inflater.inflate(R.layout.fragment_three, container, false);\n }\n }<\/code><\/pre>\nCreating Fragment Layout Files<\/h2>\n
res\/layout<\/code> folder, create fragment_one.xml<\/strong>, fragment_two.xml<\/strong>, and fragment_three.xml<\/strong> files, and add the following content to each.\n <\/p>\nfragment_one.xml<\/h3>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\">\n\n <TextView\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"Fragment 1\"\n android:layout_centerInParent=\"true\"\/>\n\n<\/RelativeLayout><\/code><\/pre>\nfragment_two.xml<\/h3>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\">\n\n <TextView\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"Fragment 2\"\n android:layout_centerInParent=\"true\"\/>\n\n<\/RelativeLayout><\/code><\/pre>\nfragment_three.xml<\/h3>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\">\n\n <TextView\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"Fragment 3\"\n android:layout_centerInParent=\"true\"\/>\n\n<\/RelativeLayout><\/code><\/pre>\nCreating ViewPagerAdapter Class<\/h2>\n
import androidx.annotation.NonNull;\n import androidx.fragment.app.Fragment;\n import androidx.fragment.app.FragmentManager;\n import androidx.fragment.app.FragmentPagerAdapter;\n\n import java.util.ArrayList;\n import java.util.List;\n\n public class ViewPagerAdapter extends FragmentPagerAdapter {\n\n private final List<Fragment> fragmentList = new ArrayList<>();\n private final List<String> fragmentTitleList = new ArrayList<>();\n\n public ViewPagerAdapter(@NonNull FragmentManager fm) {\n super(fm);\n }\n\n @NonNull\n @Override\n public Fragment getItem(int position) {\n return fragmentList.get(position);\n }\n\n @Override\n public int getCount() {\n return fragmentList.size();\n }\n\n public void addFragment(Fragment fragment, String title) {\n fragmentList.add(fragment);\n fragmentTitleList.add(title);\n }\n\n @Override\n public CharSequence getPageTitle(int position) {\n return fragmentTitleList.get(position);\n }\n }<\/code><\/pre>\nRun the App and Check Results<\/h2>\n
\n 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.\n <\/p>\nConclusion<\/h2>\n
\n Through this course, you have learned how to implement the tab layout, which is commonly used in Android UI design.
\n With this foundational knowledge, you can add more features to your projects and create apps that provide a better user experience!\n <\/p>\n
\n Thank you!\n <\/p>\n