Android Navigation → Android Material Toolbar Tabs – Camposha

Android Navigation

Android Navigation

Android Material Toolbar Tabs

 

Android Material Tablayout Tabs. Hi.This is what we do here :

  • Clickable Material Tablayout Tabs.
  • Clicking a tab switches us to its corresponding fragments.
  • The fragments have different layouts with images.

Section 1 : Dependencies

Build.Gradle

  • Add dependencies for AppCompat and Design support libraries.
  • Our MainActivity shall derive from AppCompatActivity while we shall also use Floating action button from design support libraries.
apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.2"

    defaultConfig {
        applicationId "com.tutorials.hp.fixedtabs"
        minSdkVersion 15
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.2.1'
    compile 'com.android.support:design:23.2.1'
}

Section 2 : Our Fragments

Crime Fragment
  • Inflated from crime layout
  • Shall show crime image.
package com.tutorials.hp.fixedtabs;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class CrimeFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView=inflater.inflate(R.layout.crime_fragment,null);
        return rootView;
    }

    @Override
    public String toString() {
        return "Crime";
    }
}
Drama Fragment
  • Inflated from Drama layout
  • Shall show Drama image.
package com.tutorials.hp.fixedtabs;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class DramaFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView=inflater.inflate(R.layout.drama_fragment,null);
        return rootView;
    }

    @Override
    public String toString() {
        return "Drama";
    }
}
Science Fiction Fragment
  • Inflated from Science Fiction layout
  • Shall show Science Fiction image.
package com.tutorials.hp.fixedtabs;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ScienceFictionFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View rootView=inflater.inflate(R.layout.science_fragment,null);
        return rootView;
    }

    @Override
    public String toString() {
        return "Science";
    }
}
Section 3 : Pager Adapter
  • Derives from FragmentPagerAdapter.
  • Returns a page or fragment,total number of fragments/pages and page/fragment title.
package com.tutorials.hp.fixedtabs;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;

public class MyPagerAdapter extends FragmentPagerAdapter {

    ArrayList<Fragment> pages=new ArrayList<>();

    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return pages.get(position);
    }

    @Override
    public int getCount() {
        return pages.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return pages.get(position).toString();
    }

    public void addPage(Fragment f)
    {
        pages.add(f);
    }
}
Section 4: MainActivity
  • Launcher activity.
  • References ViewPager and Tablayout.
  • Adds fragments to our FragmentPagerAdapter instance.
  • Handles Tablyout Selection Listener.
package com.tutorials.hp.fixedtabs;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    private TabLayout tab;
    private ViewPager vp;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        vp= (ViewPager) findViewById(R.id.viewpager);
        addPages(vp);

        tab= (TabLayout) findViewById(R.id.tabs);
        tab.setTabGravity(TabLayout.GRAVITY_FILL);
        tab.setupWithViewPager(vp);
        tab.setOnTabSelectedListener(tabSelectedListener(vp));

    }

  private void addPages(ViewPager viewPager)
  {
     MyPagerAdapter myPagerAdapter=new MyPagerAdapter(getSupportFragmentManager());
      myPagerAdapter.addPage(new CrimeFragment());
      myPagerAdapter.addPage(new DramaFragment());
      myPagerAdapter.addPage(new ScienceFictionFragment());

      vp.setAdapter(myPagerAdapter);
  }

    private TabLayout.OnTabSelectedListener tabSelectedListener(final  ViewPager pager)
    {
        return  new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                pager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        };
    }

}

Section 5: LAYOUTS

ActivityMain.xml
  • To contain our ContentMain.xml.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    
    
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_fitsSystemWindows="true"
    tools_context="com.tutorials.hp.fixedtabs.MainActivity">

    <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/tabs"
            android_layout_width="match_parent"
            android_layout_height="wrap_content"

           />

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

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android_id="@+id/fab"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_gravity="bottom|end"
        android_layout_margin="@dimen/fab_margin"
        android_src="@android:drawable/ic_dialog_email" />

    <android.support.v4.view.ViewPager
        android_id="@+id/viewpager"
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        app_layout_behavior="@string/appbar_scrolling_view_behavior"
        />

</android.support.design.widget.CoordinatorLayout>
ContentMain.xml
  • To hold our adapterview.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    
    
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    app_layout_behavior="@string/appbar_scrolling_view_behavior"
    tools_context="com.tutorials.hp.fixedtabs.MainActivity"
    tools_showIn="@layout/activity_main">

    <TextView
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_text="Hello World!" />
</RelativeLayout>
Crime Fragment .xml
  • Inflated to Crime Fragment.
  • Background is image.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    android_orientation="vertical" android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_background="@drawable/red"
    >

</LinearLayout>
Drama Fragment.xml
  • Inflated to Drama Fragment.
  • Background is image.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    android_orientation="vertical" android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_background="@drawable/breaking"
    >

</LinearLayout>
Science Fiction Fragment.xml
  • Inflated to Science Fiction Fragment.
  • Background is image.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    android_orientation="vertical" android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_background="@drawable/thrones"
    >

</LinearLayout>

Leave a Reply

Your email address will not be published. Required fields are marked *

X