What is XML in Android

esmail faal

3 years ago

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:

XML in Android

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.

The code snippet below explains the image above in a better way.

activity_main.xml:

<? 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.

The following three layouts are most commonly used in an Android XML 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.

Resize Views

Height and width properties can be set to specific measurements, but the following are very common:

android: layout_width = wrap_content: Adjusts the width of the View as needed. It may also be used with height.

Android: layout_width = match_parent: Adjusts the width of the View to the width of its parents. It may also be used with height.

Constraint Layouts

Newer versions of Android Studio create default designs called ConstraintLayouts instead of LinearLayouts or RelativeLayouts. Constraint Layouts is a newer design template that is more powerful and works with Drag and Drop.

Different XML files used in Android

Several XML files in Android are used for several different purposes. Below we define each.

1-XML Layout file:

Layout XML files are used to define the program’s UI (user interface). It contains all the elements (Views) or tools that

We want to use them in our application. Such as TextView, Button, and other UI elements.

You can refer to the res file to find the layout file or create a layout, and then inside the res file, you can see the layout file. In the layout, you can access the layouts of the Actives or Fragments.

You can see its position in the image below.

Below we show the activity_main.xml file in which we have two TextViews.

<! - 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 >

2- Manifest.xml file) Manifest xml):

This XML is used to define all the components of our program. Manifest includes the name of our application packages, our Activities, receivers, services, and the permissions that our application requires.

You can see its location in Android Studio in the image below.

Below we show the AndroidManifest.xml file and define the Internet license in that file.

<? 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 >

3-file string.xml(String XML):

This file is used to replace hardcoded strings with a single string. We define all the strings in string.xml, and then this file accesses our programs (Activity or in XML layout files) to use the strings defined in it. This file increases the reusability of the code, and It also gives us the ability to make the program multilingual.

You can see its location in Android Studio in the image below.

Below we show the strings.xml file and define a string in the file.

< 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 -> 
<

4-style.xml file) Style XML)

This XML is used to define different styles and is related to the program’s UI (user interface). We define our custom templates and styles in this file. The location of this file is next to the String file.

You can see the style.xml file below.

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

5- drawable.xml file

These are XML files that provide various graphics to program elements or views. We use drawable.xml files when we need to create a custom UI. Suppose if we need to define a gradient color in the background of a button or any other shape for the View, we create a drawable.xml file and place it in the View background.

Below we show the custom_drawable.xml file and use the style attribute to create a gradient background color.

<? 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 >

6- color.xml file:

This file is used to define color codes. We define the colors in it and use them in our application.

Below we show the color.xml files in which we define green and white.

<? 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.