Home » Android » core » activity » Main Activity UI example

About Ilias Tsagklis

Ilias Tsagklis
Ilias is a senior software engineer working in the telecom domain. He is an applications developer in a wide variety of applications/services, currently the technical lead in a in-house PCRF solution. Particularly interested in multi-tier architecture, middleware services and mobile development (contact). Ilias Tsagklis is co-founder and Executive Editor at Java Code Geeks.

Main Activity UI example

One of the most basic steps you have to take when developing an Android Application is the design and the specifications of the main Activity (and any activity) of your App. Android API gives all the basic tools to make that action fairly easy. The basic layout of an Activity is described in a Layout XML file. In this XML file we can specify and customize the basic UI components like Buttons, EditText components, Icons etc… While programming your Android App you will notice that you keep using the same Strings or the same values for certain parameters throughout the Application.

In order to better organize your resources that you are going to use, you can create an Resource XML file, like res/values/strings.xml to create string resources for instance, that you can use in many places an in many ways in your Application. Then, you have to tell your Activity to use the layout XML file you’ve created as its Layout description. Finally you can further customize your UI by creating several Event Listeners to capture an handle several UI Events.

In short, to create a basic UI for your applications you have to:

  • Create an XML layout file. Most of the times the creation of a new Activity is followed by the automatic creation of a new layout file
  • Specify the resources you want. In out case we create several String resources in res/values/strings.xml file
  • Use setContentView to tell your Activity to use your Layout XML file as its Layout description
  • Create event Listeners in your Activity to handle UI Events
package com.javacodegeeks.android.apps.moviesearchapp;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;

public class MovieSearchAppActivity extends Activity {

    private static final String EMPTY_STRING = "";

    private EditText searchEditText;
    private RadioButton moviesSearchRadioButton;
    private RadioButton peopleSearchRadioButton;
    private RadioGroup searchRadioGroup;
    private TextView searchTypeTextView;
    private Button searchButton;

    @Override
    public void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);

  setContentView(R.layout.main);

  this.findAllViewsById();

  moviesSearchRadioButton.setOnClickListener(radioButtonListener);

  peopleSearchRadioButton.setOnClickListener(radioButtonListener);

  searchButton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

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

    if (moviesSearchRadioButton.isChecked()) {

  longToast(moviesSearchRadioButton.getText() + " " + query);

    }

    else if (peopleSearchRadioButton.isChecked()) {

  longToast(peopleSearchRadioButton.getText() + " " + query);

    }

}

  });

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

  int id = searchRadioGroup.getCheckedRadioButtonId();

  RadioButton radioButton = (RadioButton) findViewById(id);

  searchTypeTextView.setText(radioButton.getText());

    }

    private void findAllViewsById() {

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

  moviesSearchRadioButton = (RadioButton) findViewById(R.id.movie_search_radio_button);

  peopleSearchRadioButton = (RadioButton) findViewById(R.id.people_search_radio_button);

  searchRadioGroup = (RadioGroup) findViewById(R.id.search_radio_group);

  searchTypeTextView = (TextView) findViewById(R.id.search_type_text_view);

  searchButton = (Button) findViewById(R.id.search_button);
    }

    public void longToast(CharSequence message) {

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

    private OnClickListener radioButtonListener = new OnClickListener() {

  public void onClick(View v) {

RadioButton radioButton = (RadioButton) v;

searchTypeTextView.setText(radioButton.getText());

  }
    };

    private class DftTextOnFocusListener implements OnFocusChangeListener {

  private String defaultText;

  public DftTextOnFocusListener(String defaultText) {

this.defaultText = defaultText;

  }

  public void onFocusChange(View v, boolean hasFocus) {

if (v instanceof EditText) {

    EditText focusedEditText = (EditText) v;

    // handle obtaining focus

    if (hasFocus) {

  if (focusedEditText.getText().toString().equals(defaultText)) {

focusedEditText.setText(EMPTY_STRING);

  }

    }

    // handle losing focus

    else {

  if (focusedEditText.getText().toString().equals(EMPTY_STRING)) {

focusedEditText.setText(defaultText);

  }

    }

}

  }

    }

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

    <EditText android:id="@+id/search_edit_text" 

  android:text="@string/search"

  android:layout_width="fill_parent" 

  android:layout_height="wrap_content" 
    />

    <RadioGroup

  android:id="@+id/search_radio_group"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:orientation="vertical">

  <RadioButton 

android:id="@+id/movie_search_radio_button"

android:checked="true"

android:layout_width="wrap_content" 

android:layout_height="wrap_content"

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

  <RadioButton 

android:id="@+id/people_search_radio_button"

android:checked="false"

android:layout_width="wrap_content" 

android:layout_height="wrap_content"

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

    <TextView 

  android:id="@+id/search_type_text_view"

  android:layout_width="wrap_content"

  android:layout_height="wrap_content"

  android:textColor="#ffffff" 
    />

    <Button 

  android:id="@+id/search_button" 

  android:text="@string/search"

  android:layout_width="wrap_content" 

  android:layout_height="wrap_content" 
    />

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

<resources>

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

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

</resources>

 
This was an Example on how to Create a basic User Interface for your Android Activities.

Related Article:

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

and many more ....

Do you want to know how to develop your skillset and become a ...

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!
Get ready to Rock!
To download the books, please verify your email address by following the instructions found on the email we just sent you.

THANK YOU!

Close