In this tutorial we are going to create 3 Tabs .Every tab have its own Fragment to control over screen. Also user can swipe between 3 tabs.
we are using AndroidX support Library , ViewPager2 and 3 different fragment & 3 different xml for layouts. And TabLayout for Tabs.
Layout Demonstration :
Checkout the following pic which explains the complete overview of layout architecture. Basically we are using ViewPager as main layout and for individual pager views we use Fragments. The tabs are part of Action Bar.
STEP 1: CREATING PROJECT
Let’s start with creating new project in android studio with package name com.example.manualSliding and class name MainActivity.java and its layout name is activity_main.xml.
STEP 2: ADDING DEPENDENCIES
open file Gradle Scripts/build.gradle(Module: app)
under dependencies{ } add this:
dependencies {
//this is for ViewPager
implementation "androidx.viewpager2:viewpager2:1.0.0"
//this is for TabLayout
implementation 'com.google.android.material:material:1.2.0-alpha01'
}
new TabLayoutMediator(tabLayout, viewPager,(tab, position) -> tab.setText(titles[position])).attach();
complete code of MainActivity.java
package com.example.manualsliding;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;
public class MainActivity extends AppCompatActivity {
private static final int NUM_PAGES = 3;
//The pager widget, which handles animation and allows swiping horizontally to access previous and next wizard steps.
public static ViewPager2 viewPager;
// The pager adapter, which provides the pages to the view pager widget.
private FragmentStateAdapter pagerAdapter;
// Arrey of strings FOR TABS TITLES
private String[] titles = new String[]{"Tab1", "Tab2", "Tab3"};
// tab titles
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = findViewById(R.id.mypager);
pagerAdapter = new MyPagerAdapter(this);
viewPager.setAdapter(pagerAdapter);
//inflating tab layout
TabLayout tabLayout =( TabLayout) findViewById(R.id.tab_layout);
//displaying tabs
new TabLayoutMediator(tabLayout, viewPager,(tab, position) -> tab.setText(titles[position])).attach();
}
private class MyPagerAdapter extends FragmentStateAdapter {
public MyPagerAdapter(FragmentActivity fa) {
super(fa);
}
@Override
public Fragment createFragment(int pos) {
switch (pos) {
case 0: {
return FirstFragment.newInstance("fragment 1");
}
case 1: {
return SecondFragment.newInstance("fragment 2");
}
case 2: {
return ThirdFragment.newInstance("fragment 3");
}
default:
return FirstFragment.newInstance("fragment 1, Default");
}
}
@Override
public int getItemCount() {
return NUM_PAGES;
}
}
@Override
public void onBackPressed() {
if (viewPager.getCurrentItem() == 0) {
// If the user is currently looking at the first step, allow the system to handle the
// Back button. This calls finish() on this activity and pops the back stack.d
super.onBackPressed();
} else {
// Otherwise, select the previous step.
viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);
}
}
}
Inprevious post, I had talked about some popular designs of Floating Action Button (FAB) - a component of Design Support Library. Beside that, there is a design fromInbox application(developed by Google) which containing some FABs are combined into a group and they will be shown after the "representative button" clicked. This design called Floating Action Menu:
Up to now, there is no official component from Google which allows us making this design so we must use third-party library to building a Floating Action Menu (FAM). Fortunately, libraries to resolve this problem is not unpopular! In this post, I will use a third-party developed byDmytro Tarianyk Clans. It's very simple to implement and solving this problem quickly! DEMO VIDEO:
Import the library
Adding this dependency to your application levelbuild.gradle: dependencies { compile 'com.github.clans:fab:1.6.4'} Now, we have two objects calledFloatingActionMenuandFloatingActionButtonto build this layout.
Some important features
FloatingActionMenuhas some attributes in xml that we have to pay attention:
fab:menu_fab_label: Label for Menu button
fab_colorNormal,fab_colorPressed,fab_colorRipple: Change button color based on it's status.
fab_showAnimation,fab_hideAnimation: Animation when menu expand/collapse.
menu_labels_position: Position of buttons label (left/right).
//handling menu status (open or close) fam.setOnMenuToggleListener(new FloatingActionMenu.OnMenuToggleListener() { @Override public void onMenuToggle(boolean opened) { if (opened) { showToast("Menu is opened"); } else { showToast("Menu is closed"); } } });
//handling each floating action button clicked fabDelete.setOnClickListener(onButtonClick()); fabEdit.setOnClickListener(onButtonClick()); fabAdd.setOnClickListener(onButtonClick());
fam.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (fam.isOpened()) { fam.close(true); } } }); }
