Android Working with Tab-bar and Navi Bar

In this article, I am sharing how to create a Tab bar activity in android into the top of the screen 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 tab-bar and Navi-bar tutorial follow the step to implement its

Android Design working with Tab-bar and Navi Bar

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.

 

 

 

 

 

 

 

 

 

 

 

 

Step 4: Open Your  activity_home  XML File And add these code

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.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" />

    <android.support.design.widget.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" />

</android.support.v4.widget.DrawerLayout>

Step 5: Create an XML file  app_bar_home and add these code.

<android.support.design.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="com.caprispine.caprispinestaff.Therapist.Therapist_Home">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.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" />
        <android.support.design.widget.TabLayout
            android:id="@+id/Home_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.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"  />
</android.support.design.widget.CoordinatorLayout>

Step 6 : Create a XML file nav_header_home  add these code .

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.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" />

    <android.support.design.widget.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" />

</android.support.v4.widget.DrawerLayout>

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;
    }

 

 

 

Facebooktwitterredditpinterestlinkedinmail
Recommended
Hii Everyone in this tutorial I am sharing how to…