Prev
Home
Next
Menu

Build project using XML Layout

Here, instead of writing Java codes to create the user interface (UI) (as in the above example using a TextView component). It is more flexible and therefore recommended to layout your UI components via a descriptive XML layout file. In this way, you don’t need to hard-code the views, and you can easily modify the look and feel of the application by editing the XML markups. The Java codes can therefore focus on the business logic. Let’s rewrite our hello-world project to use XML layout.

Step 1: Create a New Android Application

CLOSE the previous project, via “File” ⇒ “Close Project” (Always CLOSE the previous project before starting a new project).

“Start a new Android Studio project” ⇒ “Phone and Tablet” ⇒ “Empty Activity” ⇒ Set “Name” to “Hello Android XML“.

Step 2: Define the Layout in XML – “res\layout\activity_main.xml“

Expand the “app”, “res (resource)”, “layout” node. Open the “activity_main.xml” (which is actually already opened). Android Studio provides two views for this XML file: “Design (or Graphical)” and “Text (or XML)” – selectable at the bottom of the panel.

Select the “Text” mode and study the codes:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.helloandroidxml.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.design.widget.CoordinatorLayout>

It declares a TextView (text field) that holds a text string “Hello World!“. The TextView component has width and height big enough to hold its content (“wrap_content“).

Step 3: Defining String References and Values – “res\values\string.xml“

Instead of hardcoding the Hello-World string directly inside the TextView (as in the above XML file), we shall use a string reference (similar to a variable) for better flexibility.

Expand res/values node. Open strings.xml, and ADD the line in red:

<resources>
    <string name="app_name">Hello Android XML</string>
    <string name="hello">Hello world from XML!</string>
</resources>

This “string.xml” defines 2 references/values:

  • A string reference (variable) “app_name” contains the application’s name, that you entered when you created the project.
  • A string reference (variable) “hello” contains the value of “Hello world from XML!“.

Now, modify the “activity_main.xml” to use the string reference “hello“, in the format “@string/hello“, as follows:

    ......
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello" 
        ...... />
    ......
Step 4: The Activity – “MainActivity.java“

Next, check the “MainActitivy.java” (under app/java/com.example.helloandroidxml), as follows:

package ......;
 
import ......;
 
public class MainActivity extends ...... {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
           // Use "activity_main.xml" to layout the screen.
    }
}

The “MainActivity” sets its content-view to “R.layout.activity_main“, which is mapped to the XML layout file “res\layout\activity_main.xml” that we have modified earlier.

Step 5: Run the App

Run the application. You shall see the new string “Hello, from XML!” displayed.

 

Previous
Main Menu
Next