Home

Material Design App Example - Android Studio Tutorial

In a previous article I explained how to build the smallest 6KB Android app from scratch. It is good for learning purposes but you know it is difficult for a beginner to build a complete app from scratch. So lets do it in the usual way with this material design app example project. This app simply asks for your name. After you enter it and tap the button it will say hello to you. Lets do this.

Create Project

First, open Android Studio. From start screen click on create project. If you are already inside Android Studio goto file menu to create new project.

Android Studio Create Project

It will show you a wizard to setup the project. First thing you need to do is give a name to the project. Enter a domain for setting the package name. If you don’t have a domain just put something like ajinasokan.com. It doesn’t matter. Also chose a location to save this project.

Android Studio New Project Naming

In next page select the type of Android devices and versions your app should support. Here I’m selecting only Phone and Tablet and the minimum required Android version as 4.0 ICS. You can see Android studio is giving some statistics of number of devices your app will support.

Android App Target Devices API Level

In this page you can select a predefined app template to begin design app. You can also select Add No Activity and build app from scratch. But here I’m selecting the Empty Activity because that will give a basic material design styled activity.

Android App Activity Templates

Here you can customize the name of the activity. These are just for programming purposes. So I’m leaving it as default. That check box for AppCompat determines whether or not include the compatibility library in our app. Now click on Finish to create the project.

Android App New Activity

After creating the project our project will look something like this. Yes there are a lot of files. I have explained about different files and folders in an APK file in my previous article. Try to remember them.

Android Material Design App Structure

What is in it?

Now lets take a deeper look into the files and see what are the changes compared to the app we built from scratch in previous chapter.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.innoventionist.helloworld">
    <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>

In this one you can see some extra properies for application tag. allowBackup property sets whether or not the app can be backuped through ADB. Many apps disable this feature to protect their data. icon property sets the icon of the app. supportsRtl enables different APIs that enables support designing apps with Right To Left layouts (for Arabic, Urdu etc.). The theme propery sets a custom theme which is defined in the styles.xml file.

activity_main.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.innoventionist.helloworld.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</RelativeLayout>

In the layout file you can see RelativeLayout is used instead of LinearLayout. Because it gives more flexibility to design UI. You can place components on top of another, specify more layout constraints. And for the padding properties, dimensions specified in the dimens.xml.

MainActivity.java

package com.innoventionist.helloworld;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

Here’s the code. As you can see there is no much difference in code. Instead of Activity you can see AppCompatActivity in the code. This is because, you can guess, the AppCompat library.

Lets Edit!

So we have a template of a simple material design app here. Now lets edit it and make some changes to make it ours. I will be doing some simple things such as adding a text box and a button and linking the button in the code. I’m not doing this in the best method which is a little bit different. But for making it simple and less confusing I’m following this method. So lets go.

activity_main.xml

In the layout we have a simple layout. So I’m changing the RelativeLayout to LinearLayout. Make sure you replace the closing tag at the bottom too if Android Studio didn’t change it automatically. Also add orientation propery and set it as vertical. This is mandatory for LinearLayout.

Next the text property of TextView was set to Hello World. Let’s change it to Welcome to my app. It will look something like this:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Welcome to my App" />

Next create a EditText (Editable Textbox) below our text view. The id property lets to identify it in the code. I have given it as name. And the hint property sets the prompt which is shown when there is nothing in the textbox. I am giving it as Enter Name. So it will look something like this:

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/name"
    android:hint="Enter Name" />

Next lets add a Button. Its text property is set to Click Me. Its onClick property is set to sayhello which is the function in our code that will be executed when clicking this button. Here is the code:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click Me"
    android:onClick="sayhello"/>

Thats it. Here is the completed code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:orientation="vertical"
    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.innoventionist.helloworld.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to my App" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/name"
        android:hint="Enter Name" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        android:onClick="sayhello"/>
</LinearLayout>

The design is done. Now lets move on to the code.

MainActivity.java

In the code inside MainActivity class add this method:

public void sayhello(View view){
    EditText nameField = (EditText) findViewById(R.id.name);
    Toast.makeText(getApplicationContext(), "Hello " + nameField.getText(), Toast.LENGTH_SHORT).show();
}

This is the function which is triggered when the button is clicked. After pasting this code some parts of it will be in red color because the references to that components are not added to the code. So to resolve it just bring mouse above them. Android Studio will ask you whether you want to import those components to your code. Press Alt + Enter to do so. This will add import statements like import android.widget.EditText; to the code.

A little bit of theory

Now lets see what this does. In Object Oriented Programming, in Java, Class defines a category components with different functions or methods and Object is an instance of a Class which is real and exists. In the code AppCompatActivity, MainActivity, View, EditText, Toast are classes. They are just definitions. So in order to access the text box we need a an Object of it. This is done with the code line EditText nameField = (EditText) findViewById(R.id.name);. Now we have an Object of EditText class named nameField which is linked with the text field with id name. Whatever we do in this nameField it will reflect in the UI.

In the next line it creates a Toast, which is a simple notification method. The content shown in the toast is Hello + the contents of the textbox. The time duration the toast is shown is short, ie. Toast.LENGTH_SHORT. That means you enter your name to the text box. When you click on the button the app will say hello to you. So here is the final code:

package com.innoventionist.helloworld;

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

public class MainActivity extends AppCompatActivity {

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

    public void sayhello(View view){
        EditText nameField = (EditText) findViewById(R.id.name);
        Toast.makeText(getApplicationContext(), "Hello " + nameField.getText(), Toast.LENGTH_SHORT).show();
    }
}

Now build the APK and send it your phone and run it (I will give you a better method to do this in next chapter). It will work something like this:

Android Material Design Hello App Example

Yaay! How was it? Not bad, isn’t it? Try changing things in the code. Explore more. Add more buttons and fields. Try a calculator! And I will be preparing more examples to you.

To be continued..