Building Layout

Phúc Ngô Hồng
Jul 10, 2017 · 3 min read

Congratulations on taking first step to learning Android! By the end of this Building-Layout session, you’ll know how to make a single-screen Android app with texts, images.

Firstly, you will need to know a really important thing in UI creation, View. View is simply a rectangular area on the screen and it’s responsible for drawing and event handling. It can be anything from a button, a picture to a search bar…

There are couples of Views that you should have a look at it since it’s really simple and useful as well:

TextView: Displaying text.

Sample TextView

ImageView: Displaying image.

Sample ImageView

Button: Creating a button with text label.

Sample Buttons

ImageButton: Displaying a button with an image (instead of text).

Sample ImageButton

EditText: Displaying a text field that you can write into.

Sample EditText

CheckBox: Displaying a check box with text label.

Unchecked CheckBox
Checked Checkbox

XML Syntax:

Now, let’s have a look back at our first XML to learn XML syntax. You must stick to XML syntax because if you write invalid XML, it won’t show up.

<TextView android:layout_width=”match_parent” android:layout_height=”wrap_content” android:text=”Hello world” />

Above code is for a XML element called TextView as mentioned earlier. We always start with an opening angle bracket < , followed by the element name (can be a View…). After that, we have attribute-name like “android:layout_width”, “android:layout_height”; followed by attribute-values such as “wrap_content”, “match_parent”. At last, we have a forward slash and a closing bracker /> (a.k.a self-closing tag) . Overall Layout-XML syntax looks like this:

<element name

attribute-name1=”attribute-value1”

attribute-name2=”attribute-value2”

/>

Beside that, there is a way to include many other elements inside a parent element in a xml:

<parent element name

parent-attribute-name1=”parent-attribute-value1”

parent-attribute-name2=”parent-attribute-value2”>

<child element name

child-attribute-name1=”child-attribute-value1”

child-attribute-name2=”child-attribute-value2”/>

</parent element name>

You could notice the syntax differences between this two styles of organizing XML elements.

//parent-element

<LinearLayout

android:layout_width=”match_parent”

android:layout_height=”match_parent”

>

//child-element

<TextView

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:text=”Hello world” />

</LinearLayout>

(I use // for comments because Medium doesn’t allow me to write the valid comments syntax)

We will try to code in the very next blog, so now i will provide some XML codes for those mentioned views above in order to make you feel familiar with them.

https://github.com/Jerry2001/Android/blob/master/Buttons.xml
https://github.com/Jerry2001/Android/blob/master/Fish.xml

Task 1: Have a look at this XML and tell me how many Views are there in XML? Name two attribute-names and two attribute-values.

Optional part:

The XML Prolog is optional. If it exists, it must come first in the documents.

<?xml version=”1.0" encoding=”UTF-8"?>

XML can contain international characters. To avoid errors, you should specify the encoding used. UTF-8 is default character encoding for XML documents.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade