Create first android app using Android studio

In this post, we are going to create first android app which will show result of multiplication of two user input numbers. We have already created Android hello world example before but it was too basic.
We are going to design our screen as below:
Android First App

We are not going to put much validations here. We will just create above screen which will show multiplication of two numbers in Result textview.

Steps for creating first android app using Android studio:

Step 1: 

Create a new android project named "MultiplicationApp". Provide Activity name as "MultiplicationActivity" instead of "HelloWorldActivity".

Step 2:

Go to res -> layout -> activity_multiplication.xml. Paste following code in xml file to create multiplication screen.
<?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_multiplication"
    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.java2blog.multiplicationapp.MultiplicationActivity">

    <TextView
        android:text="Number 1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="38dp"
        android:layout_marginStart="38dp"
        android:layout_marginTop="103dp"
        android:id="@+id/textView1"
        android:textSize="18sp" />

    <TextView
        android:text="Number 2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="206dp"
        android:layout_marginLeft="38dp"
        android:layout_marginStart="38dp"
        android:id="@+id/textView2"
        android:textSize="18sp" />
    <TextView
        android:text="Result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="309dp"
        android:layout_marginLeft="38dp"
        android:layout_marginStart="38dp"
        android:id="@+id/textView3"
        android:textSize="18sp" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:ems="10"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/textView1"
        android:layout_toEndOf="@+id/textView1"
        android:layout_marginLeft="41dp"
        android:layout_marginStart="41dp"
        android:layout_marginTop="91dp"
        android:id="@+id/editText1" />
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:ems="10"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/textView2"
        android:layout_toEndOf="@+id/textView2"
        android:layout_marginLeft="41dp"
        android:layout_marginStart="41dp"
        android:layout_marginTop="182dp"
        android:id="@+id/editText2" />

    <Button
        android:text="Multiply"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@+id/textView2"
        android:layout_toEndOf="@+id/textView2"
        android:layout_marginBottom="48dp"
        android:id="@+id/button" />

    <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/textView3"
        android:layout_toRightOf="@+id/button"
        android:layout_toEndOf="@+id/button"
        android:layout_marginLeft="35dp"
        android:layout_marginStart="35dp"
        android:id="@+id/textView4"
        android:textSize="18sp" />
</RelativeLayout>

Step 3: 

Go to app -> java -> package -> MultiplicationActivity.java.
Change MultiplicationActivity.java as below:
package com.java2blog.multiplicationapp;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;


public class MultiplicationActivity extends AppCompatActivity {

    private EditText edittext1,edittext2;
    private TextView textView;
    private Button buttonMulti;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_multiplication);
        multiplyOnButtonClick();
    }

    public void multiplyOnButtonClick(){
        edittext1=(EditText)findViewById(R.id.editText1);
        edittext2=(EditText)findViewById(R.id.editText2);
        textView=(TextView) findViewById(R.id.textView4);
        buttonMulti=(Button)findViewById(R.id.button);

        buttonMulti.setOnClickListener(new OnClickListener(){

            @Override
            public void onClick(View view) {
                String value1=edittext1.getText().toString();
                String value2=edittext2.getText().toString();
                Double num1=Double.parseDouble(value1);
                Double num2=Double.parseDouble(value2);
                double multi=num1*num2;
                textView.setText(""+multi);
                Toast.makeText(getApplicationContext(),String.valueOf(multi),Toast.LENGTH_LONG).show();
            }

        });

    }
}
To get any widget reference in activity class, you can use id which you have defined in layout xml file. So to get reference for editText corresponds to "Number 1" in the screen, we have used below code:
EditText edittext1=(EditText)findViewById(R.id.editText1);
You can get text entered by user in that edit text by using below code:
String value1=edittext1.getText().toString();
We have also put click listener on button named "Multiply".
 buttonMulti.setOnClickListener(new OnClickListener(){

            @Override
            public void onClick(View view) {
                String value1=edittext1.getText().toString();
                String value2=edittext2.getText().toString();
                Double num1=Double.parseDouble(value1);
                Double num2=Double.parseDouble(value2);
                double multi=num1*num2;
                textView.setText(""+multi);
                Toast.makeText(getApplicationContext(),String.valueOf(multi),Toast.LENGTH_LONG).show();
            }

        });

Step 4 : 

Run the app. When you run above app on emulator, you will get below screen:
Android first app preparation
Provide user input numbers and click on multiply, you will get the result.
Android first app development
We are done with first  android app using android studio.
Happy Android Learning!!

Written by Arpit:

If you have read the post and liked it. Please connect with me on Facebook | Twitter | Google Plus

 

Java tutorial for beginners Copyright © 2012