Home

Android App for Website - Android Studio Tutorial

By Ajin Asokan in Blog . 6 min read
Sep 30, 2016

In this tutorial I will explain how to build a material design android app for website. There are many websites which does this in a click. But all of them lack material design and much options for customization. If you are ready to build it by yourself follow this tutorial. This is comparatively an easy method. I will be using the techniques I applied in the previous tutorials to build this one. This tutorial is a little bit long, so I will be explaining the most important steps. So lets start.

Create Project

First open Android Studio and start a new project. I am giving the name as WebsiteApp.

Android Studio New Project

I am choosing the minimum SDK as API 14.

Android App for Website Target Android Devices

Here choose the Navigation Drawer Activity. Our app uses navigation drawer for showing different sections of the app.

Navigation Drawer Activity Template

I am leaving the names as the default. Click finish.

New Activity Name

Now it will create the project.

Change Colors

I am giving a dark colors to app. It is your choice. To get material design color codes use this link.

To change color open colors.xml. There you can see three color codes. colorPrimary, colorPrimaryDark and colorAccent. I am setting the colors as follows.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#212121</color>
    <color name="colorPrimaryDark">#000000</color>
    <color name="colorAccent">#009688</color>
</resources>

Setting Launcher Icon

You can either use our own PNG icons or you can create a simple one using built in tool inside Android Studio. Here I am using built in tool to demonstrate it.

For this first right click on mipmap folder click New » Image Asset

New Image Asset

Below is the icon I made using the tool.

Launcher Icon Designing Tool

To create the same you can set the options in the following configuration.

Launcher Icon Designer Configuration

In next step click Finish.

Launcher Icon Replace Existing

Splash Screen

Many people implement Splash Screen as something user must see before moving to main activity. And they make user wait for nothing. But in my opinion Splash Screens must be something that should be shown to hide the loading process. So it should hide automatically when loading is completed. Here is how to implement this.

First click File » New » Activity » Empty Activity

New Empty Activity

Change the name as SplashActivity. Uncheck Generate Layout File. Select the Launcher Activity and Backward Compatibility. Here I will be using a background drawable instead of a layout for splash screen.

Splash Screen Activity

In the SplashActivity.java file add a new Intent to open our MainActivity. An intent in Android is an action that does something. Here we are using intent to switch to another activity.Here is the complete code:

package com.innoventionist.websiteapp;

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

public class SplashActivity extends AppCompatActivity {

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

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

We need an image to show in the splash screen. Luckily when we create launcher icon studio will automatically create a bigger image for using it in the play store and websites. It will be inside app » src » main folder with name ic_launcher-web.png. Copy it and paste it inside res » mipmap-xxxhdpi folder with name splashimg.png

Launcher Web Icon

Now we need the background drawable for splash screen. For this right click on drawable folder and click New » Drawable resource file

New Drawable Resource File

Give the name as splash.xml.

Splash Screen Drawable

Remove everything inside it and add following code to it. The first item sets a black background and next item shows the launcher icon we copied in the center.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@android:color/black"/>
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/splashimg"/>
    </item>
</layer-list>

Now to set this drawable as the background for splash screen we use a custom style. So to create a style for splash screen open styles.xml and add following code to end of it.

Now we need to edit AndroidManifest.xml. Open it and edit it like this. Intent filters of MainActivity is removed here and it is added to the SplashActivity. Custom theme is set using the theme property and label is given to it.

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

    <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"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
        </activity>
        <activity
            android:name=".SplashActivity"
            android:theme="@style/Splash"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

Now lets edit the navigation drawer. First open res » drawable » sidenavbar.xml. This is the background of the navigation drawer. By default it is set as a green gradient. I am changing this to our previously set variables. And I am removing the center color.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <gradient
        android:startColor="@color/colorPrimary"
        android:endColor="@color/colorPrimaryDark"
        android:type="linear"
        android:angle="135"/>
</shape>

Now open res » layout » navheadermain.xml. This is the header of navigation drawer. I am changing the src of ImageView to our launcher icon and the contents of the TextViews below it. So inside LinearLayout it will look like this

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/nav_header_vertical_spacing"
    app:srcCompat="@mipmap/ic_launcher"
    android:id="@+id/imageView" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/nav_header_vertical_spacing"
    android:text="WebApp Sols Pvt. Ltd."
    android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="[email protected]"
    android:id="@+id/textView" />

Now lets edit the Navigation Drawer menu. It is inside res » menu » activitymaindrawer.xml Open it. There will be many default items. Remove all sub Item tags so that we have only the first Group tag and the next Item with title Communicate on it like this:

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

    <group android:checkableBehavior="single">

    </group>

    <item android:title="Communicate">
        <menu>

        </menu>
    </item>

</menu>

You can also remove the existing images by selecting them and deleting them from the right click menu.

Delete Unused Drawables

It will ask for the procedure of deletion. Just keep everything as default and click OK.

Safe Delete Resources

Now lets add menu items one by one. For each item we need an image. Luckily we have a bunch of material design icons built in to studio. To add them right click on drawable then goto New » Vector Asset. I love Vector Assets because they are very small in size and can be resized to any dimensions without losing quality.

New Vector Asset

In this window the option Material Icon should be selected. Then click on the Android symbol next to text Icon.

Configure Vector Asset

Choose an image of your choice from the list.

Android Studio Builtin Vector Material Design Icons

After that click on Next. In next window click Finish

Finish Asset Creation

So we have the image. Now lets add the item to menu. For that come back to activitymaindrawer.xml and add new item like below.

<item
    android:id="@+id/nav_intro"
    android:icon="@drawable/ic_grade_black_24dp"
    android:title="Intro" />

Add rest of the menu items. I have added 6 of them like below. Notice that each of them have a unique id. Here is the final code:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_intro"
            android:icon="@drawable/ic_grade_black_24dp"
            android:title="Intro" />
        <item
            android:id="@+id/nav_products"
            android:icon="@drawable/ic_apps_black_24dp"
            android:title="Products" />
        <item
            android:id="@+id/nav_services"
            android:icon="@drawable/ic_widgets_black_24dp"
            android:title="Services" />
        <item
            android:id="@+id/nav_clients"
            android:icon="@drawable/ic_group_black_24dp"
            android:title="Clients" />
    </group>
    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_call"
                android:icon="@drawable/ic_phone_black_24dp"
                android:title="+91 999 99 999 99" />
            <item
                android:id="@+id/nav_Website"
                android:icon="@drawable/ic_language_black_24dp"
                android:title="Website" />
        </menu>
    </item>
</menu>

Main Layout

Now lets design our main activity layout. This is easy. We need only a WebView in our activity. To design it first open res » layout » content_main.xml. There will be a TextView for demo purpose. Remove it and add our WebView element.

<WebView
    android:id="@+id/web"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></WebView>

The Relative layout has a small padding. We have to remove it otherwise our WebView will have a small margin. To remove padding remove all the padding properties in the layout and add a single padding propery with 0dp as value. Final code will look like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="0dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main"
    tools:context="com.innoventionist.websiteapp.MainActivity">

    <WebView
        android:id="@+id/web"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>
</RelativeLayout>

Website Page Assets

You have to make some HTML pages to show in the app. For demonstration I have made some. You can download it from here. You can easily make them from the website parts. Here I used the example pages in bootstrap library. I removed unnecessary parts such as navigation bar, footer, menus etc. from HTML. I created 4 pages – intro, products, services, clients.

After creating them or extracting my zip file create a folder named assets inside app » src » main and copy all the files to it.

Web Page Assets

Main Activity

We need to do some tweaks here. First define a web view variable just above onCreate. This is for accessing web view in everywhere inside the code.

WebView Object

Now remove the code inside onClickListener of FloatingActionButton. By default there will be code for showing a snack bar at the bottom. Then add following code in that place. So when the user click the button gmail app will open for sending email to [email protected]

Intent emailIntent = new Intent(Intent.ACTION_SENDTO, Uri.fromParts(
            "mailto","[email protected]", null));
startActivity(emailIntent);

At the end of the onCreate function add following code to initialize WebView with our intro page of the website.

web = (WebView) findViewById(R.id.web);
web.getSettings().setJavaScriptEnabled(true);
web.loadUrl("file:///android_asset/intro.html");

Now lets add actions to the Navigation Drawer items. For this goto onNavigationItemSelected method in the code. Modify the code like below:

@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
    // Handle navigation view item clicks here.
    int id = item.getItemId();

    if (id == R.id.nav_intro) {
        web.loadUrl("file:///android_asset/intro.html");
    } else if (id == R.id.nav_products) {
        web.loadUrl("file:///android_asset/products.html");
    } else if (id == R.id.nav_services) {
        web.loadUrl("file:///android_asset/services.html");
    } else if (id == R.id.nav_clients) {
        web.loadUrl("file:///android_asset/clients.html");
    } else if (id == R.id.nav_call) {
        String phone = "+91 999 99 999 99";
        Intent intent = new Intent(Intent.ACTION_DIAL, Uri.fromParts("tel", phone, null));
        startActivity(intent);
    } else if (id == R.id.nav_Website) {
        String url = "http://www.google.com";
        Intent i = new Intent(Intent.ACTION_VIEW);
        i.setData(Uri.parse(url));
        startActivity(i);
    }

    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawer.closeDrawer(GravityCompat.START);
    return true;
}

For Intro, Products, Services and Clients we just load the respective html file to the WebView. For call button we use an Intent to show the dialer with the phone number. And for the website link we use Intent to load the website link.

Lets do some final touch up. There will be a settings menu at right top of the app. Since we are not using it here we can hide it. To do this goto onCreateOptionsMenu and comment by putting // infront the line that inflates the menu like below.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    //getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

Results

Now run the app and see if it works. Here are the working screenshots:

Navigation Drawer Android App for Website

Intro Page

Intro Page Android App for Website

Products Page

Products Page Android App for Website

Services, Clients Page

Services Clients Page Android App for Website

Try modifying things. Try to run it in the emulator or in your phone. Any trouble? Comment below. I’ll help you.

For source code go to Github repository: Android App Template For Website