rsz m

Beginner’s Guide to Android Layout

While Activity handles user interaction with your app, Layout determines how the app should look. In this post, you’ll learn how a layout defines the visual structure for a user interface, such as the UI for an activity or app widget.

The Layout

The Layout file is an XML file that describes the GUI of a screen of your app. For this example, we’ll be creating a linear layout, which is used to display GUI components side by side. These components can be displayed vertically or horizontally. When displayed horizontally, they are displayed in a single row. When displayed vertically, they are displayed in a single column.

Here is an example of what a linear layout looks like.

In the image below, you can see the code, and how it displays on an Android device.

how the code displays on an Android device

The layout starts with an XML declaration. It specifies the XML version and the encoding.

The next line is the opening tag for the linear layout. Inside it, you have a line that looks like this:

This specifies the XML namespace, used to provide unique names for elements and attributes in an XML document. xmlns:android here describes the Android namespace. This namespacing system was chosen by Google to help Android Studio handle errors during compile time. The Android namespace helps distinguish official Android widgets from custom ones. For example, it lets you distinguish between a custom textview widget and the Android textview widget. The URI of the namespace is http://schemas.android.com/apk/res/android.

The next namespace—xmlns:tools—gives you access to tools attributes. This is not the default namespace: you can build your Android application without making use of it. However, using it helps you add metadata to your resource files that help in the manipulation and rendering of layouts in the Design View. When referencing elements or attributes provided by the tools attributes, you must add the tools prefix. I’ll explain later how we use the tools attributes in this code.

For now, let’s look at the next part.

These attributes are used to determine the width and height of the layout. They also state the amount of padding to be used and whether the components are to be placed vertically or horizontally. Here, vertical orientation is chosen.

Width and Height

android:layout_width and android:layout_height are used to specify the width and height to be used for the layout component. You can use the values wrap_content or match_parent to determine the width and height of your component. wrap_content means the layout (or view) should be big enough for the content. match_parent means it should be as wide as the parent layout.

Padding

Padding is the space between the view or layout and its border. When you make use of android:padding, the space on all four sides of the view or layout will have the specified measurement. If you want to control the individual parts of the padding separately, you can use android:paddingBottom, android:paddingLeft, android:paddingRight, and android:paddingTop. Note that these values are specified in “dp”—density-independent pixels. More on these soon!

Margins

While the padding is applied to the layout or view and its border (within the component), the margin is applied to layout or view border and other surrounding components outside the component. You can use android:layout_margin to specify the margin on all sides at once, or you can control the individual parts of the padding separately with android:layout_marginBottom, android:layout_marginLeft, android:layout_marginRight, and android:layout_marginTop. These are also specified in dp.

What Is dp?

A density-independent pixel, or dp for short, is an abstract unit that is based on the physical density of the screen. Density-independent pixels are used when defining UI layouts. They’re used to express the dimensions of the layout or position in a density-independent way. You can read more about density independence in Android here.

Context

The context attribute is used to declare the activity the layout is associated with by default. Here you can see that the sample layout is associated with the MainActivity. 

You can also write this in a shorter form as:

This is only used when working in Design View, as a layout can be associated with more than one activity.

Child Components

Layouts contain child components. Actually, that is their whole purpose: to organize and display other components.

Let’s add some components to the linear layout—starting with a button view.

We’ll also add a text view, which has very similar properties to a button view.

We have covered android:layout_height and android:layout_width, so now let’s see the others.

Component Id

The android:id property is used to give the component an identifying name. This allows you to access your component from within the Java code of an activity, using the findViewById() method.

Component Text

The android:text attribute is used to tell Android what the text component should display. In the case of the button view, the text Button will be displayed.

Let’s run our code so far and see what it looks like.

Android device showing a button on screen

Recapping, the first element has to be the layout you will be making use of. Here it is LinearLayout. The orientation specified tells Android to display the components in the layout in a single vertical column. The

Powered by WPeMatico

Leave a Comment

Scroll to Top