How to Make Android Apps 27
In this tutorial I provide an Android Material Design sliding tab example program and cover ViewPager and FragmentPagerAdapter. You are going to need these 2 files SlidingTabLayout.java and SlidingTabStrip.java.
This will allow us to use the newest form of sliding tabs that is also backwards compatible. I did my best to keep everything as simple as possible so that you can use this code in your applications immediately. The code follows the video below.
If you like videos like this, it helps to tell Google with a click here [googleplusone]
Code From the Video
TabFragment1.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
package com.newthinktank.derekbanas.slidingtab; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; // Same for TabFragment2 and TabFragment3 except change this // R.layout.tab_fragment_1 below public class TabFragment1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // TODO Auto-generated method stub View view = inflater.inflate(R.layout.tab_fragment_1, container, false); return view; } } |
tab_fragment_1.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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="match_parent" android:orientation="vertical"> <!-- Same as tab_fragment_2.xml and tab_fragment_2.xml except change the text below --> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Fragment 1" android:textSize="16dp" android:padding="5dp"/> </LinearLayout> |
MyFragmentPagerAdapter.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
package com.newthinktank.derekbanas.slidingtab; import android.content.Context; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; public class MyFragmentPagerAdapter extends FragmentPagerAdapter { // Holds tab titles private String tabTitles[] = new String[] { "Frag #1", "Frag #2", "Frag #3" }; private Context context; public MyFragmentPagerAdapter(FragmentManager fm, Context context) { super(fm); this.context = context; } @Override public int getCount() { return 3; } // Return the correct Fragment based on index @Override public Fragment getItem(int position) { if(position == 0){ return new TabFragment1(); } else if(position == 1) { return new TabFragment2(); } else if(position == 2) { return new TabFragment3(); } return null; } @Override public CharSequence getPageTitle(int position) { // Return the tab title to SlidingTabLayout return tabTitles[position]; } } |
activity_main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?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="match_parent" android:orientation="vertical"> <!-- The sliding tab --> <com.newthinktank.derekbanas.slidingtab.stab.SlidingTabLayout android:id="@+id/sliding_tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> <!-- The pager that allows us to swipe between fragments --> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0px" android:layout_weight="1" android:background="@android:color/white" /> </LinearLayout> |
MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
package com.newthinktank.derekbanas.slidingtab; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import com.newthinktank.derekbanas.slidingtab.stab.SlidingTabLayout; public class MainActivity extends FragmentActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Layout manager that allows the user to flip through the pages ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); // getSupportFragmentManager allows use to interact with the fragments // MyFragmentPagerAdapter will return a fragment based on an index that is passed viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), MainActivity.this)); // Initialize the Sliding Tab Layout SlidingTabLayout slidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs); // Connect the viewPager with the sliding tab layout slidingTabLayout.setViewPager(viewPager); } } |
Leave a Reply