Android

Android Layout Example with source code
Author : Ishtek

Setup Eclipse with Android ADT Plugin for test/code environment (by using Android API Level 7 and Emulator).
P.S- Above page is having around 14 images, download size could be around 700KB.

This Page and/or example code is using Android API Level 7 and tested using corresponding Emulator only.
For latest information please refer Android Official website.

Using Android API Level : 7 Creating and experimenting with different shapes and layouts using Google's Android API. I personally like Android Platform as part of carrying out my passion for creating some useful application for mobile platform /device based on Android Platform. To begin with I had written an article on this site on how to setup developement environment in own Laptop/Desktop personal computer and a simple program to start with. Now in this page I shall try to cover and also welcome readers of this page to join and help in anyways for solving few design and coding related tasks/assignments as follows: Let us create or at least try to create a very simple Android application for showing up various blocks with different length and width, and forming a visual apprearance on screen, similar to these layouts as shown in below images.          To start with Layout - 1 : I think there can be many ways to create these boxes, one way I think is by using canvas from Android API. Source code for this example application is not yet ready to publish on this page. So any suggestions from readers/visitors is welcome. Once anyone (including myself) is done with the coding and appropriate design, and if interested can share application source code by using the comment section below. Till then Happy thinking time !!! - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Today, 29th October 2010, I have managed to create the above layout - 1 , using Android 2.2 Emulator (using Android API 8.0 version), and I would like to update this page with the source code that I have written and tested on my Laptop. Idea here is very simple, I have used TableLayout, TableRow, SurfaceView for layering various colored instances of SurfaceView on TableRows in a TableLayout. Please be noted that this source code is something I have written based on my understanding of this Android OS/Platform and its API, there will be definitely many ways to achieve this layout in the example above, and I welcome any comments, be it positive , negative, improvement and any sort, and this way I shall try to improve this concept with you help of course. Here I shall try to show steps on how I started and tested this example source code on my Laptop. Source code : @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //getting width and height from the default screen. //TODO - check for any alternate way of finding //width and height of the screen. int w = getWindowManager(). getDefaultDisplay().getWidth(); int h = getWindowManager(). getDefaultDisplay().getHeight(); //Creating various surface views with different background //colors for various blocks. SurfaceView svPink = new SurfaceView(getApplicationContext()); svPink.setBackgroundColor(Color.rgb(200, 100, 150)); SurfaceView svGreen = new SurfaceView(getApplicationContext()); svGreen.setBackgroundColor(Color.GREEN); SurfaceView svDBlue = new SurfaceView(getApplicationContext()); svDBlue.setBackgroundColor(Color.BLUE); SurfaceView svLBlue = new SurfaceView(getApplicationContext()); svLBlue.setBackgroundColor(Color.GRAY); SurfaceView svBrown = new SurfaceView(getApplicationContext()); svBrown.setBackgroundColor(Color.rgb(100, 100, 250)); //creating tabular structure for laying various instances //of SurfaceView in various blocks. TableLayout tableLayout = new TableLayout(getApplicationContext()); TableRow tableRow= new TableRow(getApplicationContext()); TableLayout tableLayout1 = new TableLayout(getApplicationContext()); TableRow tableR1 = new TableRow(getApplicationContext()); TableRow tableR2 = new TableRow(getApplicationContext()); TableLayout tableLayout2 = new TableLayout(getApplicationContext()); TableRow tableR4 = new TableRow(getApplicationContext()); TableRow tableR3 = new TableRow(getApplicationContext()); //Adding views in appropriate rows and layouts. tableR1.addView(svPink,(w * 2)/3,h/3); tableRow.addView(tableLayout1); tableRow.addView(svGreen,w/3,h); tableLayout2.addView(tableR4); tableR4.addView(svDBlue,w/3,h/3); tableLayout2.setColumnStretchable(1, true); tableR4.addView(svLBlue,w/3,h/3); tableR3.addView(svBrown); tableR2.addView(tableLayout2); tableLayout1.addView(tableR1); tableLayout1.addView(tableR2); tableLayout1.addView(tableR3); tableLayout.addView(tableRow); setContentView(tableLayout); } Note: I have not tested this source code in any other version of Android OS other than version 2.2, and API version 8. While running above example source code, I observed that the Emulator screen is not able to show the bottom view completely, but showing portion of it. Then I decided to use ScrollView in order to scroll up and down this layout and I should be able to see the complete Layout. Following code shows the modification done to the above example source code: Modified code as follows : ScrollView sclrView = new ScrollView(getApplicationContext()); sclrView.addView(tableLayout); setContentView(sclrView); //Just commenting following method call to avoid //TableLayout instance to be shown on screen. //instead I have used ScrollView for using scrolling //feature here in this example. //setContentView(tableLayout); This code is executed without any exception, as tested using Android OS 2.2 Emulator, but there is a problem that I encountered here and still not able to identified the real issue. The screen is not showing the bottom SurfaceView instance, and it is shown as black color only. Anybody has any solution to this, then please help me resolving this issue. Thanks in advance !!! Updates : Yes, I have managed to find the real issue that was making the bottom most SurfaceView instance to not showing up on screen. The line in the above example source that needs to be corrected is tableR3.addView(svBrown); is changed to tableR3.addView(svBrown,w/3,h/3); Yes, by assigning width and height values to the addView method, it worked !!!! But one question thou, how can we improve this source code and remove any dependency on the assignment of width and height within the source code?? Is there any other way as such?? Let us find out and share inputs on this Page's comment section. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Today, 30th October 2010, I have managed to create layout as discussed above, that is layout - 2. This example code is not tested in real device, and is tested only using Android OS 2.2 Emulator on a personal Laptop as hardware. Source code : @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // I am not aware of any other way of determining device // or emulator's screen width and height. So if you know // any better way of determining these values, please // do let us know, by using the below comment boxes. int w = getWindowManager().getDefaultDisplay().getWidth(); int h = getWindowManager().getDefaultDisplay().getHeight(); //Just to reduce the overall screen height value, as the //height is little bit more, and moves out of view range. h = h * 3/4; //Different views for showing different colors on various //boxes. SurfaceView svPink = new SurfaceView(getApplicationContext()); svPink.setBackgroundColor(Color.rgb(200, 100, 150)); SurfaceView svGreen = new SurfaceView(getApplicationContext()); svGreen.setBackgroundColor(Color.GREEN); SurfaceView svDBlue = new SurfaceView(getApplicationContext()); svDBlue.setBackgroundColor(Color.BLUE); SurfaceView svLBlue = new SurfaceView(getApplicationContext()); svLBlue.setBackgroundColor(Color.GRAY); SurfaceView svBrown = new SurfaceView(getApplicationContext()); svBrown.setBackgroundColor(Color.rgb(100, 100, 250)); //TableLayout and TableRow combination created using just //manual adjustments only, any better solution, please do //let us know. TableLayout tableLayout = new TableLayout(getApplicationContext()); TableRow tableRow1= new TableRow(getApplicationContext()); TableRow tableRow2 = new TableRow(getApplicationContext()); TableLayout tableLayout1 = new TableLayout(getApplicationContext()); TableRow tableRow3 = new TableRow(getApplicationContext()); TableRow tableRow4 = new TableRow(getApplicationContext()); tableLayout.addView(tableRow1); tableLayout.addView(tableRow2); tableRow1.addView(tableLayout1); tableRow1.addView(svDBlue, w/3,h * 8/10); tableRow1.addView(svGreen, w/3,h * 8/10); //TableLayout.LayoutParams is used to span the bottom view //to 3 columns, thus preventing a distorted screen layout. TableRow.LayoutParams tl = new TableRow.LayoutParams(); tl.width = w; tl.height= h * 2/10; tl.span = 3; tableRow2.addView(svBrown, tl); tableLayout1.addView(tableRow3); tableLayout1.addView(tableRow4); tableRow3.addView(svPink, w/3, h * 2/10); tableRow4.addView(svLBlue, w/3,(h * 6/10)+1); //used scrollview for scrolling ability for the output screen. ScrollView sclrView = new ScrollView(tableLayout.getContext()); sclrView.addView(tableLayout); setContentView(sclrView); tableLayout.invalidate(); } In both these above example code, the approach is to define layout and any child views, all elements are used to create these layouts are done programmatically. There is another way of doing this, just by defining the layout in an XML file and then adding all the child elements/views to appropriate layout elements programmtically. So there will be partial structural and partial coding approach is taken. I have used main.xml file to look something like follows: main.xml file under res folder inside workspace directories. <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tb1" > <TableRow> <TableLayout> <TableRow android:id="@+id/tr2"> </TableRow> <TableRow android:id="@+id/tr3"> </TableRow> </TableLayout> <TableLayout> <TableRow android:id="@+id/tr5"> </TableRow> </TableLayout> </TableRow> <TableRow android:id="@+id/tr4"> </TableRow> </TableLayout> Now the remaining task is to find those appropriate table rows and adding a designated SurfaceView instance with a separate color as background color. So the source code would look somthing like as follows: @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); int w = getWindowManager().getDefaultDisplay().getWidth(); int h = getWindowManager().getDefaultDisplay().getHeight(); setContentView(R.layout.main); //finding appropriate TableRow from the //Activity using findViewById method and passing id //value as defined in the main.xml file. TableRow tr2 = (TableRow) findViewById(R.id.tr2); TableRow tr3 = (TableRow) findViewById(R.id.tr3); TableRow tr4 = (TableRow) findViewById(R.id.tr4); TableRow tr5 = (TableRow) findViewById(R.id.tr5); SurfaceView svPink = new SurfaceView(getApplicationContext()); svPink.setBackgroundColor(Color.rgb(200, 100, 150)); SurfaceView svGreen = new SurfaceView(getApplicationContext()); svGreen.setBackgroundColor(Color.GREEN); SurfaceView svDBlue = new SurfaceView(getApplicationContext()); svDBlue.setBackgroundColor(Color.BLUE); SurfaceView svLBlue = new SurfaceView(getApplicationContext()); svLBlue.setBackgroundColor(Color.GRAY); SurfaceView svBrown = new SurfaceView(getApplicationContext()); svBrown.setBackgroundColor(Color.rgb(100, 100, 250)); //adding various instances of SurfaceView //to the appropriate TableRow instance tr5.addView(svDBlue, w/3, h * 2/3); tr5.addView(svLBlue, w/3, h * 2/3); tr2.addView(svPink,w/3,h * 1/3); tr3.addView(svGreen,w/3,h * 1/3); TableRow.LayoutParams tl = new TableRow.LayoutParams(); tl.width = w; tl.height= h * 1/3; //setting span value to this row to accomplish non-distorted screen tl.span = 3; tr4.addView(svBrown, tl); } I am pretty sure there could be many different ways of doing this example with varieties of Layouts using Android Frameworks APIs. While working on these examples or ways of achiving varieties of layouts, one idea struck my thought as to try and work on an assignment for creating layout with ease and configurable screen designs so as to have customized and extensible framework/platform for creation of screen at runtime. By using this framework, one can have a single application installed once on an Android enabled mobile device but the application look and feel can be changed at runtime by providing appropriate screen level meta-data from the remote server/web-server. By reading this idea, you can think that this is not a very newer concept, as the browsers, as we know, does shows up matter/screen according to the HTML tags fetched from web server. May be my thinking is aligned towards this very concept, but achieving this using Android platform would give me knowledge and know-how about Android Platform. And this Framework can be customized to achieve quick screen designing and defining layout for user defined application on mobile platform. Layout designing before compilation of source code can be done using Android plugin for Eclipse. But this is design time layout designing, not at run-time and not during execution of android program.
    Updated page as of 25-Nov-2011 :
Today I shall try to create pages and different layouts by using a pre-built component from Android framework API, called ExpandableListView using ExpandableListActivity. Idea behind this exercise is to explore and create an example showing complex layouts with many diverse pre-build components in form of easy to navigate across multiple screens, either by using List or Expandable List. To start with I shall choose to use ListView : Achieving runtime funstionality like the above image using Android Platform is the final objective of this article here-after. To start with I have created a project of type Android project within the workspace created using Eclipse as IDE. Within res/layout folder following three files are created: main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ListView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@android:id/list" android:drawSelectorOnTop="false"> </ListView> </LinearLayout> itemslists.xml <?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"> <TextView android:text="Details" android:id="@+id/detailView1" android:layout_width="wrap_content" android:layout_height="wrap_content"> </TextView> </LinearLayout> childlist_1.xml <?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"> <TextView android:text="ChildDetails" android:id="@+id/detailView2" android:layout_width="wrap_content" android:layout_height="wrap_content"> </TextView> </LinearLayout> main.xml file is the main screen layout, which is having a List of sub-items. itemslists.xml file is having the label that is shown on screen for each list item. chilclist_1.xml file will be used to display the content of first item if clicked. SampleListView.java
package com.tie.example; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.app.ListActivity; import android.os.Bundle; import android.view.View; import android.widget.ListView; import android.widget.SimpleAdapter; import android.widget.TextView; public class SampleListView extends ListActivity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); TextView tv1 = new TextView(getApplicationContext()); tv1.setText("Test1"); TextView tv2 = new TextView(getApplicationContext()); tv2.setText("Test2"); TextView tv3 = new TextView(getApplicationContext()); tv3.setText("Test3"); TextView tv4 = new TextView(getApplicationContext()); tv4.setText("Test4"); TextView tv5 = new TextView(getApplicationContext()); tv5.setText("Test5"); List data = new ArrayList(); data.add(new HashMap().put("textView1",tv1)); data.add(new HashMap().put("textView2",tv2)); data.add(new HashMap().put("textView3",tv3)); data.add(new HashMap().put("textView4",tv4)); data.add(new HashMap().put("textView5",tv5)); String[] fromList = {"textView1","textView2","textView3" ,"textView4","textView5"}; int[] toList = {R.layout.childlist_1,R.layout.childlist_1 ,R.layout.childlist_1,R.layout.childlist_1 ,R.layout.childlist_1}; int resource = R.layout.itemslists; SimpleAdapter simpleAdapter = new SimpleAdapter(this, data, resource, fromList, toList); setListAdapter(simpleAdapter); } public void onListItemClick(ListView l, View v, int position, long id) { v.invalidate(); } }
This above piece of code is not showing output the way I wanted to show, I was thinking that on compilation and execution of this above code would show list of items with header as "Details". And on click/select of any of the items, it expands to show the child layout (As depicted in childlist_1.xml file). But as of now I think I am not doing it all right, as I am able to show the main list screen, but the child screen is not showing/getting created. Any suggestion or ways to resolve this, is a task I am presently working on. If anyone already resolved this problem, and would like to show the way in this page, please do write to me (Autor) at "usingframeworks@ gmail . com". If found suitable, I would like to show this on this page with name of sender as suggested. As of 14th December 2011 : With minor changes in the example source code and layout files, I have managed to make this example working. If anyone interested to try following source code, I have shared in this Page: main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ListView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@android:id/list" android:drawSelectorOnTop="false"> </ListView> </LinearLayout>
This is the main screen with a ListView of id "@android:id/list". itemslists.xml
<?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:id="@+id/itemView1"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ff0000" android:textStyle="bold"> </TextView> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ffffff" android:textStyle="bold"> </TextView> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ff0000" android:textStyle="bold"> </TextView> <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ffffff" android:textStyle="bold"> </TextView> <TextView android:id="@+id/textView5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ff0000" android:textStyle="bold"> </TextView> <TextView android:id="@+id/textView6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ffffff" android:textStyle="bold"> </TextView> </LinearLayout>
This is a resource file that contains all the items (TextView is used) those can be used to create the desired screen layout using ListView. Android specific file that is directly used to create desired screen layout is as shown below: SampleListView.java
package com.tie.example; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.app.ListActivity; import android.os.Bundle; import android.view.View; import android.widget.ListView; import android.widget.SimpleAdapter; import android.widget.TextView; public class SampleListView extends ListActivity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); List data = new ArrayList(); HashMap map = new HashMap(); map.put("text1"," TEST "); data.add(map); HashMap map1 = new HashMap(); map1.put("text1"," TEST1 "); map1.put("text2"," TEST2 "); data.add(map1); HashMap map2 = new HashMap(); map2.put("text1"," TEST1 "); map2.put("text2"," TEST2 "); map2.put("text3"," TEST3 "); map2.put("text4"," TEST4 "); data.add(map2); HashMap map3 = new HashMap(); map3.put("text1"," TEST1 "); map3.put("text2"," TEST2 "); map3.put("text3"," TEST3 "); map3.put("text4"," TEST4 "); map3.put("text5"," TEST5 "); map3.put("text6"," TEST6 "); data.add(map3); String[] fromList = {"text1","text2", "text3","text4", "text5","text6"}; int[] toList = {R.id.textView1, R.id.textView2, R.id.textView3, R.id.textView4, R.id.textView5, R.id.textView6}; int resource = R.layout.itemslists; SimpleAdapter simpleAdapter = new SimpleAdapter(this, data, resource, fromList, toList); setListAdapter(simpleAdapter); } }
The above class is just creating the ArrayList container for storing HashMap with key and value pairs. Each of these three HashMaps will be used to represent data for each row in the ListView. fromList and toList arrays will map text data from the HashMap to be shown in place of the TextView, represented by the ids in toList. resource - the id of the itemslists layout file. These datas are used to create SimpleAdapter instance, and this adapter instance will be passed to the ListActivity.setListAdapter method. If you would like to share your thoughts on this, please write to us using following Form.
If interested in commenting related to Android Layout Example
Click Here

Name (To be shown on this Page:*

Email (Not to be shown):*

Website (To be shown on this Page)

Your Comments here (To be shown on this Page):*

(You can use <a> Tag in your comments)

Please enter same number as shown here 579




Android Thread Example

REST Interview Questions

JAX-WS Webservice Example

Android Overlap SurfaceView Example

Spring3 Integration of File Endpoint

JAXWS Webservice Example

Android WebView Example

Android Context Menu Example

Setting up Eclipse for Android App Development

Android SensorEvent Orientation Example

Android ImageSwitcher Example

REST API Design for Android App

Android ExpandableListView Example

Singleton Serializable on Android

Android GPS with Google MAP Example

Android Project With Example

Android Project Manageing Files

Project Ideas for App on Android Platform

Android EditText with Background

Android SQLite Database Example

Android AutoCompleteTextView Example

Android Tester

Android Interview Questions

Android ListView Example

Android Intent Notification Example

Android Intent Broadcast Example

Android TextView Link Example

Android Sensor List

Android Sensor Orientation Example

Android Intent Broadcast Receiver

Android Gallery SurfaceViews Example

Android Location Example

Android Text to Speech Example

Android Intent Example

Android Layout Example

Android Download File Example

Android Expandable ListView Example

Android Tab Example

Android RelativeLayout Example

Android Intent Example

Android Text to Speech Example

Android SQLite Example

Android CustomView Example

Android Canvas Example

Android SharedPreferences Example

Android Shape Background Example

Android ShapeButton Example

Android ViewFlipper Example

Android Gallery Example

Android TimePickerDialog Example





If interested commenting on this Page :

comments powered by Disqus
Any source code found on any of the page(s) in Techiecommunity.net is associated with following notice: 
   /*
     * TECHIECOMMUNITY.NET MAKES NO REPRESENTATIONS OR WARRANTIES ABOUT THE SUITABILITY OF
     * THE SOFTWARE, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
     * TO THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
     * PARTICULAR PURPOSE, OR NON-INFRINGEMENT. TECHIECOMMUNITY.NET SHALL NOT BE LIABLE FOR
     * ANY DAMAGES SUFFERED BY LICENSEE AS A RESULT OF USING, MODIFYING OR
     * DISTRIBUTING THIS SOFTWARE OR ITS DERIVATIVES.
     *
     * THIS SOFTWARE IS NOT DESIGNED OR INTENDED FOR USE OR RESALE AS ON-LINE
     * CONTROL EQUIPMENT IN HAZARDOUS ENVIRONMENTS REQUIRING FAIL-SAFE
     * PERFORMANCE, SUCH AS IN THE OPERATION OF NUCLEAR FACILITIES, AIRCRAFT
     * NAVIGATION OR COMMUNICATION SYSTEMS, AIR TRAFFIC CONTROL, DIRECT LIFE
     * SUPPORT MACHINES, OR WEAPONS SYSTEMS, IN WHICH THE FAILURE OF THE
     * SOFTWARE COULD LEAD DIRECTLY TO DEATH, PERSONAL INJURY, OR SEVERE
     * PHYSICAL OR ENVIRONMENTAL DAMAGE ("HIGH RISK ACTIVITIES"). TECHIECOMMUNITY.NET
     * SPECIFICALLY DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY OF FITNESS FOR
     * HIGH RISK ACTIVITIES.
     */
   
The content provided in this page is NOT warranted and/or NOT guaranteed by techiecommunity.net .
techiecommunity.net is not liable for any negative consequences that may result/arise from 
implementing directly/indirectly any information covered in these pages/articles/tutorials.

For any of the content, if you would like to bring it to notice for removal from this web site, 
please write to this web site administrator @ EMAIL-ID (please remove space before and after @),
with appropriate concern and supporting proof(s). After thorough review and if found genuine concern,
we would take appropriate action and remove disputed content from this web site within 24 hours 
starting from the time it has brought to techiecommunity.net Administrator notice.

This website uses cookies and third party cookies to improve the user experience. 
And to provide more relevant ads. 
In case of continued use of this website implies that you accept the use of cookies on this website.
		
While using this web site, you agree to have read and accepted techiecommunity.net terms of use and privacy policy.