1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Drain Droids

Android Studio For Beginners.Mobile Apps.Android Games.

Thursday, December 27, 2018

Android UI, Layout & Material Design Tutorial-The XML

In android development world, designing plays a major role, poorly design interface Apps may not attract users to the application. In android studio, you can do your design using XML or you can also programmed your design. Personally I prefer using XML for my material design because it’s really easy to use and understand. Nearly all android UI designs are done from XML.

In this tutorial, we going to study UI designs using XML basic, we going to learn about layout, learn about Widgets and attribute .These are very important as you begin your android development journey.

Today, we are going to focus on learning two things,

1-XML and XML Files  

Because this is where UI designs takes place. But this post will only cover XML  and XML files while the next post will cover all about Layout’.

The XML

Just like other programming language, android uses a language called XML which means Extensible Markup language which is more of like HTML.It’s perfectly readable for both machine and human. It’s really not difficult to develop. Layout is design using XML in android Studio because it does not make our layout heavy in terms of weight.
At the end of this tutorial, you will be able to understand the basic of XML and it concept and its files which are used for different interface designs.
Android user interface is hierarchically defined which is view and Viewgroup.The ViewGroup is the container that house it child views. In other word, the ViewGroup could be said to be a parent that has Child. Also,ViewGroup can also have another ViewGroup  which could also have its own as child. Illustration bellow will help you understand the hierarchy more.

The diagram above have explained it all how XML can be defined hierarchically, now if you copy the code below to your XML .You will have something like.


<?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="Drain Droids"
 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="Drain Droids Basic One"
 />

 <EditText
 android:id="@+id/editTextLastName"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:hint=" Drain Droids Basic two "/>

 </RelativeLayout>
</LinearLayout>


Different XML Files

1-Layout XML Files- Layout can be located in res .It very important file because it house all the other element that we need in the application. Buttons, Textview, ImageView etc.

2. Manifest xml File(Mainfest.xml)-This is another important file, other important element can be defined here. E.g. permissions, services, activities, receivers etc.

3. Strings xml File(strings.xml)-All our string are defined in Strings file which file code can be reused. It also use to replace Hard Coded Strings with single strings.

4. Styles xml File(styles.xml)-Here we defined the look of our applications, the custom theme.

5. Color xml File (colors.xml)-The color code we used are defined here in the color xml file.

7. Dimension xml File (dimens.xml)-This file defined dimension of look of our application, like High and Width. Its defined in dimension and then used in the App.
This xml file is used to define the dimensions of the View’s. Suppose we need a Button with 50dp (density pixel) height then we define the value 50dp in dimens.xml file and then use it in our app from this file.

5. Drawable xml Files-These are those xml files that are used to provide various graphics to the elements or views of application. When we need to create a custom UI we use drawable xml files. Suppose if we need to define a gradient color in the background of Button or any custom shape for a view then we create a Drawable xml file and set it in the background of View.

Next on the topic will cover Layout. Stay updated.