Subscribe Now

* You will receive the latest news and updates on your favorite celebrities!

Trending News

Blog Post

Android app development tutorial for beginners / Part 2 – First Android App
Android, Tutorials

Android app development tutorial for beginners / Part 2 – First Android App 

After installing the Android Studio, Its time to create our first android application. If you are not familiar with Java Programming, I suggest you to first learn the syntax and few basic concepts of Java programming and then continue with this course as we will not be able to cover basic Java programming here.

Step 1: Create a new Project

Create new project

Click on Create New Project to create an android application with default settings. On the left panel, our recent projects will be shown and if you have to continue working on our last project, select the project from left panel.

Empty Activity

Activity: An activity can be considered as a single screen/page that accommodates UI components which is displayed on the device at any point of time. An activity is the base part of any android application and every UI based application should have at least 1 activity.

In this wizard Choose Empty Activity and click on Next. The IDE will download necessary gradle files and dependencies if you are using for the first time and may take 15-20 mins depending on your system configuration and internet speed.

Android studio app screen

This is what the IDE dashboard looks like after initializing your project.

IDE Navigation

  • Main Menu: On the top-left side we have our main menu.
  • Build Menu: Below the main menu on the right hand we have controls for Emulator, build, debug, etc.
  • Project Structure: The full-screen panel on the left hand side displays the project directory structure which is useful to browse through the files in app directory.
  • Code Editor : To the right side of Project structure panel, we have our code editor.

Step 2: Understanding the concept

Layout– Green circle, Code – Red Circle

Every UI component that is displayed on the screen has primarily two parts,

  • Layout : It is the UI design of the component. The layout structure decides how a component looks on the screen of a device. It is developed in XML language, which is fairly an easy language. The layout can be found in res > layout > activity_main.xml
  • Code: It can be considered as the backend of the UI. The UI is a static component (which does not change) and to change the UI dynamically we couple our layout with a backend code which handles everything that is displayed on the screen. This part is coded in Java and handles all the heavy lifting. The code can be found in com.example.myfirstapp > MainActivity.java

Step 3: Write Some Code

Copy and paste this code into activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        android:layout_centerInParent="true"/>

</RelativeLayout>

Now your activity should look like this.

Explanation

  • In this code we have used a Relative layout which fills the parent (in this case, the Activity).
  • Notice the layout_width and layout_height property is set to match_parent, which denotes it will take the entire width of its parent container.
  • Inside this layout we have a button with id= btn and text =”Click me”. The width and height of this component( button) is set to wrap_content, to take the minimum dimension possible after accommodating its contents.
  • Also we have set the property layout_centerInParent=true in order to center the button in the parent container (Relative Layout).

The UI part is complete now. Lets move on to the Code part. In this project we will be displaying a toast message when the user clicks on the Click Me button

Copy and paste this code into MainActivity.java file.

package com.example.myfirstapp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    Button btn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //referencing btn by ID
        btn=findViewById(R.id.btn);

        //set onClickListener for listening to click events
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"You clicked me",Toast.LENGTH_LONG).show();
            }
        });
    }
}

Explanation

  • In order to handle functions and events on the button, we need to reference the button from UI.
  • For that, we declared an instance of Button and referenced it with the method findViewByID(). This method returns a view instance with the given ID (in this case ‘btn’) from the UI.
  • Using this instance, we can use different methods and properties of Button. For example, when we need to set the text of button dynamically, we can use the property btn.setText(“some text”) to change the text of the button component.
  • Here, we will be setting an OnClickListener using setOnClickListener() method for button.
  • Then we have an interface View.OnClickListener which need to be passed as the parameter for the same.

Lets Try and Run it!

This is how the application looks like. I prefer to run my test applications on Emulator, but you can run it on the actual device if you want.

When you click on the button CLICK ME, a toast message shows up with text You clicked me.

Congratulations! You have successfully completed your first android application.

If you have not yet installed the android studio, here is the tutorial on how to install and configure Android Studio.

Conclusion

In this tutorial, we have learned the concept of Activity, UI and Code. Also, we have created a simple android application using 2 android components; Button and Toast message.

Hope you guys enjoyed it and if you encounter any trouble or difficulty along the way, feel free to comment your questions and suggestions.

Thank You!

Related posts

Leave a Reply

Required fields are marked *