blog posts

This article will discuss the basic concepts of XML in Android and the various XML files used for different Android purposes. If you want to know what XML is in Android and what it does, join us with XML training in Android Studio and Ui design in Android to get acquainted with it and work with it.

What is XML in Android?

XML stands for Extensible Markup Language. Different XML basics and files are used in Android. XML is a markup language used just like HTML to describe data.

In Android, we use XML to design the layout because XML is a very simple and light language, so it does not make our layout designs heavy and slow.

XML helps you write user interface code (UI) to design your user interface.

XML tags within XML files are not predefined. We have to define the tags we need ourselves. XML is a very simple and scalable language that both humans and devices can read.

UI design in Android

In Android Studio, you can easily design the UI in Android using the XML markup language. In this article, you will get acquainted with XML in general, and you only need to get acquainted. With the views and features for designing the UI in Android you can create the user interface you want. This article will show you a simple example of UI design in Android.

UI basics

The whole concept of the Android user interface is defined using the View and ViewGroup object hierarchy.

ViewGroup is a hidden container that organizes child views.

These child views are other widgets used to build different parts of the UI.

As shown in the figure below, a ViewGroup can have another ViewGroup as a child element:

In the chart above, LinearLayout (ViewGroup) includes a RelativeLayout (ViewGroup) and two Buttons, TextView (View). In addition, two other views (i.e., 2 EditText) are located inside the RelativeLayout screen.

It is important to note that You can add one layout to another.

<? 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_pout " 
 android = "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 >

Top code output:

Each Android app page has some components such as buttons, text, or images. These items are available within ViewGroup. Layouts are the best example for ViewGroups. Different types of layouts in Android are Linear Layout, Relative Layout, Absolute Layout, Table Layout, and Frame Layout.

• Linear Layout: Aligns your content in one direction, vertically or horizontally.
• Relative Layout: Arranges your content relatively, and your hand is more open to view layout in this layout, but Relative Layout is heavier than Linear Layout or Frame Layout.
• Frame Layout: This layout is the simplest and lightest layout and does not have many features, and is used for a single layout.

Note that excessive layering (i.e., nested use of layouts) makes our interface heavier.

Layout Features

Each type of layout has features that determine how its elements look. The layout features listed above are as follows.

The following are the features that apply to all designs:

• android: id: A unique ID that corresponds to the view.
• android: layout_width: The width of the layout. (required for every view)
• android: layout_height: The height of the layout. (required for every view)
• android: layout_marginTop: Extra space on the top of the layout.
• layout_marginBottom: Extra space on the bottom of the layout
• android: layout_marginLeft: Extra space to the left of the layout.
• Android: layout_marginRight: Extra space to the right of the layout.
• And android: layout_weight: Specifies how much of the extra space in the layout should be allocated to the view.
• Android: padding-left: Padding to the left of the view.
• Padding-right: Padding to the right of the view.
• Android: paddingTop: Padding at the top of the view.
• Android: padding-bottom: Padding at the bottom of the view.

<! - RelativeLayout in which we set green color for the background -> 
< RelativeLayout  xmlns: android = "http://schemas.android.com/apk/res/android" 
xmlns: tools = "http: // schemas .android.com / tools " 
android: layout_width = " match_parent " 
android: layout_height = " match_parent " 
android: background = " @ color / greenColor " 
tools: context = " .MainActivity " > 
< TextView 
android: id = " @ + id / firstTextView " 
android: layout_width = " wrap_content "
android: layout_height ="wrap_content" 
android: layout_centerHorizontal = "true" 
android: layout_margin = "20dp" 
android: padding = "10dp" 
android: text = "First Text View" 
android: textColor = "@ color / white" 
android: textSize = "20sp" 
android: textStyle = "bold" /> 
<! - second TextView -> 
< TextView 
android: id = "@ + id / secondTextView" 
android: layout_width = "wrap_content" 
android: layout_height = "wrap_content " 
android: layout_below ="@ + id / firstTextView" 
android: layout_centerHorizontal = "true" 
android: layout_margin = "20dp" 
android: padding = "10dp" 
android: text = "Second Text View" 
android: textColor = "@ color / white" 
android: textSize = "20sp" 
android: textStyle = "bold" /> 
</ RelativeLayout >

<? xml version = "1.0" encoding = "utf-8"?> 
< manifest  xmlns: android = "http://schemas.android.com/apk/res/android" 
package = "example.abhiandroid.MyApplication" >      <! - application package name -> 
< uses-permission  android: name = "ANDROID.PERMISSION.INTERNET" /> 
<! - define Internet Permission -> 
< application 
android: allowBackup = "true" 
android: icon = "@ mipmap / ic_launcher" 
android: label = "@ string / app_name" 
android:theme = "@ style / AppTheme" >
<! - add your Activities, Receivers, Services Names Here -> 
< activity 
android: name = ".MainActivity" 
android: label = "@ string / app_name" > 
< intent-filter > 
< action  android: name = "android .intent.action.MAIN " /> 
< category  android: name = " android.intent.category.LAUNCHER " /> 
</ intent-filter > 
</ activity > 
</ application > 
</ manifest >

< resources > 
< string  name = "app_name" > My Application </ string > 
< string  name = "hello_world" > Hello world! </ string > 
< string  name = "action_settings" > Settings </ string > 
< string  name = "login" > User Login </ string > 
<! - define your strings here -> 
<

< resources > 
<! - Base application theme. -> 
< style  name = "AppTheme"  parent = "Theme.AppCompat.Light.DarkActionBar" > <! - Customize your theme here. -> </ style > </ resources >

<? xml version = "1.0" encoding = "utf-8"?> 
< shape  xmlns: android = "http://schemas.android.com/apk/res/android" > 
<! - define start, center and end color for gradient -> 
< gradient 
android: centerColor = "# 0f0" 
android: endColor = "# 00f" 
android: startColor = "# f00" /> 
</ shape >

<? xml version = "1.0" encoding = "utf-8"?> 
< resources > 
<! - define your colors Here -> 
< color  name = "greenColor" > # 0f0 </ color > 
< color  name = " white " > #fff </ color > 
</ resources >

Summary :

This article will learn about XML in Android and find out that XML is a very simple markup language to learn. The XML language is very readable and easy to understand. You can design the desired user interface with it and enjoy it.