This post is an example of implementing a tab layout in Android using a TabActivity class.
The TabActivity class is deprecated since version 3.0 Honeycomb, then you should use ActionBar as I’ll write in a next post.
- create an Android project called TabLayout, a package eu.lucazanini and an activity TabLayoutActivity.java
- edit the file AndroidManifest.xml, it is the default one with the addition of 2 new activity
123456789101112131415161718192021222324<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"package="eu.lucazanini"android:versionCode="1"android:versionName="1.0" ><uses-sdk android:minSdkVersion="15" /><applicationandroid:icon="@drawable/ic_launcher"android:label="@string/app_name" ><activityandroid:name=".TabLayoutActivity"android:label="@string/app_name" ><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity><activity android:name="Tab1Activity"></activity><activity android:name="Tab2Activity"></activity></application></manifest>
- edit the file /res/values/strings.xml, to manage the labels
12345678<?xml version="1.0" encoding="utf-8"?><resources><string name="app_name">TabLayout</string><string name="label1">one</string><string name="label2">two</string><string name="body1"> body one</string><string name="body2">body two</string></resources>
- edit the file res/layout/main.xml, which shows in particular, TabHost, TabWidget and FrameLayout, note that the values of id are standard (tabhost, tabs and tabcontent)
123456789101112131415161718192021222324252627282930<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><TabHostxmlns:android="http://schemas.android.com/apk/res/android"android:id="@android:id/tabhost"android:layout_width="fill_parent"android:layout_height="fill_parent" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><TabWidgetandroid:id="@android:id/tabs"android:layout_width="fill_parent"android:layout_height="wrap_content" /><FrameLayoutandroid:id="@android:id/tabcontent"android:layout_width="fill_parent"android:layout_height="fill_parent" /></LinearLayout></TabHost></LinearLayout>
- create the files res/layout/tab1.xml and res/layout/tab2.xml, representing the contents of 2 tabs
123456789101112131415<?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"android:gravity="center"><TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="@string/body1" /></LinearLayout>123456789101112131415<?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"android:gravity="center"><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="@string/body2" /></LinearLayout>
- edit the class TabLayoutActivity.java, note that the labels of the tabs will be capitalized and that eventually you can put an icon with the method setIndicator (CharSequence label, icon Drawable) of the class TabHost.TabSpec
123456789101112131415161718192021222324252627282930313233package eu.lucazanini;import android.app.TabActivity;import android.content.Intent;import android.os.Bundle;import android.widget.TabHost;import android.widget.TabHost.TabSpec;public class TabLayoutActivity extends TabActivity {@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);TabHost tabHost = getTabHost();String label1 = getResources().getString(R.string.label1);TabSpec spec1 = tabHost.newTabSpec(label1);spec1.setIndicator(label1);Intent intent1 = new Intent(this, Tab1Activity.class);spec1.setContent(intent1);tabHost.addTab(spec1);String label2 = getResources().getString(R.string.label2);TabSpec spec2 = tabHost.newTabSpec(label2);spec2.setIndicator(label2);Intent intent2 = new Intent(this, Tab2Activity.class);spec2.setContent(intent2);tabHost.addTab(spec2);}}
- create the classes Tab1Activity.java and Tab2Activity.java
1234567891011121314package eu.lucazanini;import android.app.Activity;import android.os.Bundle;public class Tab1Activity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.tab1);}}1234567891011121314package eu.lucazanini;import android.app.Activity;import android.os.Bundle;public class Tab2Activity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.tab2);}}
- launch the app
5 replies on “Tab Layout in Android”
Ciao, ho eseguito passo, passo il codice del Tab Layout in Android, ma non funziona. Nella classe TabLayoutActivity.java evidenzia degli errori sulle label1 e label2 (cannot be resolved or is not a field). Avresti il codice completo?
Grazie!
Non ho più il codice originale.
L’errore è su “R.string.label1” e “R.string.label2”?
label1 e label2 sono definiti nel file strings.xml, è possibile che il problema sia qui.
Puoi anche pulire e ricompilare il progetto, in eclipse sotto il menù Project.
Le versioni più recenti del plugin ADT di eclipse creano differenti file xml, quindi se usi, come è probabile, una versione più recente devi tenere conto di questo.
Settings
Le versioni più recenti del plugin creano un file res/menu/main.xml con la seguente riga:
android:title=”@string/action_settings”
per cui nel file res/values/strings.xml devi aggiungere:
E’ anche possibile che la riga 8 del file res/layout/main.xml debba essere eliminata.
ciao, sapresti dirmi come fare a creare un accordion invece?
Non conosco accordion, potrei vedere di farci un post in futuro, ma non posso prometterti nulla sui tempi.