Understand Android Basics Part 2: UI is all what matters to the user (XML & Android)...

Written by Abderraouf GATTAL. You should follow him on Twitter.
2018-08-27

TwitterTwitterLinkedInGitHubDribbbleBehanceMedium

Your app’s user interface is everything that the user can see and interact with. In other words, your app’s UI is all what matters to the user, it is what attract users and what pushes them away, and that’s why it is highly recommended to polish your UI but never to ignore your App’s core. yet still the question that comes to your head is, how to polish the UI?

Image for post

Well, to answer that question we should talk about two known methods, the first is using the same programming language you used to build the core which is the basic original method yet the hardest one (still very useful in many dynamic cases). The second one is using XML and XMLPullParser (the declarative method) which we will explain in details later!

XML, What’s that?

XML stands for Extensible Markup Language. Much like HTML (or HyperText Markup Language), XML is also a markup language. It was created as a standard way to encode data in internet-based applications. However, unlike HTML, XML is case-sensitive, requires each tag is closed properly, and preserves whitespace. XML tags are not predefined in XML. We must define our own Tags. Xml as itself is well readable both by human and machine. Also, it is scalable 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.

Image for post

Cool, but what’s XMLPullParser? To understand that we should ask the question how can few XML code lines turn to a complex view?
The answer lies behind the word Inflate which means in this context, reading a layout XML (often given as parameter) to translate them into a working Java (or Kotlin) code. The Inflate process happens as the following:

  • read a layout XML.
  • parsing it using XMLPullParser (Android provides three types of XML parsers which are DOM, SAX and XMLPullParser. Among all of them android recommend XMLPullParser because it is efficient and easy to use).
  • Making Java (or Kotlin) View object to create the UI (ie viewgroup for container and views for widget) from the parsed XML layout.

And that explains the secret behind the implemented code (the example is written in JAVA) we find when we create an Activity in Android Studio :

@Override  
protected void onCreate(Bundle savedInstanceState) {  
	// Parent call (All state function must have it)
	super.onCreate(savedInstanceState);

	// The XML layout located in res>layout>activity_main.xml will be inflated.
	setContentView(R.layout.activity_main);
}

When you compile your application, each XML layout file is compiled into a View resource. The compiled layout resource must be loaded from the application code.

Since we knew what’s XML and how does it’s magic works with Android, i thought that we should get to know more important functionalities and options XML offers in Android Development and that would be the content of the following paragraph.

Different uses of XML in Android:

In Android there are several purposes of using XML, each purpose is needs a specific type of xml files. Below we define each and every one.

1. Define the actual UI of an Application:

XML is well used in defining the UI of the application for the different reasons I mentioned earlier but the files that must be used to do that in Android are the Layout XML Files which holds all the elements(views) or the tools that we want to use in our application. Like the TextView’s, Button’s and other UI elements.

  • Location of the file in Android Studio:

Image for post

You will find out this file inside the res folder and inside it there is another folder named layout where you will get all the layout files for their respective

2. Define all the components of the Application:

XML is also used in defining the components the application contains Like Activities and their state (main or not, the theme they use, …), the names of app’s packages, receivers, services and the permissions that our application needs. All written in the Manifest xml File (Mainfest.xml) one of the most important files in Android App’s.

  • Location in Android Studio:

It is located inside app > manifests folder

Image for post

3. Replace the Hard-coded strings with a single string:

XML helps us as well to define all the strings in a file called Strings xml File(strings.xml) which allows us to access them in our app (Activity or in Layout XML files) to enhance the reusability of the code and avoid Hard-coded programming.

  • Location in Android Studio:

Image for post

4. Define the different styles and looks for the UI of the application:

In addition to all the previous functionalities, XML also allows you to define our App’s custom themes and styles in the Styles xml File(styles.xml).

  • Location in Android Studio:

Image for post

5. Provide various graphics to the elements or views of the application:

XML also helps in providing various graphics to the elements or views to create a custom UI, that we put in Drawable xml Files.

6. Define the App’s colors :

XML offers the privilege of defining custom colors that we wants to use in our apps. We simply define the color’s in the Color xml File (colors.xml) and used them in our app from this file.

  • Location in Android Studio

Image for post

7. Define the dimensions of the Views:

After defining strings, styles and colors XML allows us also to define Dimensions yet in a different file called Dimension xml File(dimens.xml).

  • Location in Android Studio:

Image for post

Image for post