Tutorial to TabLayout trong Android Trong tut ny mnh lm tab layout theo kiu mi tab ng vi 1 activity, qun l cc activity

trn qua 1 activity chnh (act ny s dng tabHost). Cch ny thun tin khi mi tab x l nhng act ring r ca ngi dng. Step1: Create 1 project tn HelloTabWidget Step2: to cc activity ng vi cc tab, cn activity HelloTabWidgetActivity qun l tab s vit sau.
tab artist, albums, songs. V d: public class ArtistsActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView textview = new TextView(this); textview.setText("This is the Artists tab"); setContentView(textview);

Ta to 3 activity ArtistsActivity, AlbumsActivity, v SongsActivity ln lt ng vi

Activity trn ch n gin set 1 dng text lm ni dung cho tab artist, cc activity cho albums, songs cng tng t. To xong 3 activity ny, 1 bc cn lm l khai bo 3 ci activity ny vo trong manifest.xml, ta thm on code ny vo gia cp th <application> </application>:

<activity android:name=".AlbumsActivity" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar" > </activity> <activity android:name=".ArtistsActivity" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar" > </activity> <activity android:name=".SongsActivity" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar" > </activity> Thanh nin no lm theo tut trn google doc m b crash th c th l do thiu on code trn.

Step3: Lin quan n phn giao din cho mi tab, ta chun b cho mi tab 2 ci icon, 1 cho trng hp selected, 1 cho trng hp unselected. Trong doc cng c ring 1 tut thit k icon. Thng thng, icon cho selected chn tng mu ti, icon cho unselected chn tng mu sng cho d nhn, d gy ch :D. Mi tab cn 2 icon, nh trong tut ny c 3 tab, ta chun b 6 icon, t trong /res/drawable/ bao gm: Ic_tab_albums_grey.png Ic_tab_albums_white.png Ic_tab_artists_grey.png Ic_tab_artists_white.png Ic_tab_songs_grey.png Ic_tab_songs_white.png Cng trong folder res/drawable ny , c n 3 file xml qun l ni dung mi tab, di y l v d v file ic_tab_albums.xml cho tab artits, :

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <!-- When selected, use grey --> <item android:drawable="@drawable/ic_tab_albums_grey" android:state_selected="true" /> <!-- When not selected, use white--> <item android:drawable="@drawable/ic_tab_albums_white" /> </selector>
2 file ic_tab_artists.xml, ic_tab_songs.xml cng tng t . Step 4: File main.xml:
<?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="5dp"> <TabWidget

android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="5dp" /> </LinearLayout> </TabHost>

Nh cc thanh nin thy th trong ny c s dng tabHost, tabWidget, 2 ci ny s c handle trong HelloTabWidgetActivity. File main.xml ny th hin cc tab v c 1 navigation qua li gia cc tab. Th LinearLayout cn v tr ca TabWidget(ci ny dng navigation) v FrameLayout (ci ny th hin ni dung ca tab). TabHost s dng cc id tabs(trong TabWidget), id tabcontent(trong FrameLayout) nhng ni dung vo cc th ny. Step5: H l lc code ci activity chnh HelloTabWidgetActivity, class ny phi k tha TabActivity. Method onCreate() c code nh sau:
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Resources res = TabHost tabHost TabHost.TabSpec Intent intent; getResources(); // Resource object to get Drawables = getTabHost(); // The activity TabHost spec; // Resusable TabSpec for each tab // Reusable Intent for each tab

// Create an Intent to launch an Activity for the tab (to be reused) intent = new Intent().setClass(this, ArtistsActivity.class); // Initialize a TabSpec for each tab and add it to the TabHost spec = tabHost.newTabSpec("artists").setIndicator("Artists", res.getDrawable(R.drawable.ic_tab_artists)) .setContent(intent); tabHost.addTab(spec); // Do the same for the other tabs intent = new Intent().setClass(this, AlbumsActivity.class); spec = tabHost.newTabSpec("albums").setIndicator("Albums", res.getDrawable(R.drawable.ic_tab_albums)) .setContent(intent); tabHost.addTab(spec);

intent = new Intent().setClass(this, SongsActivity.class); spec = tabHost.newTabSpec("songs").setIndicator("Songs", res.getDrawable(R.drawable.ic_tab_songs)) .setContent(intent); tabHost.addTab(spec); } tabHost.setCurrentTab(2);

Method ny dng text v icon cho mi tab, ng thi gn n vi activity tng ng. Mi tab c to vi on code ny: intent = new Intent().setClass(this, SongsActivity.class); spec = tabHost.newTabSpec("songs").setIndicator("Songs", res.getDrawable(R.drawable.ic_tab_songs)) .setContent(intent); tabHost.addTab(spec); intent dng set content cho tab,nn n c setClass vi ci activity tng ng. spect c kiu TabHost.TabSpec, n dng gn cc thuc tnh cho tab, trong v d trn ta new 1 tab tn songs bng newTabSpec(songs), ri gn nh danh, icon , content cho n qua cch gi ln lt l setIndicator, getDrawable, setContent( y l lc ci intent c dng). Gn xong cc th cho tab ri th add n vo tabHost thi: dng ci ny nh tabHost.addTab(spec) Ci tabHost kiu nh ci gc, cn cc tab ging cc cnh, th nn lc mnh to tab mi vi cc thuc tnh mi, add tab mi vo mnh u gi cc hm ca tabHost. Step7: Sa activity chnh trong manifest.xml thnh nh sau:
<activity android:name=".HelloTabWidget" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar">

Ci ny b tiu ca application (NoTitleBar m), nhm ginh nhiu khong trng cho tab hn thi. Step8: Run no :D