articles

Home / DeveloperSection / Articles / UI and Event Handling in Android

UI and Event Handling in Android

Chris Anderson7626 15-Oct-2011

In this article I am going to explain how to create user interface and how to handle event with user interaction. Here I am going to create a simple application that takes input from the user and convert it Fahrenheit to Celsius or Celsius to Fahrenheit.

Create Attributes:

Android allows us to create attributes for resources, e.g. for strings, color, drawable, etc. These attributes can be used in UI definition via XML or in Java source code.

Select the file "res/values/string.xml" and press "Add".

UI and Event Handling in Android

Select String and click OK.

Enter the name and value of added String as shown below:

UI and Event Handling in Android

Add also the following "String" attributes for the application:

Name

Value

onCalcClick

onCalcClick

Fahrenheit

To Fahrenheit

Celsius

To Celsius

Calculate

Calculate

We can also directly create the attributes in xml as shown here:

<?xml version="1.0" encoding="utf-8"?> 
<resources>
     <string name="hello">Hello World, Convert!</string>
     <string name="app_name">Convert Temperature</string>
     <string name="onCalcClick">onCalcClick</string>
     <string name="Fahrenheit">To Fahrenheit</string>
     <string name="Celsius">To Celsius</string>
     <string name="Calculate">Calculate</string>
</resources>

 

Save the string.xml file.

Move to the UI Element:

Select "res/layout/main.xml" and open the Android editor via a double-click. This editor allows us to create the UI via drag and drop or via the XML source code. We can switch between both representations via the tabs at the bottom of the editor. For changing the postion and grouping elements you can use the outline view.

Now for this application drag and drop the following controls from the Palette:

  •     EditText
  •     RadioGroup
  •     Button

UI and Event Handling in Android

Switch to "main.xml" and verify that our XML looks like the following.

<?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:layout_width="match_parent" android:id="@+id/editText1"
     android:layout_height="wrap_content" android:inputType="number">
         <requestFocus></requestFocus>
     </EditText>
     <RadioGroup android:id="@+id/radioGroup1"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content">
         <RadioButton android:text="RadioButton"
                      android:id="@+id/radio0"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:checked="true">
        </RadioButton>
         <RadioButton android:text="RadioButton"
                        android:id="@+id/radio1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">
         </RadioButton>
     </RadioGroup>
     <Button android:text="Button" android:id="@+id/button1"
               android:layout_height="wrap_content"
       android:layout_width="114dp">
     </Button>
</LinearLayout>

 

Assign the "Celsius" string attribute to "text" property of the first radio button and "Fahrenheit" to the second radio button and “Calculate” to button. Also assign “onCalcClick” string to the onclick property of button.

UI and Event Handling in Android

UI and Event Handling in Android

<?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:layout_width="match_parent" android:id="@+id/editText1"
     android:layout_height="wrap_content" android:inputType="number">
         <requestFocus></requestFocus>
     </EditText>
     <RadioGroup android:id="@+id/radioGroup1"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content">
         <RadioButton android:id="@+id/radio0"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:checked="true" android:text="@string/Celsius">
         </RadioButton>
         <RadioButton android:id="@+id/radio1"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content" android:text="@string/Fahrenheit">
         </RadioButton>
     </RadioGroup>
     <Button android:id="@+id/button1"
               android:layout_height="wrap_content"
               android:layout_width="114dp"
               android:text="@string/Calculate"
               android:onClick="onCalcClick">
     </Button>
</LinearLayout>

Select "src/com.android.temperature" and open the Convert.java file. Change "Convert.java" to the following:

import android.app.Activity; 
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.Toast;
package com.android.temperature;
public class Convert extends Activity {
        private EditText text;

        @Override
        public void onCreate(Bundle savedInstanceState) {
               super.onCreate(savedInstanceState);
              setContentView(R.layout.main);
               text = (EditText) findViewById(R.id.editText1);
       }

        // This method is called at button click because we assigned the name to the
        // "On Click property" of the button
        public void onCalcClick(View view) {
         switch (view.getId()) {
             case R.id.button1:
             RadioButton celsiusButton = (RadioButton) findViewById(R.id.radio0);
             RadioButton fahrenheitButton = (RadioButton) findViewById(R.id.radio1);
              if (text.getText().length() == 0) {
                Toast.makeText(this, "Please enter a valid number",
                                         Toast.LENGTH_LONG).show();
                            return;
                     }
                      float inputValue = Float.parseFloat(text.getText().toString());
               if (celsiusButton.isChecked()) {
                  text.setText(String.valueOf(convertFahrenheitToCelsius(inputValue)));
                  celsiusButton.setChecked(false);
                  fahrenheitButton.setChecked(true);
               }
        else {
        text.setText(String.valueOf(convertCelsiusToFahrenheit(inputValue)));
              fahrenheitButton.setChecked(false);
              celsiusButton.setChecked(true);
              }
               break;
            }
       }

        // Converts to celsius
        private float convertFahrenheitToCelsius(float fahrenheit) {
               return ((fahrenheit - 32) * 5 / 9);
       }

        // Converts to fahrenheit
        private float convertCelsiusToFahrenheit(float celsius) {
               return ((celsius * 9) / 5) + 32;
       }
}

 

To start the Android Application, select your project, right click on it, Run As Android Application. The emulator starts up very slow. You should get the following result.

 

UI and Event Handling in Android

Type in a number, select your conversion and press the button. The result should be displayed and the other option should get selected. Select To Fahrenheit radiobutton and enter 100 in input box, it will convert it into Celsius (212.0).


Updated 04-Mar-2020
hi I am software developer at mindstick software pvt. ltd.

Leave Comment

Comments

Liked By