Building Layout
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.

ImageView: Displaying image.

Button: Creating a button with text label.

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

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

CheckBox: Displaying a check box with text label.


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.


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.
