Android (GCM) Push Notification Tutorial – Part 1

In this tutorial, I will show you how to implement push notifications in your native app for android.

Download the required software packages.

  1. Download and install Android Studio and Android SDK.
  2. Android Studio + SDK – http://developer.android.com/sdk/index.html.

Setting up your development environment

Open your Android Studio and choose Start a new Android Studio project.

Start a new Android Studio project

Start a new Android Studio project

Enter your custom Application name, Company Domain and select Project location. Click Next.

Configure your new project.

Configure your new project.

Select Phone and Tablet. Make sure API 15 selected. Click Next.

Configure your new project.

Configure your new project.

Select Blank Activity and click Next.

Add an activity to Mobile.

Add an activity to Mobile.

Click Finish.

Customize the activity.

Customize the activity.

Now we need to get project id from google cloud. Go to  https://console.developers.google.com and create a new project. Click Create Project button and a popup will appear. Enter your project name and click Create. Mine is Native Push.

google cloud create project

google cloud create project

Then you will be direct to this page. Copy out your project number on the top. Click Enable API. Enable Google Cloud Messaging for Android. Click Credentials under APIs and auth on left sidebar.

google developer console API

google developer console API

 

Google Cloud Messaging for Android

Google Cloud Messaging for Android

Go to Credentials page. It’s under APIs & authCredentials.

APIs Credentials

APIs Credentials

Choose Server key.

APIs Credentials - server key

APIs Credentials – server key

Enter your custom Name and click Create.

APIs Credentials - Create server API key

APIs Credentials – Create server API key

Below is API key details for your project. Copy your API key.

APIs Credentials - API keys

APIs Credentials – API keys

Continue…

Develop a simple android mobile app (toDoList) – Part 1

In this tutorial, I will show you how to create a simple to do list app using android and Parse.

Download the required software packages

Download and install Android Studio and Android SDK.

Android Studio + SDK – http://developer.android.com/sdk/index.html

Setting up your development environment

Open your Android Studio and choose Start a new Android Studio project.

Start a new Android Studio project

Start a new Android Studio project

Enter your custom Application name, Company Domain and select Project location. Click Next.

Configure your new project.

Configure your new project.

Select Phone and Tablet. Make sure API 15 selected. Click Next.

Configure your new project.

Configure your new project.

Select Blank Activity and click Next.

Add an activity to Mobile.

Add an activity to Mobile.

Click Finish.

Customize the activity.

Customize the activity.

Sign up for your new account here, https://www.parse.com/.

Parse

Parse

Click Create a New App.

Create a New App

Create a New App

Go to Keys and save your Application ID and Client Key.

Download Parse SDK (latest Parse-1.9.2) and place it to your libs folder. https://parse.com/downloads/android/Parse/latest

Open build.gradle.

build.gradle.

build.gradle.

Add compile com.parse.bolts:bolts-android:1.+ to your build.gradle and sync.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.1.1'
    compile 'com.parse.bolts:bolts-android:1.+'
    compile fileTree(dir: 'libs', include: 'Parse-*.jar')
}

Your app must request the INTERNET and ACCESS_NETWORK_STATE permissions, if it isn’t doing so already. Add the following lines inside the tag in your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Then, add the following to your in AndroidManifest.xml:

<application
        android:name=".App"

Create a new java class. Right click on com.revivalx.androidparsetodolist package > New > Java Class.

Create a new java class.

Create a new java class.

Name it as App. Click OK.

Create a new java class.

Create a new java class.

Put this to your code.

import android.app.Application; 
import com.parse.Parse; 

public class App extends Application { 

    @Override public void onCreate() { 
        super.onCreate();

        Parse.initialize(this, ApplicationID, ClientKey); // Your Application ID and Client Key are defined elsewhere 
    }
} 

Create a new blank activity. Right click on com.revivalx.androidparsetodolist package > New > Activity > Blank Activity.

Create a new blank activity.

Create a new blank activity.

Name Activity Name as ListActivity and leave it others default value. Click Finish.

Customize the activity.

Customize the activity.

Do it twice for two new blank activities.

Customize the activity.

Customize the activity.

Customize the activity.

Customize the activity.

Your final output.

Android Studio project structure.

Android Studio project structure.

Open activity_list.xml in app > layout > activity_list.xml.

Android Studio project structure (activity_list.xml).

Android Studio project structure (activity_list.xml).

Update activity_list.xml with this one.

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.revivalx.androidparsetodolist.ListActivity">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Create Task"
        android:id="@+id/btnCreate"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Detail Task"
        android:id="@+id/btnUpdate"
        android:layout_below="@+id/btnCreate"
        android:layout_centerHorizontal="true" />
    <ListView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/lv_task"
        android:layout_below="@+id/btnUpdate"
        android:layout_centerHorizontal="true" />
</RelativeLayout>
activity_list layout design.

activity_list layout design.

Open activity_create.xml in app > layout >activity_create.xml.

Android Studio project structure (activity_create.xml).

Android Studio project structure (activity_create.xml).

Update activity_create.xml with this one.

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.revivalx.androidparsetodolist.CreateActivity">

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtName"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:hint="Name"/>

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtDescription"
        android:layout_below="@+id/txtName"
        android:layout_centerHorizontal="true"
        android:hint="Description"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Create Task"
        android:id="@+id/btnCreate"
        android:layout_below="@+id/txtDescription"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Back"
        android:id="@+id/btnBack"
        android:layout_below="@+id/btnCreate"
        android:layout_centerHorizontal="true" />
</RelativeLayout>
activity_create layout design.

activity_create layout design.

Open activity_update.xml in app > layout >activity_update.xml.

Android Studio project structure (activity_update.xml).

Android Studio project structure (activity_update.xml).

Update activity_update.xml with this one.

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.revivalx.androidparsetodolist.UpdateActivity">

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtName"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:hint="Name"/>

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtDescription"
        android:layout_below="@+id/txtName"
        android:layout_centerHorizontal="true"
        android:hint="Description"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Update Task"
        android:id="@+id/btnUpdate"
        android:layout_below="@+id/txtDescription"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Back"
        android:id="@+id/btnBack"
        android:layout_below="@+id/btnUpdate"
        android:layout_centerHorizontal="true" />
</RelativeLayout>
activity_update layout design.

activity_update layout design.

Delete MainActivity and activity_main.xml.

Delete MainActivity and activity_main.xml.

Delete MainActivity and activity_main.xml.

Go your AndroidManifest.xml, replace .MainActivity with .ListActivity.

<activity
            android:name=".ListActivity"

Update these three classes (ListActivity, CreateActivity and UpdateActivity).

ListActivity

package com.revivalx.androidparsetodolist;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.Button;

public class ListActivity extends ActionBarActivity {

    private Button btnCreate;
    private Button btnUpdate;

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

        btnCreate = (Button) findViewById(R.id.btnCreate);
        btnCreate.setOnClickListener(new View.OnClickListener() {

            public void onClick(View arg0) {

                Intent createActivity = new Intent(getApplicationContext(), CreateActivity.class);
                startActivity(createActivity);

            }
        });

        btnUpdate = (Button) findViewById(R.id.btnUpdate);
        btnUpdate.setOnClickListener(new View.OnClickListener() {

            public void onClick(View arg0) {

                Intent updateActivity = new Intent(getApplicationContext(), UpdateActivity.class);
                startActivity(updateActivity);

            }
        });
    }
}

CreateActivity

package com.revivalx.androidparsetodolist;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.Button;


public class CreateActivity extends ActionBarActivity {

    private Button btnBack;

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

        btnBack = (Button) findViewById(R.id.btnBack);
        btnBack.setOnClickListener(new View.OnClickListener() {

            public void onClick(View arg0) {

                Intent listActivity = new Intent(getApplicationContext(), ListActivity.class);
                startActivity(listActivity);

            }
        });
    }

}

UpdateActivity

package com.revivalx.androidparsetodolist;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.Button;


public class UpdateActivity extends ActionBarActivity {

    private Button btnBack;

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

        btnBack = (Button) findViewById(R.id.btnBack);
        btnBack.setOnClickListener(new View.OnClickListener() {

            public void onClick(View arg0) {

                Intent listActivity = new Intent(getApplicationContext(), ListActivity.class);
                startActivity(listActivity);

            }
        });

    }

}

Next tutorial, http://blog.revivalx.com/2015/06/10/develop-a-simple-android-mobile-app-todolist-part-2/.

Android tabhost tutorial

Container for a tabbed window view. This object holds two children: a set of tab labels that the user clicks to select a specific tab, and a FrameLayout object that displays the contents of that page. The individual elements are typically controlled using this container object, rather than setting values on the child elements themselves.

Reference: http://developer.android.com/reference/android/widget/TabHost.html

What do you need for this tutorial?

Before we can proceed this tutorial, make sure you already setup your android studio and sdk in your machine. http://www.techotopia.com/index.php/Setting_up_a_Windows,_Linux_or_Mac_OS_X_Android_Studio_Development_Environment

After setup completed, open your android studio and select Start a new Android Studio project.

Start a new Android Studio project

Start a new Android Studio project

For Application name, use RevivalxAndroidTabhost and then fill out the Company Domain with your customary values. Click Next.

Configure your new project

Configure your new project

Select Phone and Tablet and set Minimum SDK to API 15. Click Next.

Target Android Devices

Target Android Devices

Select Blank Activity and click Next.

Add an activity to Mobile

Add an activity to Mobile

Leave it all default. Click Finish.

Customize the Activity

Customize the Activity

Wait until it complete building.

Your initialize project will look like this.

Android Studio

Android Studio

Open your MainActivity.java and extend the class from ActionBarActivity

public class HomeActivity extends ActionBarActivity {

Create a new layout name bottom_tabs.xml under res > layout folder and type the following code.

Add new layout.

Add new layout.

Enter File name as bottom_tabs. Click Ok.

New Resource File

New Resource File

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1" />

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

Create BaseContainerFragment.java by right click on your package folder. Type the following code respectively.

package com.revivalx.revivalxandroidtabhost;

/**
 * Created by MNurdin on 5/8/15.
 */
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;

public class BaseContainerFragment extends Fragment {

    public void replaceFragment(Fragment fragment, boolean addToBackStack) {
        FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
        if (addToBackStack) {
            transaction.addToBackStack(null);
        }
        transaction.replace(R.id.container_framelayout, fragment);
        transaction.commit();
        getChildFragmentManager().executePendingTransactions();
    }

    public boolean popFragment() {
        boolean isPop = false;
        if (getChildFragmentManager().getBackStackEntryCount() > 0) {
            isPop = true;
            getChildFragmentManager().popBackStack();
        }
        return isPop;
    }

}

Create a new layout name container_fragment.xml under res > layout folder and type the following code.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container_framelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


</FrameLayout>

Next create five container fragments by right click on your package folder and create classes and name them as FirstContainerFragment.java, SecondContainerFragment.java, ThirdContainerFragment.java, FourthContainerFragment.java and FifthContainerFragment.java. Type the following code respectively.

Right Click on package folder > New >  Java Class

FirstContainerFragment.java

package com.revivalx.revivalxandroidtabhost;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by MNurdin on 5/8/15.
 */
public class FirstContainerFragment extends BaseContainerFragment {

    private boolean mIsViewInited;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.container_fragment, null);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (!mIsViewInited) {
            mIsViewInited = true;
            initView();
        }
    }

    private void initView() {
        replaceFragment(new FirstFragment(), false);
    }

}

SecondContainerFragment.java

package com.revivalx.revivalxandroidtabhost;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by MNurdin on 5/8/15.
 */
public class SecondContainerFragment extends BaseContainerFragment {

    private boolean mIsViewInited;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.container_fragment, null);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (!mIsViewInited) {
            mIsViewInited = true;
            initView();
        }
    }

    private void initView() {
        replaceFragment(new SecondFragment(), false);
    }

}

ThirdContainerFragment.java

package com.revivalx.revivalxandroidtabhost;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by MNurdin on 5/8/15.
 */
public class ThirdContainerFragment extends BaseContainerFragment {

    private boolean mIsViewInited;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.container_fragment, null);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (!mIsViewInited) {
            mIsViewInited = true;
            initView();
        }
    }

    private void initView() {
        replaceFragment(new ThirdFragment(), false);
    }

}

FourthContainerFragment.java

package com.revivalx.revivalxandroidtabhost;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by MNurdin on 5/8/15.
 */
public class FourthContainerFragment extends BaseContainerFragment {

    private boolean mIsViewInited;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.container_fragment, null);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (!mIsViewInited) {
            mIsViewInited = true;
            initView();
        }
    }

    private void initView() {
        replaceFragment(new FourthFragment(), false);
    }

}

FifthContainerFragment.java

package com.revivalx.revivalxandroidtabhost;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by MNurdin on 5/8/15.
 */
public class FifthContainerFragment extends BaseContainerFragment {

    private boolean mIsViewInited;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.container_fragment, null);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (!mIsViewInited) {
            mIsViewInited = true;
            initView();
        }
    }

    private void initView() {
        replaceFragment(new FifthFragment(), false);
    }

}

Now we need 5 fragments and 5 xml layouts for five tabs. So create five fragments by right click on your package folder and create classes and name them as FirstFragment.java, SecondFragment.java, ThirdFragment.java, FourthFragment.java and FifthFragment.java. Type the following code respectively.

Right Click on package folder > New >  Java Class

Create new java class.

Create new java class.

FirstFragment.java

package com.revivalx.revivalxandroidtabhost;

import com.revivalx.revivalxandroidtabhost.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class FirstFragment extends Fragment {

    public FirstFragment() {
        // TODO Auto-generated constructor stub

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        View v = LayoutInflater.from(getActivity()).inflate(R.layout.first_layout,
                null);

        return v;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
    }
    //

}

SecondFragment.java

package com.revivalx.revivalxandroidtabhost;

import com.revivalx.revivalxandroidtabhost.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class SecondFragment extends Fragment {

    public SecondFragment() {
        // TODO Auto-generated constructor stub

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        View v = LayoutInflater.from(getActivity()).inflate(R.layout.second_layout,
                null);

        return v;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
    }
    //

}

ThirdFragment.java

package com.revivalx.revivalxandroidtabhost;

import com.revivalx.revivalxandroidtabhost.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class ThirdFragment extends Fragment {

    public ThirdFragment() {
        // TODO Auto-generated constructor stub

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        View v = LayoutInflater.from(getActivity()).inflate(R.layout.third_layout,
                null);

        return v;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
    }
    //

}

FourthFragment.java

package com.revivalx.revivalxandroidtabhost;

import com.revivalx.revivalxandroidtabhost.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class FourthFragment extends Fragment {

    public FourthFragment() {
        // TODO Auto-generated constructor stub

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        View v = LayoutInflater.from(getActivity()).inflate(R.layout.fourth_layout,
                null);

        return v;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
    }
    //

}

FifthFragment.java

package com.revivalx.revivalxandroidtabhost;

import com.revivalx.revivalxandroidtabhost.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class FifthFragment extends Fragment {

    public FifthFragment() {
        // TODO Auto-generated constructor stub

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        View v = LayoutInflater.from(getActivity()).inflate(R.layout.fifth_layout,
                null);

        return v;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
    }
    //

}

Now create 5 xml layouts by right clicking on res/layout > New > Layout XML File and name them as first_layout.xml, second_layout.xml, third_layout.xml, fourth_layout.xml and fifth_layout.xml and type the following code in respective files.

Add New Layout XML

Add New Layout XML

Customize the Activity

Customize the Activity

first_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView android:text="First Fragment"
        android:padding="15dip"
        android:textSize="18dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

second_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView android:text="Second Fragment"
        android:padding="15dip"
        android:textSize="18dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

third_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView android:text="Third Fragment"
        android:padding="15dip"
        android:textSize="18dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

fourth_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView android:text="Fourth Fragment"
        android:padding="15dip"
        android:textSize="18dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

fifth_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView android:text="Fifth Fragment"
        android:padding="15dip"
        android:textSize="18dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

Each and every tab needs an icon so design icons for each tab. Design each icon in 64 x 64 px and place them in drawable. Download 5 icons from these link below. Don’t forget to rename it into one_64.png, two_64.png, three_64.png, four_64.png and five_64.png.

  1. https://icons8.com/web-app/10962/1
  2. https://icons8.com/web-app/10914/2
  3. https://icons8.com/web-app/10916/3
  4. https://icons8.com/web-app/10915/4
  5. https://icons8.com/web-app/10953/5
icons8

icons8

Android icon states will be define in xml files with default and hover state configurations. For five icons we need the icon state configuration files. So create five xml files under drawable directory. Right click drawable folder select New > Drawable resource file.

New Drawable resource file.

New Drawable resource file.

Create five xml. Use tab_one.xml, tab_two.xml, tab_three.xml, four_tab.xml and five_tab.xml in File name . Click Ok.

New Resource File

New Resource File

Type the following code for icon states.

tab_one.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use this -->
    <item android:drawable="@drawable/one_64" android:state_selected="true" />
    <!-- When not selected, use that-->
    <item android:drawable="@drawable/one_64" />
</selector>

tab_two.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use this -->
    <item android:drawable="@drawable/two_64" android:state_selected="true" />
    <!-- When not selected, use that-->
    <item android:drawable="@drawable/two_64" />
</selector>

tab_three.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use this -->
    <item android:drawable="@drawable/three_64" android:state_selected="true" />
    <!-- When not selected, use that-->
    <item android:drawable="@drawable/three_64" />
</selector>

tab_four.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use this -->
    <item android:drawable="@drawable/four_64" android:state_selected="true" />
    <!-- When not selected, use that-->
    <item android:drawable="@drawable/four_64" />
</selector>

tab_five.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use this -->
    <item android:drawable="@drawable/five_64" android:state_selected="true" />
    <!-- When not selected, use that-->
    <item android:drawable="@drawable/five_64" />
</selector>

Now open MainActivity.java and type the following code. In the following code we are creating five TabSepcs and adding them to TabHost.

package com.revivalx.revivalxandroidtabhost;

import android.os.Bundle;
import android.support.v4.app.FragmentTabHost;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;


public class MainActivity extends ActionBarActivity {

    private static final String TAB_1_TAG = "one";
    private static final String TAB_2_TAG = "two";
    private static final String TAB_3_TAG = "three";
    private static final String TAB_4_TAG = "four";
    private static final String TAB_5_TAG = "five";
    private FragmentTabHost mTabHost;
    private Menu mainMenu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.bottom_tabs);
        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

        Bundle b = new Bundle();
        b.putString("key", "One");
        mTabHost.addTab(mTabHost.newTabSpec(TAB_1_TAG).setIndicator("",getResources().getDrawable(R.drawable.tab_one)),FirstContainerFragment.class, b);

        b = new Bundle();
        b.putString("key", "Two");
        mTabHost.addTab(mTabHost.newTabSpec(TAB_2_TAG).setIndicator("",getResources().getDrawable(R.drawable.tab_two)), SecondContainerFragment.class, b);

        b = new Bundle();
        b.putString("key", "Three");
        mTabHost.addTab(mTabHost.newTabSpec(TAB_3_TAG).setIndicator("",getResources().getDrawable(R.drawable.tab_three)), ThirdContainerFragment.class, b);

        b = new Bundle();
        b.putString("key", "Four");
        mTabHost.addTab(mTabHost.newTabSpec(TAB_4_TAG).setIndicator("",getResources().getDrawable(R.drawable.tab_four)), FourthContainerFragment.class, b);

        b = new Bundle();
        b.putString("key", "Five");
        mTabHost.addTab(mTabHost.newTabSpec(TAB_5_TAG).setIndicator("",getResources().getDrawable(R.drawable.tab_five)), FifthContainerFragment.class, b);

    }

    @Override
    public void onBackPressed() {
        boolean isPopFragment = false;
        String currentTabTag = mTabHost.getCurrentTabTag();
        if (currentTabTag.equals(TAB_1_TAG)) {
            isPopFragment = ((BaseContainerFragment)getSupportFragmentManager().findFragmentByTag(TAB_1_TAG)).popFragment();
        } else if (currentTabTag.equals(TAB_2_TAG)) {
            isPopFragment = ((BaseContainerFragment)getSupportFragmentManager().findFragmentByTag(TAB_2_TAG)).popFragment();
        } else if (currentTabTag.equals(TAB_3_TAG)) {
            isPopFragment = ((BaseContainerFragment)getSupportFragmentManager().findFragmentByTag(TAB_3_TAG)).popFragment();
        } else if (currentTabTag.equals(TAB_4_TAG)) {
            isPopFragment = ((BaseContainerFragment)getSupportFragmentManager().findFragmentByTag(TAB_4_TAG)).popFragment();
        } else if (currentTabTag.equals(TAB_5_TAG)) {
            isPopFragment = ((BaseContainerFragment)getSupportFragmentManager().findFragmentByTag(TAB_5_TAG)).popFragment();
        }
        if (!isPopFragment) {
            finish();
        }
    }

}

Now everything is ready and before running your project make sure that you an entry of new activity name in AndroidManifest.xml file. Open you AndroidManifest.xml file and modify the code as below

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            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>

Finally run your project.

Source code: https://github.com/datomnurdin/RevivalxAndroidTabhost

AngularJs Ionic Mobile App Development Tutorial – Marketing App – Part 1

In this tutorial you will develop a marketing app for iOS and android with these features

  • Login (Facebook Login)
  • Edit profile
  • Create and view all campaign details
  • View reports

What you will be learn from this tutorial are

  • Setup development environment using certain IDE for iOS and android.
  • Preview your iOS and android hybrid app on actual device (smart phone).
  • Develop iOS and android hybrid app using client side language.
  • Create multi page application for iOS and android hybrid app.
  • Connect iOS and android hybrid app with server side language.

Download the required software packages.

Download and install Eclipse Juno SR2 and Xcode 6 (if you’re using Mac for mobile development).

Eclipse Juno SR2 – http://www.eclipse.org/downloads/packages/release/juno/sr2
Xcode 6 – https://developer.apple.com/xcode/downloads/

Setup ADT and Android SDK into your eclipse.

Then you need to setup cordova using NPM (node package manager).

ADT and Android SDK Setup

Don’t forget to install or update your machine with latest JDK 7. Download at http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html.

After you download, make sure you set the correct java path. If not, you can’t start your eclipse. You can download eclipse Juno http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/junosr2.

Then install it. After you install the tool that I tell you, make sure you install ADT (android development tools).

Go to Help and choose Install New Software.

eclipse - Install New Software

eclipse – Install New Software

Click Add button then popup box will appear. Enter ‘ADT’ in name textfield and ‘https://dl-ssl.google.com/android/eclipse/’ in location textfield.

eclipse - Install ADT

eclipse – Install ADT

Click Select All button and click Next.

eclipse - Install ADT

eclipse – Install ADT

Click Next.

eclipse - Install ADT

eclipse – Install ADT

Select I accept the terms of the license of agreement. Click Finish.

eclipse - Install ADT

eclipse – Install ADT

After finished setup ADT in your eclipse, download android SDK (http://developer.android.com/sdk/index.html#Other) and update latest android version or depends on your device for testing. After you install the android SDK, open android SDK , /android-sdk/tools. For this tutorial we will using latest android SDK, Android 5.0 aka Lolipop. Open your terminal/cmd, type android command and enter.

android terminal

android terminal

Select Android 5.0 and click Install 12 packages.

Android SDK Manager

Android SDK Manager

Select all packages, choose Accept License and click Install.

Android SDK Manager

Android SDK Manager

After that, install node.js (http://nodejs.org/) to use npm for package manager. If you not install node.js, you should not be able to invoke node or npm on your command line to install cordova apache. Then install cordova apache using terminal for Mac, command prompt for Windows.

Type this command to install cordova apache.

For Mac

sudo npm install -g cordova ionic

For Windows. If you can’t install, make sure you run the command prompt as administrator.

npm install -g cordova ionic
sudo npm install -g cordova ionic

sudo npm install -g cordova ionic

sudo npm install -g cordova ionic

sudo npm install -g cordova ionic

After you finish install the cordova apache. You can start create your project using cordova command. Open your terminal/command prompt, type these command. You can ignore sudo if you using Windows.

ionic start com.revivalx.cordova.marketing
ionic create project

ionic create project

Open config.xml inside cordova project that you already created just now. Change id and name. Others are optional.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.revivalx.cordova.marketing" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>ToDo</name>
    <description>
        Marketing App.
    </description>
    <author email="mohammadnrdn@gmail.com" href="http://revivalx.com">
        Mohammad Nurdin bin Norazan
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

Go back to terminal and add platform for android/iOS. Type these command to add both platforms.

ionic platform add android
ionic platform add android

ionic platform add android

ionic platform add ios
ionic platform add ios

ionic platform add ios

Note, if you got some error message during add andorid platform, you can refer to this link

Common errors during developing hybrid android app– http://blog.revivalx.com/2014/11/02/common-errors-during-developing-android-hybrid-app/

Android part.

Go to eclipse and import android project. Click File and choose Import.

eclipse - import project

eclipse – import project

Choose Existing Android Code into Workspace and click Next.

eclipse - existing android code into workspace

eclipse – existing android code into workspace

Browse your android project and select all. Click Finish.

eclipse – import projects

eclipse – import projects

Make sure you already connect your mobile device (android phone) and enable USB debugging.

Enable USB debugging: http://www.phonearena.com/news/How-to-enable-USB-debugging-on-Android_id53909

Right click android project > Run As > Android Application.

Run As Android Application

Run As Android Application

Select your phone and click Ok.

Android Device Chooser

Android Device Chooser

If successful, your app shown like this.

cordova app preview on android

ionic app preview on android

iOS part.

Open your cordova project for iOS. Go to../com.revivalx.ionic.marketing/platforms/ios/com.revivalx.ionic.marketing.xcodeproj . Select iPhone6 simulator and click Play button.

xcode6

xcode6

If successful, your app shown like this.

ionic app preview on iOS

ionic app preview on iOS

I think thats all for

  • Setup development environment using certain IDE for iOS and android.
  • Preview your iOS and android hybrid app using emulator and actual device (smart phone).

Next tutorial we will develop iOS and android hybrid app using client side language.

Develop a simple to-do-list mobile android native app -Part 1

In this tutorial you will develop a simple to-do-list native app for android. You will learn the following:

  • Setup development environment using Eclipse Juno for android.
  • Preview your android app using actual device (smart phone).
  • Develop android app using Java programming language.
  • Create activities for android app.
  • Connect android app with PHP and MySql.

Getting Started

Download the required software packages.

Download and install Eclipse Juno SR2.

Eclipse Juno SR2 – http://www.eclipse.org/downloads/packages/release/juno/sr2

Setup ADT and Android SDK into your eclipse.

ADT and Android SDK Setup

Don’t forget to install or update your machine with latest JDK. Currently JDK version 7. Download at http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads- 1880260.html.

After you download, make sure you set the correct java path. If not, you can’t start your eclipse. You can download eclipse Juno http://www.eclipse.org/downloads/packages/eclipse-ide- java-ee-developers/junosr2.

Then install it. After you install the tool that I tell you, make sure you install ADT (android development tools).

Go to Help and choose Install New Software.

eclipse - Install New Software

eclipse – Install New Software

Click Add button then popup box will appear. Enter ‘ADT’ in name textfield and ‘https://dl-ssl.google.com/android/eclipse/’ in location textfield.

eclipse - Install ADT

eclipse – Install ADT

Click Select All button and click Next.

eclipse - Install ADT

eclipse – Install ADT

Click Next.

eclipse - Install ADT

eclipse – Install ADT

Select I accept the terms of the license of agreement. Click Finish.

eclipse - Install ADT

eclipse – Install ADT

After finished setup ADT in your eclipse, download android SDK (http://developer.android.com/sdk/index.html) and update latest android version or depends on your device for testing. After you install the android SDK, open android SDK , /android-sdk/tools. For this tutorial we will using latest android SDK, Android 5.0 aka Lolipop. Open your terminal/cmd, type android command and enter.

android terminal

android terminal

Select Android 5.0 and click Install 12 packages.

Android SDK Manager

Android SDK Manager

Select all packages, choose Accept License and click Install.

Android SDK Manager

Android SDK Manager

Go to eclipse and create new android project. File > New > Other.

create an android application project

create an android application project

Select Android > Android Application Project. Click Next.

create an android application project

create an android application project

Enter your Application Name, Project Name and Package Name. Make sure your Minimum Required SDK is Android 2.2 (API 8), Target SDK and Compile With are Android 4.X L Preview (API 21). Click Next.

create an android application project

create an android application project

Untick Create custom launcher icon. Select Next.

create an android application project

create an android application project

Make sure Blank Activity selected. Click Next.

create activity

create activity

Click Finish.

blank activity

blank activity

Make sure you already connect your mobile device (android phone) and enable USB debugging.

Enable USB debugging: http://www.phonearena.com/news/How-to-enable-USB-debugging-on-Android_id53909

Right click android project > Run As > Android Application.

Run As Android Application

Run As Android Application

Select your phone and click Ok.

Android Device Chooser

Android Device Chooser

If successful, your app shown like this.

I think thats all for

  • Setup development environment using eclipse Juno for android.
  • Preview your android app using actual device (smart phone).

Next tutorial we will develop android app using Java.