Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Creating a Tabbed Dialog

Author: Rachee Singh
Published? true
FormatLanguage: WikiFormat

Problem:

Categorizing information display in an custom Dialog.

Solution:

Using a tabbed layout within a custom Dialog.

Discussion:

The custom dialog class implements the class Dialog.

	public class CustomDialog extends Dialog

The constructor of the class has to be initialized.

	 public CustomDialog(final Context context)
    	{
    	    super(context);
	
    	    setTitle("My First Custom Tabbed Dialog");
    	    setContentView(R.layout.custom_dialog_layout);

To create the 2 tabs, insert this code within the constructor. tab_image1 and tab_image2 are placed in /res/drawable. These images are placed on the tabs of the tabbed custom dialog.

        // get our tabHost from the xml
        TabHost tabHost = (TabHost)findViewById(R.id.TabHost01);
        tabHost.setup();
        
        // create tab 1
        TabHost.TabSpec spec1 = tabHost.newTabSpec("tab1");
        spec1.setIndicator("Profile", context.getResources().getDrawable(R.drawable.tab_image1));
        spec1.setContent(R.id.TextView01);
        tabHost.addTab(spec1);
        //create tab2
        TabHost.TabSpec spec2 = tabHost.newTabSpec("tab2");
        spec2.setIndicator("Profile", context.getResources().getDrawable(R.drawable.tab_image2));
        spec2.setContent(R.id.TextView02);
        tabHost.addTab(spec2);

This is a simple tabbed dialog. It required the addition of these few lines into the constructor's code. To implement something like a list view, a list view adapter would be required. There are immense possibilities to the kind of tabs that can be inserted based on the requirement of the application.

The XML code for a tabbed dialog would require <tabhost> tags enclosing the entire layout. Within these tags, the location of various parts of the tabbed dialog are placed. A frame layout has to be used to place the content of the different tabs. In this case, we are creating 2 tabs both with a scroll view containing text (stored in Strings.xml, named 'lorem_ipsum').

Here is the code for custom_dialog_layout.xml

<TabHost
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/TabHost01"
    android:layout_width="fill_parent"
    android:layout_height="500dip">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        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="wrap_content"
            android:padding="5dp">

		       <ScrollView android:id="@+id/ScrollView01"
			       android:layout_width="wrap_content" 
			       android:layout_height="200px">
		       
			       <TextView 
				       android:id="@+id/TextView01"
				       android:text="@string/lorem_ipsum"
				       android:layout_width="wrap_content" 
				       android:layout_height="wrap_content"
				       android:gravity="center_horizontal"
				       android:paddingLeft="15dip"
				       android:paddingTop="15dip"
				       android:paddingRight="20dip"
				       android:paddingBottom="15dip"/>

		    	</ScrollView>
      
      			<ScrollView android:id="@+id/ScrollView02"
			       android:layout_width="wrap_content" 
			       android:layout_height="200px">
		       
			       <TextView 
				       android:id="@+id/TextView02"
				       android:text="@string/lorem_ipsum"
				       android:layout_width="wrap_content" 
				       android:layout_height="wrap_content"
				       android:gravity="center_horizontal"
				       android:paddingLeft="15dip"
				       android:paddingTop="15dip"
				       android:paddingRight="20dip"
				       android:paddingBottom="15dip"/>

		    	</ScrollView>
    	</FrameLayout>
    </LinearLayout>
</TabHost>
jmartins 2016-04-15 10:07:02.169 I can't figure out the way to set text dynamically to this textview