Home >> Miscellaneous
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 @
usingframeworks @ gmail dot com
If anything missed out , please let me know at
techienjoy at yahoo . com
| Android ListView Example : |
Example on Android List View
explained with a very simple scenario
and article with appropriate screens
captured and shown.
|
|
|
|
|
| Android Examples : |
List of ANDROid examples
with source code and output
screens captured and shown.
|
|
|
|
|
|
|
| Android Sensors Example : |
Example on Android Sensors Listed and
explained with a very simple scenario
and article with appropriate screens
captured and shown.
|
|
|
|
|
|
|
|
| Android ListView Example : |
Example on Android ListView
explained with a very simple scenario
whereby showing folder and files with
structure and appropriate screens
captured and shown.
|
|
| Android Gallery Example : |
Example on Android Gallery View
explained with a very simple scenario
and appropriate screens captured and shown.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Android Tab View Example : |
Example on Android Tab View
explained with a very simple scenario
and appropriate screens captured and shown.
|
|
| Android ListView Example : |
Example on Android ListView and
explained with a very simple scenario
and article with appropriate screens
captured and shown.
|
|
|
|
|
|
|
|
|
|
| Google GWT Example : |
Example using GWT and some design patterns and various
ways of implementing this example.
|
|
|
|
|
|
|
|
|
|