Android App Development – Welcome Page

0

Sample Application

There is a lot happening in the Android world and I don’t want to be left behind. My new series of articles will be on Android app development. I will be developing a sample Android Application.

Each article starts with a simple example but as we move on and stabilize, we will apply more variations on the example.

In this article, I will set the ball rolling with the welcome screen and an introduction to settings.

If you want to go through the implementation of welcome page, click here.

A sample virtual device based on Nexus 4

Android Development Setup

First let us set up android development env. There are numerous tutorials but I will mention here the steps I followed.

Download Android SDK. I downloaded the Eclipse ADT with Android SDK.

https://developer.android.com/sdk/index.html?hl=i

Instead of eclipse, you may also try Android Studio.

https://developer.android.com/sdk/installing/index.html?pkg=studio

Next, download few SDK packages from SDK Manager. To open SDK maanger in eclipse, click on Window->Android SDK Manager. You will find the details about what to download here:

https://developer.android.com/sdk/installing/adding-packages.html

Once the packages are installed, re-start eclipse to add a virtual device. Below is my AVD.
Android Virtual Device Example

 

Now we are set to create a new Android Application Project. Click on File->New->Android Application Project. Enter application name (sandbox). Project name will be same by default. Fix the package name. Go through the wizard. It is mostly self-explanatory.

 

Android project structure

A simple welcome page

 

Once the project is created, a basic project structure is automatically created for you.

I have circled the files which we are going to modify in this article.

Android automatically creates a blank activity. Try running the application by right clicking on the project and then clicking on ‘Run as’->’Android Application’.

If the app doesn’t start then you may need to speed up the emulator. Please follow the below link:

https://software.intel.com/en-us/android/articles/speeding-up-the-android-emulator-on-intel-architecture

Welcome page tutorial

Most of the android applications start with a welcome screen which has some help content and a next button. Once clicked, the next button will take us to the next page.

 

Welcome page in Android

 

Variation would be a user setting that lets the user decide whether they want to see the welcome page next time they launch the app.
We will add a checkbox “Do not show it again?” to the welcome screen.
Once checked, the welcome screen won’t be shown next time and instead we will be taken directly to the next page.
Android welcome page with an option 'Don not show it again?'

 

Mock diagram of Welcome page in a mobile device.
Mock diagram of welcome page in Android Mobile device

 

We need to do the below things:

  1. Create an application logo.
  2. Change the default theme to android Holo to get that black background.
  3. Modify the default layout to add welcome text, ‘Do not show it again’ checkbox and the next button.

Create your icon

There are many tools that help you create your own icon. I have used Icon slayer. Below is the link
http://www.gieson.com/Library/projects/utilities/icon_slayer/#.VF8orfmUfHU
You need to select the development environment, android in our case, load the image and export. Move the icons to the res/drawable{$}dpi based on their sizes. Below is our sandbox app’s icon.
Application Icon

AndroidManifest.xml

We now need to set our app’s icon and label.
AndroidManifest.xml is the main context file for the application where we will make the change.Look for the application element and set the android:icon value to @drawable/ic_launcher_sandbox.drawable is the resource folder name and ic_launch_sandbox is the icon file name.

<application android:allowbackup="true" android:icon="@drawable/ic_launcher_sandbox">

We also need to set the app’s label to Sandbox.Open res/values/strings.xml, add  the below string element.

<string name="app_name">sandbox</string>

Whenever we need a label, we need to define the actual label here and use its reference in code or xml.

Theme

From Android’s definition of theme:

A theme is a style applied to an entire Activity or application, rather than an individual
View (as in the example above). When a style is applied as a theme, every View in the Activity or application will apply each style property that it supports.

I wanted a black background so I will be using Android’s Holo theme.

In order to set the theme, open AndroidManifest.xml, and set android:theme attribute to @style/android:Theme.Holo.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.jopc.sandbox"
    android:theme="@style/android:Theme.Holo">

We can also define our own style that extends android:Theme.Holo and use that style instead of directly setting the theme to android:Theme.Holo.

In order to do so, open res/values/style.xml and add the below element.

<style name="AppTheme" parent="android:Theme.Holo" />.

Next refer to our new style in android:theme.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.jopc.sandbox"
    android:theme="@style/AppTheme">

Welcome Page Layout

The last thing we need to do is delete ‘Hello world’ text and add new widgets to it.

Open /layout/activity_main.xml and select ‘Graphical Layout’ tab. Delete Hello world text. Add a text view, checkbox and  a button. Define the labels in res/values/strings.xml and ref to those keys as labels. Once the fields are placed, use the activity_main.xml tab to edit the xml.

Here is my layout in ‘Graphical Layout’ tab.
RelativeLayout of welcome page

 

To edit the xml, click on the tab next to ‘Graphical Layout’.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools" 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.jopc.sandbox.MainActivity">

    <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/checkBox1" android:layout_alignBottom="@+id/checkBox1"
            android:layout_alignParentRight="true" android:text="@string/next"/>

    <CheckBox android:id="@+id/checkBox1" android:layout_width="wrap_content" android:layout_height="wrap_content"
              android:layout_alignParentLeft="true" android:layout_centerVertical="true"
              android:text="@string/doNotShow"/>

    <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content"
              android:layout_above="@+id/button1" android:layout_centerHorizontal="true"
              android:layout_marginBottom="78dp" android:text="@string/welcome"
              android:textColor="@color/welcome_text_color" android:textSize="20sp"/>

</RelativeLayout>

The main element RelativeLayout is Android’s default layout:

Instead of using hard-coded labels, we define the labels in strings.xml:

<resources>

    <string name="app_name">sandbox</string>
    <string name="welcome">Welcome to Sandbox App</string>
    <string name="doNotShow">Do not show it again?</string>
    <string name="next">Next</string>
    <string name="action_settings">Settings</string>

</resources>

If you notice, the welcome text is in RED. You may define your own color key in res/values/colors.xml and assign the key to the field.

Here is my colors.xml:

<resources>
    <color name="welcome_text_color">#FF0000</color>
</resources>

Add the welcome activity:

package com.jopc.sandbox;

import android.app.Activity;
import android.os.Bundle;

public class WelcomeActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.welcome);		
	}
}

Now modify androidManifest.xml to allow WelcomeActivity to be the main activity.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.jopc.sandbox"
    android:versionCode="1"
    android:versionName="1.0">
	<uses-sdk
		android:minSdkVersion="4"
		android:maxSdkVersion="21"
		android:targetSdkVersion="21"/>
	<application
        android:icon="@drawable/ic_launcher_sandbox"
        android:label="@string/app_name"
        android:allowBackup="true">
         
        <activity android:name=".WelcomeActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

When I run it on a nexus emulator the app launches.
Welcome page when run in emulator

Variation would to loin to an existing Google/Facebook Account

One of the variations would be to navigate through a string of help pages and finally show the login screen. User may login using their existing facebook or google account.

Login to Google or Facebook Account

In the next article, we will add a listener to the next button to take us to the next screen.
We will also need a user setting that lets the user decide whether they want to see the welcome page next time they launch the app.
Once done we will work on the above variation.

Download the Source Code

You can download the source code here: sandboxWelcome.zip

Share.

Leave A Reply