---
title: "UI and Event Handling in Android"  
description: "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 a"  
author: "Chris Anderson"  
published: 2011-10-15  
updated: 2020-03-04  
canonical: https://www.mindstick.com/articles/782/ui-and-event-handling-in-android  
category: "android"  
tags: ["android"]  
reading_time: 7 minutes  

---

# UI and Event Handling in Android

In this article I am going to explain how to create [user interface](https://www.mindstick.com/blog/302016/what-is-user-interface-and-what-are-its-benefits) and how to handle event with user interaction. Here I am going to create a simple [application](https://www.mindstick.com/articles/12824/calculator-application-in-android) that takes [input from the user](https://www.mindstick.com/forum/158952/what-are-the-different-methods-for-reading-input-from-the-user-in-python) and convert it Fahrenheit to Celsius or Celsius to Fahrenheit.\

**Create [Attributes](https://www.mindstick.com/articles/13105/2-attributes-that-make-your-odoo-ecommerce-theme-productive-and-engaging):**

Android allows us to create attributes for resources, e.g. for strings, color, drawable, etc. These attributes can be used in UI [definition](https://yourviews.mindstick.com/view/70598/false-furore-over-the-leadership-definition-statement-of-army-chief-bipin-rawat) via XML or in Java [source code](https://www.mindstick.com/forum/23271/is-there-a-way-to-get-the-source-code-from-an-apk-file).

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

![UI and Event Handling in Android](https://www.mindstick.com/mindstickarticle/1e942b88-1232-4a27-b619-17cba579d1b2/images/01c01ab2-888b-46ea-b8c1-d52defc0dcb6.png)

Select String and click OK.

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

![UI and Event Handling in Android](https://www.mindstick.com/mindstickarticle/1e942b88-1232-4a27-b619-17cba579d1b2/images/6fb3ae42-0bad-4c9e-a79d-64ed09c54c21.png)

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](https://www.mindstick.com/forum/454/how-to-drag-and-drop-multiple-image-from-one-canvas-to-onther-canvas-in-html5) 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](https://www.mindstick.com/mindstickarticle/1e942b88-1232-4a27-b619-17cba579d1b2/images/3b0cc3c8-77f9-4c7d-818d-6ecd19d5b96a.png)

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](https://www.mindstick.com/mindstickarticle/1e942b88-1232-4a27-b619-17cba579d1b2/images/7e7a9640-baba-4fcc-8a77-baa15953cfdb.png)

![UI and Event Handling in Android](https://www.mindstick.com/mindstickarticle/1e942b88-1232-4a27-b619-17cba579d1b2/images/bfa4c61a-da48-4612-8a02-bbb0a36d8e9b.png)

```
<?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](https://www.mindstick.com/mindstickarticle/1e942b88-1232-4a27-b619-17cba579d1b2/images/b24b1550-4c17-469d-a874-25aab77167aa.png)

Type in a number, select [your conversion](https://www.mindstick.com/forum/156197/what-can-you-do-to-improve-your-conversion-rates) and press the button. The result should be displayed and the other option should get selected. Select To Fahrenheit [radiobutton](https://www.mindstick.com/blog/233/get-checked-radiobutton-using-javascript) and enter 100 in input box, it will convert it into Celsius (212.0).

---

Original Source: https://www.mindstick.com/articles/782/ui-and-event-handling-in-android

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.