105-ADT 18 Build Android Simple User Interface

The graphical user interface for an Android app is built using a hierarchy of View and ViewGroup objects. View objects are usually UI widgets such as buttons or text fields and ViewGroup objects are invisible view containers that define how the child views are laid out, such as in a grid or a vertical list.

Android provides an XML vocabulary that corresponds to the subclasses of View and ViewGroup so you can define your UI in XML using a hierarchy of UI elements.

Figure 1. Illustration of how ViewGroup objects form branches in the layout and contain other View objects.

In this lesson, you'll create a layout in XML that includes a text field and a button. In the following lesson, you'll respond when the button is pressed by sending the content of the text field to another activity.

(This tutorial is based on http://developer.android.com/training/basics/firstapp/building-ui.html )

1) Run ADT and open My First App project

Refer http://android-steps.blogspot.com/2014/12/103-adt18-create-android-project.html

2) Check the Class MainActivity.java

Notice the reference to the layout file.

package com.example.myfirstapp;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

3) Activity_Main file

Replace the startup codes with the following

<LinearLayout 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:orientation="horizontal"

tools:context=".MainActivity" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/hello_world" />

</LinearLayout>

4) Edit string values

Edit the strings.xml file

<?xml version="1.0" encoding="utf-8"?>

<string name="app_name">My First App</string>

<string name="action_settings">Settings</string>

<string name="hello_world">Hello world!</string>

<string name="edit_message">Enter a message</string>

<string name="title_activity_main">MainActivity</string>

<string name="menu_settings">Settings</string>

</resources>

5) Update the TextView Object with new variable name

<LinearLayout 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:orientation="horizontal"

tools:context=".MainActivity" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/edit_message" />

</LinearLayout>

Outcome:

6) Add a Button to the layout

<LinearLayout 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:orientation="horizontal"

tools:context=".MainActivity" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/edit_message" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/button_send" />

</LinearLayout>

7) Change TextView to EditText.

<LinearLayout 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:orientation="horizontal"

tools:context=".MainActivity" >

<EditText

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:hint="@string/edit_message" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/button_send" />

</LinearLayout>

Outcome.

8) Change the weight and width property of EditText object.

<LinearLayout 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:orientation="horizontal"

tools:context=".MainActivity" >

<EditText

android:layout_weight="1"

android:layout_width="0dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:hint="@string/edit_message" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/button_send" />

</LinearLayout>

Outcome.