Build Android App with Android Studio

19 minutes, 59 seconds

Android is an open mobile platform that is super popular by smartphone users worldwide

Since of Google introduced and commit to build better tool for Android with Android Studio developing for Android is better, fun and rewarding.

feature

You can download Android Studio for Mac and Windows from here. Unfortunately we will not talk about how to install the Android Studio, but surely there is a guide on the official website installer.

What the knowledge to have

Android developer need to know Java, the main language to devlop Android. On top of that, make sure you also know about OOP or Object Oriented Programming.

Also we also need to understand XML that powers many elements inside Android development such app manifest and layouts.

‘Hello World’ Android App

Now let’s get started to build your first Android Studio app. We will cover the fundemental of an Android working.

At the time of writing, current version of Android Studio is 2.2.2.

1. Create a New Project

Now open the Android Studio, go to File > New > New Project. You will be prompted with this dialog:

Screen Shot 2016-11-08 at 10.38.01 PM.png

Application name is what your name want to be refer, it will be on the directory name, app definition and on the icon label.

Company Domain you should put like website domain conversion name like ‘yourorganization.com’.

The Package name is created automatically, but it’s possible to edit to your preference.

A check-mark for including C++ support which we usually don’t do. So leave it unchecked.

Lastly, Project Location is the directory that you will save the project at. For Mac computer, you can save at this kind of directory: ‘user/Android/App/’. Make sure the directory don’t use spaces, otherwise a warning will show up.

Click Next.

2. Target Android Devices

Screen Shot 2016-11-08 at 11.14.11 PM.png

This dialog ask you, what type of Android devices you want to build for. There are : Phone and Tablet, Wear, TV, Android Auto and Glass. But we interested only for Phone and Tablet.

Leave the default checked at Phone and Tablet.

Minimum SDK : API 14 : Android 4.0 (IceCreamSandwich).

Deciding what the minimum Android OS can run this app, the lower it’s the more devices you can support, well because many Android devices are non-friendly OS upgrade. But you to need know the optimum minimum support so that you can build better apps with using latest technologies while having more potential users.

Refer Android platform version and distribution site.

Click Next.

3. Choose Project Template

Template

Please choose default ‘Empty Activity’.

Activity is a term like a UIViewController for iOS. It is the current state of view.

The project template give you choices of the main Activity that suitable, or no activity at all.

Click Next for Customize the Activity like this screen.

SS

For this new empty activity, we just can leave with default value. Anyway, it ask you the name of the Activity class and also ask that do you want to create a XML layout file. And also we want to support backward compability.

Notice the naming convention for Activity Name (or its class) is ‘UpperCamelCase’ and Layout Name is ‘lowercase_separate_by_underscore’.

4. Enter Android Studio IDE

Yahoo, you just enter the world of Android Studio like this.

Screen Shot 2016-11-09 at 12.07.59 AM.png

You may notice that the theme of this IDE is dark. You may change to this theme if you want at Preferences. Expand Apprearance & Behaviour, choose Appearance, change theme to ‘Dracula’.

It’s looks a bit complex, but surely you will get familiar with it by using oftenly. And if you from Xcode developer, it might look pretty self explantory, which is good.

We will discuss about the structure of Android app project in Android Studio. At the project pane on the left, make sure you on the ‘Android’ tab.

Here is the structure of Android Project, and some important files that we will work with:

Inside App Folder
? manifests
? AndroidManifest.xml <- App permisions, app overall style, activities declarations and more.

? java
? com.irekasoft.myapplication
? MainActivity <- Main Activity class

? res
? drawable
? layout
? activity_main.xml <- this is the layout representative of Main Activity
? mipmap
? ic_launcher.png (multiple kinds hdpis images) <- It’s the default icon
? values
? colors.xml
? dimens.xml (multiple files for different device’s size)
? strings.xml <- for defining user-facing Strings
? styles.xml

Inside Gradle Scripts Folder
? build.gradle (Project: MyApplication) <- Place for dependancies
? build.gradle (Module: app) <- defining app version / build and also declaring dependancies

To open and to start edit the file you have to double click on the file.

5. Working with Layout

Please open the ‘activity_main.xml’, and it will looks like this.

AA

Center : the canvas of your layout.

On the left top: Palette – there is the widget that you can drag and drop to the center canvas.

On left bottom : Component Tree – it’s the hierarchy of components for the current layout.

On the right side : Properties – it is the current’s selected property inspector. Your current selection is highlighted at ‘Component Tree’ and the center canvas. It shows the essential properties, but you always can view all the properties by click at the bottom ‘View all properties’.

Now lets add a Button by dragging ‘Button‘ from palette to the canvas. By having the button keep selected, see the properties, find ‘onClick‘ field, and add ‘doSomething‘ to the value field.

S

What we just did was we assign the button to repond for ‘onClick’ for ‘doSomething’ function, which we will write at ‘MainActivity’ class.

6. Code the MainActivity Class

So after we play around with the layout, now we go it’s respondant class: ‘MainActivity‘. As said earlier MainActivity is like the view controller, and it’s being the first view controller that being called upon app opening. It’s actually predefined at ‘AndroidManifest.xml‘.

Previously, we have set a button to respond to a function called ‘doSomething’, now we gotta implement it.

Open the MainActivity class and add this function inside the class area, after ‘onCreate’ function.


public void doSomething (View view){

  Log.i("Log","I'm printing out something");
  
}

So the full code for ‘MainActivity’ will be like this:


package com.irekasoft.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

  public void doSomething (View view){

    Log.i("Log","I'm printing out something");

  }

}

It’s need to note that if you are writing the code, the class has not yet have the right component that being imported to the class yet. So there will be a import suggestion that need to be click on Android Studio automatically adds the import statement for particular item.

In this case we have to use View, but it has not declared yet on the class, so by after a while Android Studio will suggest you to import the View component. You may click on the dialog or with keyboard shortcut alt-enter.

7. Run the App on Emulator

So your app is quite ready to be runned on emulator or Android device. By click the green Run button, we will execute the project for execution weather on emulator or Android device.

Here is some guide to create an Android Virtual Devices.

It will show kind of devices that ready with your Android Studio.

Screen Shot 2016-11-09 at 1.03.14 AM.png

By selecting your desired device, click OK.

It will start the program on the selected method, which in this case I choose ‘Nexus 5X API’.

S

So by tapping on the button, it will call ‘doSomething’ function, then inside the function we call:


Log.i("Log","I'm printing out something");

Which is a code for print out something on the ‘Android Monitor’ like this when you tapped on the button.

AAA

Make sure you choose the right device and app that you want to monitor.

More Activity Yeah!

So you just made an app that can print out something. Yeah, not bad to get started. But lets make another Activity and we can jump to the new Activity, and also pass out some data. Furthermore we also want to get the callback how the activity get closed.

1. Create New Blank Activity

Right-click on ‘com.irekasoft.myapplication’ folder, New > Activity > Empty Activity like this.

Screen Shot 2016-11-09 at 1.14.31 AM.png

It will open this dialog.

Screen Shot 2016-11-09 at 1.16.00 AM.png

Name the new activity as ‘SecondActivity‘. Be a good programmer by naming the class properly, use RightName + Activity to indicate the class is an Activity class.

The Layout Name will be automatically changed based on Activity Name.

Click Finish. It will added declaration in AndroidManifest.xml, created a new class called ‘SecondActivity’ and also layout XML file called ‘activity_second.xml’.

2. Edit The Layouts

activity_main.xml

Edit this first ‘activity_main.xml’ by adding a Plain Text Field (Edit Text) on top of the button. On the property clear the text’s value, add at ‘hint’ key with ‘Name’. Importantly name the ID as ‘et_name‘, because ID is something we will refer on the code. ‘et’ is stand for edit text.

Edit overall appearance to be like this.

a

activity_second.xml

Add a text view into the canvas. Set the ID as ‘tv_main’. As you guess it ‘tv’ is for text view.

Add 2 buttons as below:

AA

For Smile button set onClick for ‘doSmile‘.

For Shake Hands set onClick for ‘doShakeHands‘.

3. Lets Code Activity Classes

MainActivity

Declare an EditText variable inside the class closure like this.


EditText et_name;

To make the variable refers to the item that inside our layout we have to code like this at ‘onCreate’ function.


@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  // this will refert to ID called 'et_name'
  et_name = (EditText)findViewById(R.id.et_name);

}

We can test out by print out the value. At doSomething function edit to this codes.


public void doSomething (View view){
  
  Log.i("Log","My name is : " + et_name.getText().toString());

}

Run the app, try to enter your name, and see at the log, if your name show up. If so, congrates!

Intent

To make an activity open another activity we will use something that is called Intent. It’s also responsible to bring extra value to another place that we want to open. Now lets implement it at ‘doSomething‘ function.

Basic


Intent intent = new Intent(this, SecondActivity.class);
startActivity(intent);

This code is enough to make the SecondActivity show up on the front.

With Extra


Intent intent = new Intent(this, SecondActivity.class);
intent.putExtra("EXTRA_NAME", "name"); // EXTRA_NAME is the referal key, name is the value. All in String
startActivity(intent);

Lets make some clean up by declaring a ‘name’ variable.


String name = et_name.getText().toString();

Intent intent = new Intent(this, SecondActivity.class);
intent.putExtra("EXTRA_NAME", name);
startActivity(intent);

SecondActivity

On the SecondActivity after it will be show up we will display the inpputted name from ‘MainActivity’.

First, we have to get connected with the widget from the layout. Refer how we did it for Edit Text, we use the same technique.


// declaration
TextView tv_main;
// inside onCreate, before the closure
tv_main = (TextView)findViewById(R.id.tv_main);

By refering TextView as ‘tv_main’ we can set the text view programmatically.

Now, we have to get the passed extra. Add this after ‘tv_main’ referal code.


Intent intentObject = getIntent();
String name = intentObject.getStringExtra("EXTRA_NAME");

// now we can set the main text view with getted name String
tv_main.setText("Hi " + name + "!");

If you try to run the app, the text that you write from first activity will be displayed on the second activity. Horray!

Add the respondants for 2 buttons’s onClick. Like we did on MainActivity, just add 2 functions for button’s onClick.


public void doSmile (View view){
  // Nice code to show alert
  Toast.makeText(this,"☺️",Toast.LENGTH_SHORT).show();
  finish(); // close the activity
}

public void doShakeHands (View view){
  Toast.makeText(this,"Shake hands",Toast.LENGTH_SHORT).show();
  finish();
}

Try to run the app, after you enter your name and say ‘nice to meet you’, the second activity will show your name. By tapping on each button it will show up a ‘Toast’ with text, at the same time the activity is closng.

4. Deal with the Responses

Now back to ‘MainActivity’ we have to add this code for responding to callback.


@Override
  protected void onActivityResult(int requestCode, int resultCode, Intent data) {

  if(requestCode==1) {
    String response = data.getStringExtra("RESPONSE");
    Log.i("Log","Awesome, we then " + response);
  }

}

Then at ‘doSomething’ function, we have to change the ‘startActivity‘ to ‘startActivityForResult‘. Change the function this.


public void doSomething (View view){

  String name = et_name.getText().toString();

  Log.i("Log","My name is : " + et_name.getText().toString());

  Intent intent = new Intent(this, SecondActivity.class);
  intent.putExtra("EXTRA_NAME", name);
  startActivityForResult(intent, 1);

}

On the SecondActivity, change the onClick functions with this.


public void doSmile (View view){
  Toast.makeText(this,"☺️",Toast.LENGTH_SHORT).show();

  Intent intent=new Intent();
  intent.putExtra("RESPONSE","Smiled");

  setResult(1,intent);

  finish();
}

public void doShakeHands (View view){
  Toast.makeText(this,"Shake hands",Toast.LENGTH_SHORT).show();

  Intent intent=new Intent();
  intent.putExtra("RESPONSE","Shook hands");

  setResult(1,intent);

  finish();
}

Try to run the app, do as like before, but after you tapped button at the second activity you will get a callback at main activity, which print out on the console.

About Android Context

You probably seen this or getContext() or getApplicationContext, what is the hell of context? From Android Developer page, context is defined as:

“Interface to global information about an application environment. This is an abstract class whose implementation is provided by the Android system. It allows access to application-specific resources and classes, as well as up-calls for application-level operations such as launching activities, broadcasting and receiving intents, etc.”

Bascially what we need to do is to provide the right context for the functions that required it. If you write code at Activity, use ‘this’ and at Fragment use getContext() or getApplicationContext() based what the compiler says.

Where to Go From Here

We just made a simple app, and the core concept of Android architecture with its Activity and Layout, how it’s working together and how to call another activity and get the callback after it close.

It’s a nice journey that you have made to become an Android developer. And it just the beginning. We have not cover deeply on the layout yet, but it’s something need to be experiment and master with practice, try and error and having some fun.