Android Linear Layout Example

This tutorial provides a basic example for getting started with Android XML templates. Android UI Views can be built out either programmatically or through XML templates. While creating views programmatically can be fun, best practice suggests a strict separation between your views and the code that controls them. If you’ve got experience with HTML/CSS then you will find many similarities with building out Android XML views and regular HTML web pages.

Android layouts are comprised of nested elements which have various styles and properties that dictate the flow of the page. We will be building out a simple linear layout with XML. Linear layouts display element in a linear fashion (vertically or horizontally). Other layouts include relative, web, list, etc. These are subclasses of view groups. We will be creating a linear layout because of its simplicity for demonstration purposes but all view groups follow the same basic XML structure.

Getting Started

In Android Studio, create a new project and navigate to your /res/layout folder. This is where all defined XML views go in our project. Create a new file called main_view.xml within this directory and copy/paste the following:

<?xml version='1.0' encoding='utf-8'?>
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft= " 10dp "
android:paddingRight=" 10dp "
android:orientation="vertical" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter Your Name" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Submit" />
</LinearLayout>

This is the markup for a basic layout with an input text field and a button. Since it’s XML, we first define the XML version and encoding type. Then we define a <LinearLayout/> tag. This defines the view group container for our view. Notice how our <LinearLayout/> tag has various attributes (android:layout_width, android:orientation, etc) associated with it. These layout attributes are similar to CSS in that they define things like margin and padding for the element. All elements share some universal properties, such as:

android:layout_width

This dictates the width of the element, relative to it’s parent.

This dictates the height of the element, relative to it’s parent.

match_parent vs wrap_content

Every element you define can have these properties. When we set the layout width to 'match_parent', we are telling the element to take up all available width horizontally, relative to it’s parent. This means when we set both the layout width and layout height to 'match_parent', the element will take up the full screen. This makes sense for our LinearLayout element, as it is the root element for our view and we want it to fill the whole screen! Conversely when we set these attributes to 'wrap_content', the element will only take up the space it needs. Notice how we’ve set our <Button/> element’s layout width to 'match_parent' but it’s layout height to 'wrap_content'. This means the button will stretch to the width of the parent view but won’t stretch vertically more than necessary to render.

Linking our view

Now that we have a basic view, we want to programmatically link it with our Java Activity class. Find your main Activity in your Java directory. You should have a main activity file with an onCreate() method. In your onCreate method, you can initialize your newly created view as follows:

Public void onCreate(Bundle savedInstanceState){
Super.oncreate(savedInstanceState);
setContentView(R.layout.main_view);
}

Since we named our layout file main_view.xml, we can reference our view as a view resource with R.layout.main_view. If all goes according to plan, you should see the basic view we created upon running the app.

Conclusion

This is a basic example of how you can use XML to create Android layouts. While we used linear layouts for our example, we encourage you to explore other view groups (relative, web, grid, etc) when exploring layout rendering. Although different view elements have different attributes they all follow the same nested element structure. This makes creating Android UI layouts more intuitive, especially if you’re coming from an HTML/CSS background.

Your thoughts?