Hello Guys.Today we discuss about Simple Clickable Android tabs with ListViews.Suitable for beginners. If you would do with more explanations then what about our video here :
SECTION 1 : Our MainActivity
|
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
package com.tutorials.tabswithlistview; import android.app.ActionBar; import android.app.ActionBar.Tab; import android.app.FragmentTransaction; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.view.Menu; public class MainActivity extends FragmentActivity implements ActionBar.TabListener { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //GET AND SETUP ACTIONBAR final ActionBar ab=getActionBar(); ab.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); //ADD THE TABS ab.addTab(ab.newTab().setText("Man Utd").setTabListener(this)); ab.addTab(ab.newTab().setText("Chelsea").setTabListener(this)); ab.addTab(ab.newTab().setText("Arsenal").setTabListener(this)); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public void onTabReselected(Tab arg0, FragmentTransaction arg1) { // TODO Auto-generated method stub } @Override public void onTabSelected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub //FIRST TAB SHOW MAN UTD if(tab.getPosition()==0) { ManUtdFragment mu=new ManUtdFragment(); getSupportFragmentManager().beginTransaction().replace(R.id.container, mu).commit(); }else if(tab.getPosition()==1) { ChelseaFragment c=new ChelseaFragment(); getSupportFragmentManager().beginTransaction().replace(R.id.container, c).commit(); }else if(tab.getPosition()==1) { ArsenalFragment a=new ArsenalFragment(); getSupportFragmentManager().beginTransaction().replace(R.id.container, a).commit(); } } @Override public void onTabUnselected(Tab arg0, FragmentTransaction arg1) { // TODO Auto-generated method stub } } |
SECTION 2 : Our Fragments
Man Utd Fragment
To display man utd players.
|
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 |
package com.tutorials.tabswithlistview; import android.os.Bundle; import android.support.v4.app.ListFragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ListAdapter; import android.widget.ListView; import android.widget.Toast; public class ManUtdFragment extends ListFragment{ String[] players={"Ander Herera","Wayne Rooney","David DeGea","Robin Van Persie", "Juan Mata","Michael Carrick","Chris Smalling","Phil Jones"}; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // TODO Auto-generated method stub View rootView=inflater.inflate(R.layout.manu, container,false); //CREATE ADAPTER AND SET IT TO LV ListAdapter adapter=new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1,players); setListAdapter(adapter); return rootView; } @Override public void onListItemClick(ListView l, View v, int position, long id) { // TODO Auto-generated method stub Toast.makeText(getActivity(), getListView().getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show(); } } |
Chelsea Fragment
Will display Chelsea Players in a ListFragment.
We have a string array which will populate our ListView which will define in thechelsea.xml layout.
|
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 |
package com.tutorials.tabswithlistview; import android.os.Bundle; import android.support.v4.app.ListFragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ListAdapter; import android.widget.ListView; import android.widget.Toast; public class ChelseaFragment extends ListFragment { String[] players={"Thibout Courtouis","John Terry","Oscar","Eden Hazard","Diego Costa","Petr Cech", "Didier Drogba","Branislav Ivanovic"}; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // TODO Auto-generated method stub View rootView=inflater.inflate(R.layout.chelsea, container,false); //CREATE ADAPTER AND SET IT TO LV ListAdapter adapter=new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1,players); setListAdapter(adapter); return rootView; } @Override public void onListItemClick(ListView l, View v, int position, long id) { // TODO Auto-generated method stub Toast.makeText(getActivity(), getListView().getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show(); } } |
Arsenal Fragment
This class will be deriving from ListFragment:
That ListFragment will render our Arsenal Players in a ListView. It will inflate the associated
arsenal layout.
|
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 |
package com.tutorials.tabswithlistview; import android.os.Bundle; import android.support.v4.app.ListFragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ListAdapter; import android.widget.ListView; import android.widget.Toast; public class ArsenalFragment extends ListFragment { String[] players={"Aaron Ramsey","Jack Wilshere","Mesut Ozil","Alexis Sanchez", "Per Metesacker","Keiron Gibbs","Laurent Koscielny","Olivier Giroud"}; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // TODO Auto-generated method stub View rootView=inflater.inflate(R.layout.arsenal, container,false); //CREATE ADAPTER AND SET IT TO LV ListAdapter adapter=new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1,players); setListAdapter(adapter); return rootView; } @Override public void onListItemClick(ListView l, View v, int position, long id) { // TODO Auto-generated method stub Toast.makeText(getActivity(), getListView().getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show(); } } |
SECTION 3 : Our Layouts
MainActivity Layout
Our main activity layout.
Basically empty.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<RelativeLayout android_id="@+id/container" 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" tools_context=".MainActivity" > </RelativeLayout> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout android_layout_width="match_parent" android_layout_height="match_parent" android_orientation="vertical" > <ListView android_id="@id/android:list" android_layout_width="match_parent" android_layout_height="wrap_content" > </ListView> </LinearLayout> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout android_layout_width="match_parent" android_layout_height="match_parent" android_orientation="vertical" > <ListView android_id="@id/android:list" android_layout_width="match_parent" android_layout_height="wrap_content" > </ListView> </LinearLayout> |
Man Utd Fragment Layout
Will display Man Utd data in a ListView.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout android_layout_width="match_parent" android_layout_height="match_parent" android_orientation="vertical" > <ListView android_id="@id/android:list" android_layout_width="match_parent" android_layout_height="wrap_content" > </ListView> </LinearLayout> |
Our Manifest
We specify our minimum sdk version.
|
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 |
<?xml version="1.0" encoding="utf-8"?> <manifest package="com.tutorials.tabswithlistview" android_versionCode="1" android_versionName="1.0" > <uses-sdk android_minSdkVersion="19" android_targetSdkVersion="19" /> <application android_allowBackup="true" android_icon="@drawable/ic_launcher" android_label="@string/app_name" android_theme="@style/AppTheme" > <activity android_name="com.tutorials.tabswithlistview.MainActivity" android_label="@string/app_name" > <intent-filter> <action android_name="android.intent.action.MAIN" /> <category android_name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> |
| Resource | Link |
|---|---|
| Video Tutorial | Youtube Tutorial |
Best Regards.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
