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 39 times, 1 visits today)
facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail
Tagged on: