Android User Interface is designed using XML or programmatically inside the code.There are number visual editor are also available from designing Android User Interface. We will also discuss these tools later in details especially Android Studio.
But most of the programming likes to design their App User interface in XML because it separate the presentation from the code and makes easier to visualize, manage, edit and debug the App. Therefore we look closer at "What is XML?" XML stands for Extensible Markup Language. It is similar to HTML but XML tags are not pre-defined. We have to design them for our self according to the conditions.
XML as itself is well readable both by human and machine. Also, it is salable and simple to develop. In Android we use XML for designing our layouts because XML is lightweight language so it doesn’t make our layout heavy.
Different XML files used for different purpose in Android. We will explain them later when we have to use them in our application.
A sample XML file for designing an Android User Interface is shown below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/buton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"/>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sample Text"
android:layout_marginTop="15dp"
android:textSize="30dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/editTextName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="First Name"
/>
<EditText
android:id="@+id/editTextLastName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Last Name"/>
</RelativeLayout>
</LinearLayout>
This is an example of activity_main.xml which define the User Interface consisting of Button,Text View and Two Edit View.
We will explain all them one by one at their proper code sections.
Android User Interface Fundamentals
The whole concept of Android User Interface is defined using the hierarchy of View and ViewGroup objects. A ViewGroup is an invisible container that organizes child views. These child views are other widgets which are used to make the different parts of UI. One ViewGroup can have another ViewGroup as an child element as shown in the figure given below:
Here in above Diagram ViewGroup (Linear Layout) contains one ViewGroup (i.e. Relative Layout)and two View(Button and TextView). Further two more View (i.e. 2 EditText ) are nested inside Relative Layout ViewGroup. It is important to note that one layout can be nested in another layout.Before deep diving into Android User Interface and then Android Program components. Please remember these things in mind.
1. WHAT IS VIEW
In android every widget which makes the part of the User Interface is called View. for example Button, text field called Edit Views , Check Boxes etc are called views.
2. WHAT IS VIEWGROUP.
When a VIEW is placed inside another view forms the Viewgroup.i.e. nesting of views or grouping of views inside another views is called VIEWGROUPS.
Every Android application screen has some components like button, Text or images. These are contained inside the ViewGroup. Layouts are the best examples for ViewGroups. The different types of layout in android are Linear Layout, Relative Layout, Absolute Layout, Table Layout and Frame Layout.
