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.
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.
 |
| A sample virtual device based on Nexus 4 |
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.
Once the project is created, a basic project structure is automatically created for you.
 |
Android Project Structure |
I have circled the files which we are going to modify in this article.
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. |
| A simple welcome page |
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.
 |
| Welcome page with an option of not showing it again |
Mock diagram of Welcome page in a mobile device.
We need to do the below things:
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.
Whenever we need a label, we need to define the actual label here and use its reference in code or xml.
From Android's definition of theme:
A theme is a style applied to an entire Activit 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.
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.
Next refer to our new style in android:theme.
Open re/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.
To edit the xml, click on the tab next to 'Graphical Layout'.
The main element RelativeLayout is Android's default layout:
Instead of using hard-coded labels, we define the labels in strings.xml:
 |
| Mock diagram of welcome page |
We need to do the below things:
- Create an application logo.
- Change the default theme to android Holo to get that black background.
- 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
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.
 |
| Sandbox 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.
[xml]
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.
We also need to set the app's label to Sandbox.
Open res/values/strings.xml, add the below string element
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
A theme is a style applied to an entire Activit 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 re/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.
 |
| Layout 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>
When I run it on a nexus emulator the app launches.
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.
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.
No comments:
Post a Comment