Android Working with Top Tabbar and Navigation Drawer
In this article, I am sharing how to create an Android Working with Top Tabbar and Navigation Drawer. and used swap to change. Its a very easy and nice UI Design in android. And used android Navi bar implication in android with a drawer sidebar in android
Let’s start on this topic Android Working with Top Tabbar and Navigation Drawer tutorial follow the step to implement its.
Android Working with Top Tabbar and Navi Drawer.
Step 1: First one to Start Android Studio
Step 2 : Seconds step to Create a New Project Project ClickOn ==> File ==> NEW ==> New Project
Step 3: After create on your project open your java file and XML file and you can just copy the code and paste on your file and run your project.
Add this Dependency
dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'androidx.appcompat:appcompat:1.1.0' implementation 'androidx.constraintlayout:constraintlayout:1.1.3' testImplementation 'junit:junit:4.12' implementation 'com.google.android.material:material:1.0.0-beta01' androidTestImplementation 'androidx.test:runner:1.2.0' androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0' }
Step 4: Open Your activity_home XML File And add these code
<?xml version="1.0" encoding="utf-8"?> <androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"> <include layout="@layout/app_bar_therapist_home" android:layout_width="match_parent" android:layout_height="match_parent" /> <com.google.android.material.navigation.NavigationView android:id="@+id/nav_view" android:layout_width="180dp" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:itemIconTint="@color/colorPrimary" app:itemTextColor="@color/colorPrimary" app:headerLayout="@layout/nav_header_therapist_home" app:menu="@menu/activity_therapist_home_drawer" /> </androidx.drawerlayout.widget.DrawerLayout>
Step 5: Create an XML file app_bar_home and add these code.
<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout 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" android:fitsSystemWindows="true" tools:context=".Home"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> <com.google.android.material.tabs.TabLayout android:id="@+id/Home_tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill"/> </com.google.android.material.appbar.AppBarLayout> <androidx.viewpager.widget.ViewPager android:id="@+id/Home_Page_View" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
Step 6 : Create a XML file nav_header_home add these code .
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="120dp" android:background="@color/white" android:gravity="bottom" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Capri Spine Clinic" android:textColor="@color/colorAccent" android:textStyle="bold" android:textAppearance="?android:textAppearanceMedium"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:textColor="@color/black" android:text="A Non-Surgical Approach" android:textAppearance="?android:textAppearanceSmall"/> </LinearLayout>
Step: 7 create a menu Layout @menu/activity_therapist_home_drawer
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/nav_RProfile" android:icon="@drawable/icon_user" android:title="Profile" /> <item android:id="@+id/nav_Financial" android:icon="@drawable/financialimage" android:title="My Financial" /> <item android:id="@+id/nav_RReport" android:icon="@drawable/report" android:title="My Visitor" /> <item android:id="@+id/nav_RComplaint" android:icon="@drawable/edit" android:title="My Complaint" /> <item android:id="@+id/nav_Resource" android:icon="@drawable/booking2" android:title="My Resource" /> <item android:id="@+id/nav_SOSFeedback" android:icon="@drawable/siren" android:title="Sos Feedback" /> <item android:id="@+id/nav_ServicesProvider" android:icon="@drawable/servicesfilled" android:title="Services" /> <item android:id="@+id/nav_Rule" android:icon="@drawable/rules_filled" android:title="Rule" /> <item android:id="@+id/nav_Alert" android:icon="@drawable/warning" android:title="Alert" /> </group> <item android:title="Communicate"> <menu> <item android:id="@+id/nav_RChangePassword" android:icon="@drawable/key1" android:title="Change Password" /> <item android:id="@+id/nav_RLogout" android:icon="@drawable/icons_exit" android:title="Log out" /> </menu> </item> </menu>
Step8: Open your Home. Java class and used these code
public class Home extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener { private TabLayout tabLayout; private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_therapist__home); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); viewPager = (ViewPager) findViewById(R.id.Home_Page_View); setupViewPager(viewPager); tabLayout = (TabLayout) findViewById(R.id.Home_tabs); tabLayout.setupWithViewPager(viewPager); DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle( this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); drawer.setDrawerListener(toggle); toggle.syncState(); NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view); navigationView.setNavigationItemSelectedListener(this); } @Override public void onBackPressed() { DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); if (drawer.isDrawerOpen(GravityCompat.START)) { drawer.closeDrawer(GravityCompat.START); } else { Intent intent = new Intent(Intent.ACTION_MAIN); intent.addCategory(Intent.CATEGORY_HOME); intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); startActivity(intent); super.onBackPressed(); } } private void setupViewPager(ViewPager viewPager) { ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.addFragment(new Forum(), "Forum"); adapter.addFragment(new MySpace(), "My Space"); adapter.addFragment(new Community(), "Community"); 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 addFragment(Fragment fragment, String title) { mFragmentList.add(fragment); mFragmentTitleList.add(title); } @Override public CharSequence getPageTitle(int position) { return mFragmentTitleList.get(position); } } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } @SuppressWarnings("StatementWithEmptyBody") @Override public boolean onNavigationItemSelected(MenuItem item) { // Handle navigation view item clicks here. int id = item.getItemId(); if (id == R.id.nav_RProfile) { Intent intent=new Intent(Therapist_Home.this,Profile.class); startActivity(intent); finish(); } else if (id == R.id.nav_Financial) { // Intent intent=new Intent(Therapist_Home.this,Financial_detail.class); // startActivity(intent); } else if (id == R.id.nav_RReport) { // Intent intent=new Intent(Therapist_Home.this,Report.class); // startActivity(intent); // finish(); } else if (id == R.id.nav_RComplaint) { // Intent intent=new Intent(Therapist_Home.this,My_Complaint.class); // startActivity(intent); // finish(); } else if (id == R.id.nav_Resource) { // Intent intent=new Intent(Therapist_Home.this,MyResource.class); // startActivity(intent); // finish(); } else if (id == R.id.nav_SOSFeedback) { // Intent intent=new Intent(Therapist_Home.this,SOSFeedback.class); // startActivity(intent); // finish(); } else if (id == R.id.nav_ServicesProvider) { // Intent intent=new Intent(Therapist_Home.this,ServiceProvider.class); // startActivity(intent); } else if (id == R.id.nav_Rule) { } else if (id == R.id.nav_Alert) { } else if (id == R.id.nav_RChangePassword) { } else if (id == R.id.nav_RLogout) { } DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); drawer.closeDrawer(GravityCompat.START); return true; }
Step 9: Create a fragment Forum, MySpace, Community these include in your Home activity
public class Forum extends Fragment { public Forum() { // 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 View rootView = inflater.inflate(R.layout.fragment_forum, container, false); // getActivity().getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); return rootView; }
Step 9.1
public class MySpace extends Fragment { public MySpace() { // 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 View rootView = inflater.inflate(R.layout. fragment_my_space, container, false); // getActivity().getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); return rootView; }