Android ViewGroups: LinearLayout

This ViewGroup has a lot in common with the Silverlight “Stack Panel” control (in fact, it’s almost identical in usage). You specify whether the LinearLayout should arrange its children vertically or horizontally by defining an “orientation” attribute (if unspecified, the default is “hotizontal”). As stated previously, the children of a ViewGroup can also be a ViewGroup, so you can nest LinearLayouts within LinearLayouts.

The official android tutorial on Linear Layouts is here. There would be no point in me going over it again because that guide is pretty thorough and it should be fairly obvious what is going on (although if you do have any questions about it then drop me a line).

What that tutorial won’t tell you, however, is how to achieve the exact same layout programatically. Here’s how;


Step 1

Start a new Android project (or, just open up the one you did the above linearlayout tutorial in)


Setp 2

Create a new file within the “res/values” folder called “colours.xml”. Add the following code to it;

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="red">#aa0000</color>
<color name="green">#00aa00</color>
<color name="blue">#0000aa</color>
<color name="yellow">#aaaa00</color>
</resources>

We are specifying our hex codes in an XML resource file. In the real world you wouldn’t name them “red, green, yellow etc.”, you’d give them meaningful names similar to the way you would name classes in web design. This way, if we ever wanted to re-skin our UI we would just have to change this file and wouldn’t have to alter any source code. This equates to a greater separation of concerns and a subsequently more manageable application.


Step 3

Replace the contents of the activity source file’s “oncreate” method with the following;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.main);

LinearLayout root = new LinearLayout(this);
root.setOrientation(LinearLayout.VERTICAL);
root.setLayoutParams(new LayoutParams(
LinearLayout.LayoutParams.FILL_PARENT,
LinearLayout.LayoutParams.FILL_PARENT));

LinearLayout top = new LinearLayout(this);
top.setOrientation(LinearLayout.HORIZONTAL);
top.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.FILL_PARENT,
LinearLayout.LayoutParams.FILL_PARENT,
1.0f));

LinearLayout bottom = new LinearLayout(this);
bottom.setOrientation(LinearLayout.VERTICAL);
bottom.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.FILL_PARENT,
LinearLayout.LayoutParams.FILL_PARENT,
1.0f));

TextView top1 = new TextView(this);
top1.setText("red");
top1.setTextSize(15.0f);
top1.setBackgroundResource(R.color.red);
top1.setGravity(Gravity.CENTER_HORIZONTAL);
top1.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.FILL_PARENT,
1.0f));

TextView top2 = new TextView(this);
top2.setText("green");
top2.setTextSize(15.0f);
top2.setBackgroundResource(R.color.green);
top2.setGravity(Gravity.CENTER_HORIZONTAL);
top2.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.FILL_PARENT,
1.0f));

TextView top3 = new TextView(this);
top3.setText("blue");
top3.setTextSize(15.0f);
top3.setBackgroundResource(R.color.blue);
top3.setGravity(Gravity.CENTER_HORIZONTAL);
top3.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.FILL_PARENT,
1.0f));

TextView top4 = new TextView(this);
top4.setText("yellow");
top4.setTextSize(15.0f);
top4.setBackgroundResource(R.color.yellow);
top4.setGravity(Gravity.CENTER_HORIZONTAL);
top4.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.FILL_PARENT,
1.0f));

TextView bottom1 = new TextView(this);
bottom1.setText("row one");
bottom1.setTextSize(15.0f);
bottom1.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.FILL_PARENT,
1.0f));

TextView bottom2 = new TextView(this);
bottom2.setText("row one");
bottom2.setTextSize(15.0f);
bottom2.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.FILL_PARENT,
1.0f));

TextView bottom3 = new TextView(this);
bottom3.setText("row one");
bottom3.setTextSize(15.0f);
bottom3.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.FILL_PARENT,
1.0f));

TextView bottom4 = new TextView(this);
bottom4.setText("row one");
bottom4.setTextSize(15.0f);
bottom4.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.FILL_PARENT,
1.0f));

top.addView(top1);
top.addView(top2);
top.addView(top3);
top.addView(top4);

bottom.addView(bottom1);
bottom.addView(bottom2);
bottom.addView(bottom3);
bottom.addView(bottom4);

root.addView(top);
root.addView(bottom);

setContentView(root);
}

Run your application and hey presto, an exact replica of google’s own linearlayout tutorial!

The code should be fairly easy to follow if you’re used to OO programming. All I’ve done here is instantiate each View as an object that I want to include in my UI, set the appropriate features on each one and then at the end I tie them all together. It’ll be easier to read and work through once you’ve got the above pasted into Eclipse (I don’t have syntax highlighting on this blog unfortunately). Anyway, that’s the LinearLayout ViewGroup!

Advertisements

One thought on “Android ViewGroups: LinearLayout

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s