You are on page 1of 9

Android Full App, Part 1: Main Activity UI

Published on October 20, 2010 | 92,260 views | Filed in: Android Core Tags: Android Tutorial,
Eclipse
This is the first part of the Android Full Application Tutorial series. The complete application
aims to provide an easy way of performing movies/actors searching over the internet. In this part
we are going to setup our Eclipse project, prepare the user interface for the main activity and
finally test it on an appropriate emulated Android Device.
Lets start by creating a new Eclipse project (I suppose you already have the Android SDK and
the Eclipse plugin installed). The project is named AndroidMovieSearchAppProject and the
application is called MovieSearchApp (an extremely original name, I know). Note that
Android 1.5 (API level 3) is used as the target platform, since none of the latest APIs will be
used.

Our user interface will be very simple. A textbox where the user will provide his search query,
two radio-buttons indicating whether this is a movie or people search, a label to show the type of
search and a button to actually perform the search. The search results will be presented in an
other activity (this will be discussed in a later part of the series).
As you probably know, the interface is created via an XML file in order to decouple the
presentation view from the application logic. The corresponding file is named main.xml and
resides inside the res/layout folder. Open it with the Eclipse editor and make sure it contains
the following:
01 <?xml version="1.0" encoding="utf-8"?>

02
03 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
04
android:orientation="vertical"
05
06

android:layout_width="fill_parent"
android:layout_height="fill_parent"

07

>

08
09
10

<EditText android:id="@+id/search_edit_text"
android:text="@string/search"

11
12

android:layout_width="fill_parent"
android:layout_height="wrap_content"

13

/>

14
15
16

<RadioGroup
android:id="@+id/search_radio_group"

17
18

android:layout_width="fill_parent"
android:layout_height="wrap_content"

19
20

android:orientation="vertical">
<RadioButton

21
22

android:id="@+id/movie_search_radio_button"
android:checked="true"

23
24

android:layout_width="wrap_content"
android:layout_height="wrap_content"

25
26

android:text="@string/movies" />
<RadioButton

27
28

android:id="@+id/people_search_radio_button"
android:checked="false"

29
30

android:layout_width="wrap_content"
android:layout_height="wrap_content"

31
32

android:text="@string/people" />
</RadioGroup>

33
34

<TextView

35
36

android:id="@+id/search_type_text_view"
android:layout_width="wrap_content"

37
38

android:layout_height="wrap_content"
android:textColor="#ffffff"

39

/>

40
41
42
43

<Button
android:id="@+id/search_button"
android:text="@string/search"

44

android:layout_width="wrap_content"

45
46

android:layout_height="wrap_content"
/>

47
48 </LinearLayout>

Note that the text elements are not hard-coded, but instead are taking their values from an
external resource and more specifically from a file named strings.xml which resides in the
res/values folder. This is a good practice for achieving internationalization for your
application. The file is the following:
01 <?xml version="1.0" encoding="utf-8"?>
02
03 <resources>
04
05
06

<string name="hello">Hello World, MovieSearchAppActivity!</string>


<string name="app_name">MovieSearchApp</string>

07
08

<string name="search">Search</string>

09
10

<string name="movies">Movies</string>
<string name="people">People</string>

11
12 </resources>

This is how the interface looks like in the Android emulator:

The next step is to wire those UI elements in our code and manipulate them accordingly in order
to achieve our search functionality. The wiring is possible via the findViewById method, where
the integer argument is the unique ID that the element was given in the XML declaration file.

A very important aspect of the Android UI widgets is that they provide hooks that allow the
developer to get notified when the user performs an action, such as when he clicks a button or
traverses along the widgets. For handling clicking events, we implement the OnClickListener
interface, which defines a callback to be invoked when a view is clicked. The interface contains
only one method named onClick, which gets called when the view has been clicked.
Another useful interface is the OnFocusChangeListener, which defines a callback to be invoked
when the focus state of a view changed. Its only method is onFocusChange, which is called when
the focus state of a view has changed.
Lets see how all these can be applied in order to create our main Activity. The code for our main
class is the following:
001 package com.javacodegeeks.android.apps.moviesearchapp;
002
003 import android.app.Activity;
004 import android.os.Bundle;
005 import android.view.View;
006 import android.view.View.OnClickListener;
007 import android.view.View.OnFocusChangeListener;
008 import android.widget.Button;
009 import android.widget.EditText;
010 import android.widget.RadioButton;
011 import android.widget.RadioGroup;
012 import android.widget.TextView;
013 import android.widget.Toast;
014
015 public class MovieSearchAppActivity extends Activity {
016
017

private static final String EMPTY_STRING = "";

018
019
020

private EditText searchEditText;


private RadioButton moviesSearchRadioButton;

021
022

private RadioButton peopleSearchRadioButton;


private RadioGroup searchRadioGroup;

023
024

private TextView searchTypeTextView;


private Button searchButton;

025
026

@Override

027

public void onCreate(Bundle savedInstanceState) {

028
029

super.onCreate(savedInstanceState);

030

setContentView(R.layout.main);

031
032

this.findAllViewsById();

033
034

moviesSearchRadioButton.setOnClickListener(radioButtonListener);

035

peopleSearchRadioButton.setOnClickListener(radioButtonListener);

036
037
038

searchButton.setOnClickListener(new OnClickListener() {
@Override

039
040

public void onClick(View v) {


String query = searchEditText.getText().toString();

041
042

if (moviesSearchRadioButton.isChecked()) {
longToast(moviesSearchRadioButton.getText() + " " +
query);

043
044
045

}
else if (peopleSearchRadioButton.isChecked()) {
longToast(peopleSearchRadioButton.getText() + " " +
query);

046

047
048

}
});

049
050

searchEditText.setOnFocusChangeListener(new
DftTextOnFocusListener(getString(R.string.search)));

051
052

int id = searchRadioGroup.getCheckedRadioButtonId();

053
054

RadioButton radioButton = (RadioButton) findViewById(id);


searchTypeTextView.setText(radioButton.getText());

055
056

057
058

private void findAllViewsById() {

059

searchEditText = (EditText) findViewById(R.id.search_edit_text);


moviesSearchRadioButton = (RadioButton)
060
findViewById(R.id.movie_search_radio_button);
peopleSearchRadioButton = (RadioButton)
findViewById(R.id.people_search_radio_button);
searchRadioGroup = (RadioGroup)
062
findViewById(R.id.search_radio_group);
061

searchTypeTextView = (TextView)
findViewById(R.id.search_type_text_view);
064
searchButton = (Button) findViewById(R.id.search_button);
063

065

066
067
068

public void longToast(CharSequence message) {


Toast.makeText(this, message, Toast.LENGTH_LONG).show();

069

070
071
072

private OnClickListener radioButtonListener = new OnClickListener() {


public void onClick(View v) {

073
074
075
076

RadioButton radioButton = (RadioButton) v;


searchTypeTextView.setText(radioButton.getText());
}
};

077
078

private class DftTextOnFocusListener implements OnFocusChangeListener {

079
080

private String defaultText;

081
082

public DftTextOnFocusListener(String defaultText) {

083
084

this.defaultText = defaultText;

085
086

public void onFocusChange(View v, boolean hasFocus) {

087
088

if (v instanceof EditText) {
EditText focusedEditText = (EditText) v;

089
090

// handle obtaining focus


if (hasFocus) {

if
(focusedEditText.getText().toString().equals(defaultText)) {
092
focusedEditText.setText(EMPTY_STRING);
091

093
094

095
096

// handle losing focus


else {

if
(focusedEditText.getText().toString().equals(EMPTY_STRING)) {
098
focusedEditText.setText(defaultText);
097

099
100

}
}

101
102

}
}

103
104
105

106 }

We start by setting the View for our activity using the setContentView method. The view used is
the one defined by the main.xml file. Then, we take reference of all the UI elements so that
they can be manipulated via code. We create two OnClickListeners, one for handling the clicks
on the radio buttons and one for performing the search when the button is clicked. The listeners
are attached to the UI elements by using the setOnClickListener method.
Regarding the radio-buttons, these are defined in terms of a RadioGroup component. The
Android UI framework takes care of allowing only one RadioButton to be selected at any given
time. Moreover, at runtime, we can find which radio button is selected by using the method
getCheckedRadioButtonId. Note that this method return the globally unique ID of the radio
button and can be used as the argument of the findViewById method to take reference of the
button.
Finally, we create one OnFocusChangeListener and attach it to the EditText widget using the
setOnFocusChangeListener method. With our implementation, we are able to achieve the
functionality that is shown in the next image.

When the text box has the focus and is empty, you are ready to type your search query. The
query remains there whether the text box has the focus or not. However, when the text box is
empty and loses focus, a predefined message appears.
We are now ready to give our application a first try. This will be done using the emulator
provided by the Android SDK. Launch the AVD (Android Virtual Device) Manager from inside
Eclipse and create a new device. Give it a distinct name, for example Android1.5-SD and
choose the target platform, in our case Android 1.5. I have also chose the support for SD card,
just in case it is needed. This is how the setup should look like:

Next, create a new Run Configuration in Eclipse, choose our Android Project and the
MovieSearchAppActivity to launch. This is what you should see:

In the Target tab,choose the newly create AVD and hit Apply and Run.

The Android Emulator will start up and after a little time our application will appear (hit the
MENU button if the application does not appear automatically).

Play around with the app. At this time, it does not perform
any advanced actions, rather it only gives a Toast when the button is clicked.

You might also like