activity

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:

Ilias Tsagklis

Ilias is a software developer turned online entrepreneur. He is co-founder and Executive Editor at Java Code Geeks.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button