DAY 5: Linear Layout in Android (My Own Examples)




The topic I am currently learning about in my journey of Android app development are ViewGroups (click to learn more about them in my previous post). Just for the reminder, a View Group is simply a type of a view that lets you put other views into it (according to some predefined rules and logic).

There are two main types of View Groups in Android: LinearLayout and RelativeLayout. Each one lets you arrange views in slightly different ways depending on your needs and how you want your app to look and behave.

In today’s post I will tell you what I’ve learned about LinearLayout in Android and give you my sample code. Let’s begin!

What Is A LinearLayout?

As the name suggests, a LinearLayout is a type of a GroupView which arranges its children linearly. There are two ways in which you can arrange children in this view:

  • In a vertical column (vertically)
     LinearLayout in Android (vertical)
  • In a horizontal row (horizontally)
     LinearLayout in Android (horizontal)

As you can see the concept of LinearLayout is pretty straightforward if we draw it and specifically set background colors for children so that we can easily see where their borders are).

Let’s now move to the practical part and actually code the two types of LinearLayouts and see how they would look on the screen of our Android devices.

Coding LinearLayout

We can forever theorize about different types of ViewGroups but we won’t learn anything if we don’t actually produce any code.

Below is my code for LinearLayout containing four different views (TextViews) in it. As you can see the views are placed vertically and I specified background colors for them so that you can see where exactly their border are.

Note that in most cases you won’t specify the background colors of views within a group and I have done it only to show you where exactly these child views begin and end. 

<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#9E9E9E">

<TextView
 android:text="Android Developers at the party"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="2"
 android:background="#FF4081"
 android:textSize="24sp" />

<TextView
 android:text="Olga"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1"
 android:background="#1E88E5"
 android:textSize="24sp" />
 
 <TextView
 android:text="Junior Android Developer"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1"
 android:background="#673AB7"
 android:textSize="24sp" />
 
 <TextView
 android:text="Senior Android Developer"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1"
 android:background="#18FFFF"
 android:textSize="24sp" />

</LinearLayout>

The output of this code looks like this:

 LinearLayout in Android

This is how the above code looks on the screen of an Android phone.

As you can see it’s still a pretty simple app but there are at least a couple of lines of the code that need to be explained further.

If you want to delve deeper into the subject, I suggest you explore the resources about Linear Layout from Google Developers

Starting & Ending A LinearLayout Group

As you have probably noticed, there are a lot of similarities between XML and HTML, so starting a LinearLayout is similar to how you would start a HTML element. You simply write <LinearLayout, specify its attributes, put >, list children and end the element with the closing tag of </LinearLayout>.  

<LinearLayout

...>

</LinearLayout>

The XML Name Space Declaration

One of the most important things you need to specify is in the first line of code after the starting tag (as you can see it’s a link). We use this declaration to specify that all of the below attributes belong to Android (not regular XML).

xmlns:android="http://schemas.android.com/apk/res/android"

Setting The Layout To Be Horizontal Or Vertical

Just after the beginning tag of LinearLayout, you have to set some of its attributes. One of these attributes is android:orientation which you can set to vertical (android:orientation=”vertical”) or horizontal (android:orientation=”horizontal”).

android:orientation="vertical"

Setting The Layout Width & Height

When specifying the width and height attributes for LinearLayout I used something totally new to me, that is, the value of  called match_parent.  What it basically does is match the size of children (we will talk about them in a second) to the size of the parent view.

In this case the LinearLayout is the root view and the main screen of the app so it occupies the whole screen space. If we set the value to match_parent for both width and height of this View Group, the children occupy the whole screen space.

 android:layout_width="match_parent"
 android:layout_height="match_parent"

Of course, you can set the value of width or height to specific numbers (like 200 dp) or to wrap_content so it will wrap itself around the content (it will be of the size of the content).

Adding Children

We add children of the parent view between the starting and the closing tags of the layout. Depending on the type of the view we want to add to the layout, we may start with <Text View, specify its attributes and use the self-closing tag of />. We can add as many children as we want. In this example I added four TextViews as children.  Let’s take a look at one of the children below.

<TextView
 android:text="Android Developers at the party"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="2"
 android:background="#FF4081"
 android:textSize="24sp" />

Evenly Spacing Out Children With Attributes

If we want to evenly space out children views on the screen (so that they occupy the whole screen regardless of its size and resolution), we have to make use of the three attributes: width, height and weight.

Since we want the width of each child to be of the width of the parent view (because we use a horizontal view in this example), we simply use the value of match_parent.

 android:layout_width="match_parent"

If we want the height of a child to change in accordance with the size of the screen and resolution (and always occupy proportionally the same amount of space) we have to set height to the value of 0dp and specify the value of layout_weight which is simply the importance we give to this child. The bigger the weight, the more important the child (and the more space it will occupy on the screen.

 android:layout_height="0dp"

In in case of my code I set weight to “2” for the first child (“Android Developers at the party”) so that it is two times more important than other children and occupies the proportional amount of the screen.

 android:layout_weight="2"

If we want all of the children to occupy the same amount of the screen space, we have to set the value of weight to “1” for all of them.  If we do it, the output of the code will change into something like this.

 LinearLayout in Android

This is basically everything I have learned about LinearLayout in Android so far. I am now studying RelativeLayout and it will be the topic of my next tutorial. Now let’s summarize Day 5.




Summary Of Day 5

Day 5 of my Android development journey has come to an end  (and it’s almost 23:00). I feel happy because I managed to create the post just like I planned.

What I want to say: It’s extremely important to take one step at a time.
Level of motivation: Extremely high
Level of fatigue: Low (even though it’s Monday evening)
Level of experience: 0.0021%
What I have learned: I know what LinearLayout is and I can specify its attributes.

Share Your Thoughts

Are you an Android developer? Did you notice any errors in this post? Do you have any questions or comments?

I am only beginning my journey of becoming an Android developer and I would really like to hear from you (and learn form you). Feel free to either contact me directly or leave me your comments in the comment box below.

Add Comment