Greetings to everyone and welcome to my favorite Science community online, StemSocial.
Original Image Source by Foundry from Pixabay
It's been roughly two months since I began my series on Android App Development Tutorials tor beginners.
I really don't know whether I should keep calling it a tutorial for beginners anymore because I'm pretty sure my followers have advanced well enough to start intermediary levels.
We have developed quite a lot of basic Android Apps and that has helped me to introduce so many different Android APIs, classes, functions or methods and techniques.
I'v also taught on how to install the required tools like Java and Android Studio.
We're very close to entering the Intermediary level which is what promoted me share topics regarding ways of implementing different features in Android Apps.
In yesterday's episode, I introduced my readers to Fragments and shared on how to implement fragments in Android Apps.
So to continue on related topics, we're going to learn how to implement a slider tab feature in your Android App.
If you're familiar with the Android version of a lot of Apps like WhatsApp and Facebook, you would already be very familiar with slider tabs.
Slider tabs are a common user interface component in Android Apps, allowing users to navigate between different sections of an app easily.
In an event where you as a developer feel the need to display different pages of an App in one activity, you could use Slider tabs where the user can swipe either left of right to land on the fragment page they want to.
This makes navigating through a lot of pages very convenient for the users.
I hope you're ready for today's blog guys. Let's get started with our work.
Prerequisites
For the benefit of newcomers to Android App development or my series, I'll share with you the required softwares you need to be able to go through with this tutorial.
Android Studio IDE - the platform on which we'll develop this and all other Android Apps.
Java Development Kit, JDK - You need to install JDK correctly on your PC for your PC to be able to execute Java commands or codes.
Physical Android Device or Emulator - After building the App, we'll need to test it either on an emulator or a physical Android device.
If you have all these checked out, you're absolutely ready to go through with this tutorial
Set up a New Project in Android Studio
Alright guys it's time to implement the slider tab. There are two main ways to do this but I'll only be teaching the first one.
You can either create the entire Slider tab layout yourself or choose the Tab Layout Template which will present a tab view template for you to customize.
However we'll be working with the second option where we learn how to create the slider tab layout ourselves.
Open Android studio and click on "Create a new Android Studio project"
Since we'll be creating the layout ourselves, choose "Empty Activity" as the template of your project. Click the "Next" button and set both the App name and package name of you android Project.
Ensure that Java is the selected programming language for your project and click the Finish button.
Now guys when Android Studio finally finishes loading your new project, ensure that you have the necessary dependencies added to your build.gradle file
We'll be needing the ViewPager and TabLayout element so we need to make sure that material dependency is integrated in our project.
Here's how your dependency code should look like in Gradle
implementation 'com.google.android.material:material:1.5.0'
Designing Your Layout
It's time to work on the user interface layout guys. The layout design code will be written inside our activity_main file. We'll include two main elements to make the slider tab feature work.
We'll need a ViewPagerfor the fragment pages and a TabLayoutfor the tabs.
Here's how the design code should look like guys
<RelativeLayout 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/viewPager"
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_alignParentBottom="true"
app:tabMode="fixed" />
</RelativeLayout>
Create Fragments for Each Tab
Now guys since each page inside our tab layout needs to exist in one activity, we need those pages to be fragment pages.
So we're going to have to create separate fragments for each tab that you want to display. The more tabs you want to display, the more fragment pages you'll have to create for each tab page.
You're free to customize the layout and content of each fragment according to your app's requirements.
I wouldn't want to create all the fragments pages to avoid getting this blog to be too long but you can easily refer to my previous blog on creating fragment activities to know how to do that.
- If you're having troubles with that, comment down below and I'll share the link to the fragment blog I made
Implementing the Adapter for ViewPager
Now guys we'll need to create a whole new adapter class to handle clicks to each page or each fragment.
So go ahead and create a new Java class called FragmentPagerAdapter to manage the fragments within the ViewPager
I created mine and made it extend FragmentPagerAdapter
Here's how your adapter class should look like
public class MyPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> fragmentList = new ArrayList<>();
private final List<String> fragmentTitleList = new ArrayList<>();
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
public void addFragment(Fragment fragment, String title) {
fragmentList.add(fragment);
fragmentTitleList.add(title);
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return fragmentTitleList.get(position);
}
}
Set Up ViewPager and TabLayout in MainActivity
It's time to bring everything together in your MainActivity.java file.
Of course you will be performing this step in any activity you choose to implement slider tabs feature in.
So guys inside your MainActivity.java file, initialize the ViewPager, create an instance of your MyPagerAdapter, and also don't forget to set it as the adapter for the ViewPager.
It's really that simple guys. I only created 2 fragments so please include all of the fragments you will be creating.
Here's how your code should look like
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = findViewById(R.id.viewPager);
tabLayout = findViewById(R.id.tabLayout);
MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new TabFragment1(), "Tab 1");
adapter.addFragment(new TabFragment2(), "Tab 2");
// Add more fragments as needed
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
}
}
- Customize Tab Fragments
So I didn't include this section because that's entirely up to you on what you choose to do in each tab.
If want to display a RecycleView element or ListView or any task, just implement it in that particular fragment page you want to and continue with the steps I've given you.
Running Your App
That's it guys, we're done implementing a slider tab activity or feature. It was pretty quick and easy to do.
You can choose to implement it in any activity of your Android App.
To run the App, we'll go over the very same process. You can choose to run the App using an emulator or your very own Physical Android device which is the option I usually prefer.
When the App launches, slide through the pages and ensure that each page displays what you want it to display.
I hope you enjoyed this particular episode guys. Thanks so much for the time.
As always if you're having issues implementing the codes, please let me know in the comments.
We're pretty close to intermediary levels and we might just start learning Kotlin anytime soon.
- If you're interested in Kotlin, please let me know in the comments.
Thank you all for the support. To my friends @stickupcurator or @stickupboys and everyone else
Have A Great Day And Catch You Next Time On StemSocial. Goodbye 👨💻
You Can Follow Me @skyehi For More Like This And Others
