ZOFTINO.COM android and web dev tutorials

Android App Development with Example for Beginners

Android apps can be developed using android studio or eclipse IDEs. For this sample, we are going to use android studio. Before we jump into project and start coding, I am going to explain few components and elements of android which are used in this project.

Each screen you interact with when you open an app is provided by an activity component. In this example, we have one screen so we will create one activity. Android system uses call back methods to inform activity about screen status changes. Activity components are defined in manifest xml file. UI layouts are defined in xml file and used in activity to set the layout for activity screens.

This example project is called distance converter. It converts distance entered into km or miles. It lets user to enter distance, select distance type and submit for conversion. Converted distance will be displayed on the same screen.

If user clicks button without entering distance or selecting type, message popup will be displayed informing user about the same using Toast. Onclick event handler for the button is mentioned in the layout xml file and the event handler method is placed in the activity class.

distance converter app activity screen

Below are the steps to create project

  1. Open android studio
  2. Click start new project.
  3. Enter application name and company domain. These values are used to come up with package name. Click next.
  4. Select phone and tablet on target android devices screen. On the same screen, you can set minimum SDK for your app, leave default setting for this simple app. Click next.
  5. Select empty activity on add an activity to mobile screen and click next.
  6. Enter activity name and layout name and click finish.

Below are the main files which get created

  1. AndroidManifest.xml in app/manifest folder. This file lists app components and permission requirements for app
  2. MainActivity.java file in app/java. This is an activity class.
  3. activity_main.xml in app/res/layout folder. This file contains UI layout information for activity.

AndroidManifest.xml

 <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.firstapps.distanceconverter">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest> 

Activity class

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    public void convertDistance(View view ){
        EditText editText = (EditText) findViewById(R.id.distance);
        String distance = editText.getText().toString();

        RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rgrp);

        try{
            int rbid = radioGroup.getCheckedRadioButtonId();
            RadioButton selectedRadioButton = (RadioButton)radioGroup.findViewById(rbid);
            String disttype = selectedRadioButton.getText().toString();

           String targetDistType = "";
           double dist = Double.valueOf(distance);
            if("Km".equals(disttype)){
                dist = 0.621371 * dist;
                targetDistType = getString(R.string.miles);
            }else{
                dist = 1.60934 * dist;
                targetDistType = getString(R.string.km);;
            }
           TextView convertedDist = (TextView) findViewById(R.id.converted_dist);
           convertedDist.setText(dist+" "+targetDistType);
        }catch(Exception e){
            Toast toast = Toast.makeText(getApplicationContext(), getString(R.string.errorMs), Toast.LENGTH_SHORT);
            toast.show();
        }

    }

}

Layout Xml

 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.firstapps.distanceconverter.MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter Distance"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="15dp"
        android:id="@+id/distlable"></TextView>
    <RadioGroup
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@+id/distance"
        android:layout_marginTop="14dp"
        android:gravity="center"
        android:id="@+id/rgrp">
        <RadioButton
            android:text="Km"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/rb_km"></RadioButton>
        <RadioButton
            android:text="Miles"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/rb_miles"/>
    </RadioGroup>
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:ems="10"
        android:id="@+id/distance"
        android:layout_marginRight="18dp"
        android:layout_marginEnd="18dp"
        android:layout_alignBaseline="@+id/distlable"
        android:layout_alignBottom="@+id/distlable"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"></EditText>
    <Button
        android:text="Convert Distance"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="104dp"
        android:id="@+id/convert"
        android:onClick="convertDistance"
        android:layout_below="@+id/rgrp"
        android:layout_centerHorizontal="true"></Button>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rgrp"
        android:layout_alignLeft="@+id/distance"
        android:layout_alignStart="@+id/distance"
        android:layout_marginTop="52dp"
        android:id="@+id/converted_dist"></TextView>
</RelativeLayout>

String Values

<resources>
    <string name="app_name">DistanceConverter</string>
    <string name="miles">Miles</string>
    <string name="km">Km</string>
    <string name="errorMs">Please enter distance and select type.</string>
</resources>