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.
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.
private Display m_display; private int m_nScreenW, //screen size m_nScreenH;
// -- check screen orientation -- // m_display = getWindowManager().getDefaultDisplay(); m_nScreenW = m_display.getWidth(); m_nScreenH = m_display.getHeight(); // create interface View m_vForm; if (m_nScreenW <= m_nScreenH) m_vForm = _createTABForm(); // portrait interface else m_vForm = _createEmptyForm(); // landscape interface // show the panel on the screen setContentView(m_vForm);
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:
/** Create the TAB interface */ private ViewGroup _createTABForm() { // construct the TAB Host TabHost tabHost = new TabHost(this); tabHost.setLayoutParams( new LinearLayout.LayoutParams( LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); // the tabhost needs a tabwidget, that is a container for the visible tabs TabWidget tabWidget = new TabWidget(this); tabWidget.setId(android.R.id.tabs); tabHost.addView(tabWidget, new LinearLayout.LayoutParams( LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); // the tabhost needs a frame layout for the views associated with each visible tab FrameLayout frameLayout = new FrameLayout(this); frameLayout.setId(android.R.id.tabcontent); frameLayout.setPadding(0, 65, 0, 0); tabHost.addView(frameLayout, new LinearLayout.LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); // setup must be called if you are not initialising the tabhost from XML tabHost.setup(); // create the tabs TabSpec ts1 = tabHost.newTabSpec("TAB_TAG_1"); ts1.setIndicator("TAB-1"); ts1.setContent(new TabHost.TabContentFactory(){ public View createTabContent(String tag) { // -- this tab contains multiple control grouped in a panel -- // LinearLayout panel = new LinearLayout(DynTABSample.this); panel.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT)); panel.setOrientation(LinearLayout.VERTICAL); // Userid : label and text field TextView lblUserid = new TextView(DynTABSample.this); lblUserid.setText("The label above the EditText"); lblUserid.setTextSize(TypedValue.COMPLEX_UNIT_SP, 10f); lblUserid.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT)); EditText ttfUserid = new EditText(DynTABSample.this); ttfUserid.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT)); // login button final Button btnLogin = new Button(DynTABSample.this); btnLogin.setText("Login"); btnLogin.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT)); btnLogin.setGravity(Gravity.CENTER); btnLogin.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { Log.d("pocketmagic.net", "_createForm click but"); } }); // actually adding the views to the panel // userid panel.addView(lblUserid); panel.addView(ttfUserid); // loginbutton panel.addView(btnLogin); return panel; } //TAB 1 done }); tabHost.addTab(ts1); TabSpec ts2 = tabHost.newTabSpec("TAB_TAG_2"); ts2.setIndicator("TAB-2"); ts2.setContent(new TabHost.TabContentFactory(){ public View createTabContent(String tag) { // -- this tab contains a single control - the listview -- // ListView ls1 = new ListView(DynTABSample.this); ArrayAdapter<String> adapter = new ArrayAdapter<String>( DynTABSample.this, android.R.layout.simple_list_item_1, new String[]{"item1","item2","item3","item4","item5","item6","item7"}); ls1.setAdapter(adapter); ls1.setOnCreateContextMenuListener(DynTABSample.this); return ls1; } }); tabHost.addTab(ts2); TabSpec ts3 = tabHost.newTabSpec("TAB_TAG_3"); ts3.setIndicator(" "); ts3.setContent(new TabHost.TabContentFactory(){ public View createTabContent(String tag) { // -- this tab contains a single control - a textview -- // TextView textAbout = new TextView(DynTABSample.this); 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"); textAbout.setTextSize(TypedValue.COMPLEX_UNIT_SP, 12f); textAbout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT)); return textAbout; } }); tabHost.addTab(ts3); // -- 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.icon)); return tabHost; }
Click here to download the source code.