The way to do user interfaces can be different from a platform to another. On Android, you can define the interface using an XML.
For me the best approach is to create the controls on the fly, using the code, instead of some external scripting files.
The reason for this if, of course, the gain in flexibility. For a project I'm currently working on, I had to create a custom TAB Control. I've decided to drop the XML and create everything from the code.

android_tab_control_1 android_tab_control_2 android_tab_control_3

In the "Overridden" onCreate, I check the screen size, to determine whether the android is on landscape or portrait and create a different interface for each case.

  1.  
  2. private Display m_display;
  3. private int m_nScreenW, //screen size
  4. m_nScreenH;
  5.  
  1.  
  2. // -- check screen orientation -- //
  3. m_display = getWindowManager().getDefaultDisplay();
  4. m_nScreenW = m_display.getWidth();
  5. m_nScreenH = m_display.getHeight();
  6. // create interface
  7. View m_vForm;
  8. if (m_nScreenW <= m_nScreenH)
  9. m_vForm = _createTABForm(); // portrait interface
  10. else
  11. m_vForm = _createEmptyForm(); // landscape interface
  12. // show the panel on the screen
  13. setContentView(m_vForm);
  14.  

To create the TAB, there are a few steps we need to follow:
1. create the tabHost and set its parameters
2. create the tabWidget, the container for the clickable tabs
3. create a frameLayout, to hold the views associated to each tab
4. create each tab, using the tabSpec class

To the first tab I'm adding a panel to hold multiple controls, the second tab a listview with few items, and the third tab gets an icon, and only holds a textView control. All in one the code is as follows:

  1.  
  2. /** Create the TAB interface */
  3. private ViewGroup _createTABForm() {
  4. // construct the TAB Host
  5. TabHost tabHost = new TabHost(this);
  6. tabHost.setLayoutParams(
  7. new LinearLayout.LayoutParams(
  8. LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
  9.  
  10. // the tabhost needs a tabwidget, that is a container for the visible tabs
  11. TabWidget tabWidget = new TabWidget(this);
  12. tabWidget.setId(android.R.id.tabs);
  13. tabHost.addView(tabWidget, new LinearLayout.LayoutParams(
  14. LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
  15.  
  16. // the tabhost needs a frame layout for the views associated with each visible tab
  17. FrameLayout frameLayout = new FrameLayout(this);
  18. frameLayout.setId(android.R.id.tabcontent);
  19. frameLayout.setPadding(0, 65, 0, 0);
  20. tabHost.addView(frameLayout, new LinearLayout.LayoutParams(
  21. LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
  22.  
  23. // setup must be called if you are not initialising the tabhost from XML
  24. tabHost.setup();
  25.  
  26. // create the tabs
  27. TabSpec ts1 = tabHost.newTabSpec("TAB_TAG_1");
  28. ts1.setIndicator("TAB-1");
  29. ts1.setContent(new TabHost.TabContentFactory(){
  30. public View createTabContent(String tag)
  31. {
  32. // -- this tab contains multiple control grouped in a panel -- //
  33. LinearLayout panel = new LinearLayout(DynTABSample.this);
  34. panel.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
  35. LayoutParams.WRAP_CONTENT));
  36. panel.setOrientation(LinearLayout.VERTICAL);
  37. // Userid : label and text field
  38. TextView lblUserid = new TextView(DynTABSample.this);
  39. lblUserid.setText("The label above the EditText");
  40. lblUserid.setTextSize(TypedValue.COMPLEX_UNIT_SP, 10f);
  41. lblUserid.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
  42.  
  43. EditText ttfUserid = new EditText(DynTABSample.this);
  44. ttfUserid.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
  45.  
  46. // login button
  47. final Button btnLogin = new Button(DynTABSample.this);
  48. btnLogin.setText("Login");
  49. btnLogin.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
  50. btnLogin.setGravity(Gravity.CENTER);
  51. btnLogin.setOnClickListener(new View.OnClickListener() {
  52. public void onClick(View view) {
  53. Log.d("pocketmagic.net", "_createForm click but");
  54. }
  55. });
  56. // actually adding the views to the panel
  57. // userid
  58. panel.addView(lblUserid);
  59. panel.addView(ttfUserid);
  60. // loginbutton
  61. panel.addView(btnLogin);
  62.  
  63. return panel;
  64. } //TAB 1 done
  65. });
  66. tabHost.addTab(ts1);
  67.  
  68. TabSpec ts2 = tabHost.newTabSpec("TAB_TAG_2");
  69. ts2.setIndicator("TAB-2");
  70. ts2.setContent(new TabHost.TabContentFactory(){
  71. public View createTabContent(String tag)
  72. {
  73. // -- this tab contains a single control - the listview -- //
  74. ListView ls1 = new ListView(DynTABSample.this);
  75. ArrayAdapter<String> adapter = new ArrayAdapter<String>(
  76. DynTABSample.this,
  77. android.R.layout.simple_list_item_1,
  78. new String[]{"item1","item2","item3","item4","item5","item6","item7"});
  79. ls1.setAdapter(adapter);
  80. ls1.setOnCreateContextMenuListener(DynTABSample.this);
  81. return ls1;
  82. }
  83. });
  84. tabHost.addTab(ts2);
  85.  
  86. TabSpec ts3 = tabHost.newTabSpec("TAB_TAG_3");
  87. ts3.setIndicator(" ");
  88. ts3.setContent(new TabHost.TabContentFactory(){
  89. public View createTabContent(String tag)
  90. {
  91. // -- this tab contains a single control - a textview -- //
  92. TextView textAbout = new TextView(DynTABSample.this);
  93. textAbout.setText("About this sample\n\nThis is the Dynamic TAB control sample for Android.\n\n(C)2010 Radu Motisan\nradu.motisan@gmail.com\nwww.pocketmagic.net");
  94. textAbout.setTextSize(TypedValue.COMPLEX_UNIT_SP, 12f);
  95. textAbout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
  96. return textAbout;
  97. }
  98. });
  99. tabHost.addTab(ts3);
  100. // -- set the image for tab3, can be used after tab has been created too -- //
  101. ImageView iv = (ImageView)tabHost.getTabWidget().getChildAt(2).findViewById(android.R.id.icon);
  102. if (iv != null) iv.setImageDrawable(getResources().getDrawable(R.drawable.icon));
  103.  
  104. return tabHost;
  105. }
  106.  

Click here to download the source code.

(Visited 849 times, 1 visits today)
facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail
Tagged on:                 

56 thoughts on “Android dynamic TAB Control

  • December 23, 2011 at 10:13 am
    Permalink

    Dear Mr Radu Motisan!

    Sorry for sending so many mails, but I thought I have to ask this.

    May I know how to insert my own icon for the tabs?

    I have tried inserting my own png image(search.png) in the drawable folder and did the following changes which after I got an error(it force close the application, after a while it appeared as error in java coding).

    // — set the image for tab3, can be used after tab has been created too — //
    ImageView iv = (ImageView)tabHost.getTabWidget().getChildAt(2).findViewById(android.R.id.icon);
    if (iv != null) iv.setImageDrawable(getResources().getDrawable(R.drawable.search));

    Thank you for your patience and I really look forward for your reply as it is rather urgent right here.

    Best Regards,
    Weng Chiun

  • December 23, 2011 at 10:39 am
    Permalink

    Hi!
    I would like to function to the menu on Tab 2. Isit possible? can anyone help me ?

  • December 23, 2011 at 11:10 am
    Permalink

    Hi!
    I would like to add function to the menu on Tab2. can anyone help me?
    For example: if i click item1, i can call another java file.

  • December 23, 2011 at 11:30 am
    Permalink

    Dear Mr Radu Motisan,

    Just to update, I am now able to insert the image, but the sizing of the image doesn’t seem to be perfect. Could you tell me how to resize to the desired size?

    Thank you!

    Best Regards

  • January 5, 2012 at 2:30 am
    Permalink

    after sdk 3.0, create Tabhost with TabHost tabHost = new TabHost(this, null);

  • Pingback: Multiple errors trying to dynamically create a tab layout video

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>