Saturday, November 26, 2011

TabWidget in Android (Advance)

We already create simple Tab app in android check TabWidget in Android (Basic)
So today we will try to add some advance things.

like how to put Tabs at the Bottom in Android
load different pages on different Tabs.

so let's try this small app..

 -------------------------------------------
App Name: TabWidgetAdvance
Package Name: com.rdc
Android SDK: Android SDK 2.3.3 / API 10
Default TabActivity Name: ActivityTabWidget
-------------------------------------------


ActivityTabWidget.java

package com.rdc;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;

public class ActivityTabWidget extends TabActivity {
 private TabHost mTabHost = null;
 private Intent ihome, imusic, iabout;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  //create tab host to add tabs
  mTabHost = getTabHost();

  
  LayoutInflater.from(this).inflate(R.layout.main,
    mTabHost.getTabContentView(), true);

  // create intents to load another page on Tabs
  ihome = new Intent(ActivityTabWidget.this, ActivityHome.class);
  imusic = new Intent(ActivityTabWidget.this, ActivityMusic.class);
  iabout= new Intent(ActivityTabWidget.this,ActivityAboutMe.class);

  // create tabs and add to TabHost

  mTabHost.addTab(mTabHost.newTabSpec("tab1")
    .setIndicator(" Home ")
    .setContent(ihome));

  mTabHost.addTab(mTabHost.newTabSpec("tab3")
    .setIndicator(" Music ")
    .setContent(imusic));

  mTabHost.addTab(mTabHost.newTabSpec("tab3")
    .setIndicator(" About Me ")
    .setContent(iabout));

  // set default selected tab
  mTabHost.setCurrentTab(0);

 }
}

now create three Activities Pages for Three different Tabs
ActivityHome.java
package com.rdc;

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

public class ActivityHome extends Activity {

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


ActivityMusic.java
package com.rdc;

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

public class ActivityMusic extends Activity {

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


ActivityAboutMe.java
package com.rdc;

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

public class ActivityAboutMe extends Activity {

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

}


main.xml
<?xml version="1.0" encoding="utf-8"?>
<TabHost
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@android:id/tabhost"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <LinearLayout
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

  <FrameLayout
   android:id="@android:id/tabcontent"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:layout_weight="1">
   <TextView
    android:id="@+id/textview1"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"></TextView>
   <TextView
    android:id="@+id/textview2"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"></TextView>
   <TextView
    android:id="@+id/textview3"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"></TextView>
  </FrameLayout>
  <TabWidget
   android:id="@android:id/tabs"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="0"
   android:layout_marginBottom="-4dp">
  </TabWidget>
 </LinearLayout>
</TabHost>

now create three XML Pages for Three different Tabs
home.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"
 android:gravity="center_vertical"
 android:background="#A9A9A9">
 <TextView
  android:id="@+id/textView1"
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:text="Home"
  android:gravity="center_horizontal"
  android:textColor="#000000"></TextView>

</LinearLayout>

music.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"
 android:gravity="center_vertical"
 android:background="#A9A9A9">
 <TextView
  android:id="@+id/textView1"
  android:gravity="center_horizontal"
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:text="Music"
  android:textColor="#000000"></TextView>
</LinearLayout>


aboutme.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"
 android:gravity="center_vertical"
 android:background="#A9A9A9">
 <TextView
  android:id="@+id/textView1"
  android:gravity="center_horizontal"
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:text="About Me"
  android:textColor="#000000"></TextView>
</LinearLayout>


AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest
 xmlns:android="http://schemas.android.com/apk/res/android"
 package="com.rdc"
 android:versionCode="1"
 android:versionName="1.0">
 <uses-sdk android:minSdkVersion="10" />

 <application
  android:icon="@drawable/icon"
  android:label="@string/app_name">
  <activity
   android:name=".ActivityTabWidget"
   android:label="@string/app_name">
   <intent-filter>
   <action android:name="android.intent.action.MAIN" />
   <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
  </activity>

  <activity
   android:name=".ActivityHome"
   android:label="@string/app_name">
   <intent-filter>
   <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
  </activity>

  <activity
   android:name=".ActivityMusic"
   android:label="@string/app_name">
   <intent-filter>
   <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
  </activity>

  <activity
   android:name=".ActivityAboutMe"
   android:label="@string/app_name">
   <intent-filter>
   <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
  </activity>

 </application>
</manifest>

The app will start like this..


You can download the complete source code zip file here : TabWidgetAdvance

cheers!!

I'd love to hear your thoughts!

Tuesday, November 22, 2011

TabWidget in Android (Basic)

Today we will try Tab-Widget in Android , using we can develop Tab Bar apps.

Displays a list of tab labels representing each page in the parent's tab collection. The container object for this widget is TabHost .


We will create very simple app to do this work..

 -------------------------------------------
App Name: TabWidgetBasic
Package Name: com.rdc
Android SDK: Android SDK 2.3.3 / API 10
Default TabActivity Name: ActivityTabWidget
-------------------------------------------


ActivityTabWidget.java

package com.rdc;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;

public class ActivityTabWidget extends TabActivity {

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  TabHost mTabHost = getTabHost();

  mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 1")
    .setContent(R.id.textview1));
  mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB 2")
    .setContent(R.id.textview2));
  mTabHost.addTab(mTabHost.newTabSpec("tab_test3").setIndicator("TAB 3")
    .setContent(R.id.textview3));

  mTabHost.setCurrentTab(0);
  }
}

main.xml
<?xml version="1.0" encoding="utf-8"?>
<TabHost
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@android:id/tabhost"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <LinearLayout
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:gravity="bottom">
  <TabWidget
   android:id="@android:id/tabs"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"></TabWidget>
  <FrameLayout
   android:id="@android:id/tabcontent"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
   <TextView
    android:id="@+id/textview1"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:text="this is a tab"></TextView>
   <TextView
    android:id="@+id/textview2"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:text="this is another tab"></TextView>
   <TextView
    android:id="@+id/textview3"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:text="this is a third tab"></TextView>
  </FrameLayout>
 </LinearLayout>
</TabHost>

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest
 xmlns:android="http://schemas.android.com/apk/res/android"
 package="com.rdc"
 android:versionCode="1"
 android:versionName="1.0">
 <uses-sdk android:minSdkVersion="10" />

 <application
  android:icon="@drawable/icon"
  android:label="@string/app_name">
  <activity
   android:name=".ActivityTabWidget"
   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>

The app will start like this..


You can download the complete source code zip file here : TabWidgetBasic

 cheers!!

 I'd love to hear your thoughts!

Monday, November 14, 2011

Splash Screen in Android (Advance)


A splash screen is an image with animation effects that appears while a game or program is loading. It may also be used to describe an introduction of App or page on a website.

So today we will learn how to create a splash screen in Android so that our app will start with Splash screen and then load Home Screen.

in this example i have defined 5 seconds delay to load home screen you may modify as your need.

In the previous example i used thread to manage splash duration here we will use Android's Animation Class
also we will create custom fad animation effects in res/anim folder

so lets try this smart app..


app structure is look like this




-------------------------------------------
App Name: SplashScreenAdvance
Package Name: com.rdc
Android SDK: Android SDK 2.3.3 / API 10
Default Activity Name: ActivitySplashScreen
-------------------------------------------

ActivitySplashScreen.java
package com.rdc;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Window;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class ActivitySplashScreen extends Activity {

	// animation duration you can find in fad_in and fad out xml files
	// in anim folder

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
				WindowManager.LayoutParams.FLAG_FULLSCREEN);
		setContentView(R.layout.splash_screen);

		// get the instace of image view
		ImageView image = (ImageView) findViewById(R.id.imageViewSplash);

		// create animation object
		Animation fad = AnimationUtils.loadAnimation(getBaseContext(),
				R.anim.splash_fade_in);

		// create animation listener
		fad.setAnimationListener(new AnimationListener() {

			@Override
			public void onAnimationEnd(Animation animation) {
				Intent i = new Intent(ActivitySplashScreen.this,
						ActivityHomeScreen.class);
				startActivity(i);
				finish();

				overridePendingTransition(R.anim.splash_fade_in,
						R.anim.splash_fade_out);

			}

			@Override
			public void onAnimationRepeat(Animation animation) {
				// TODO Auto-generated method stub
			}

			@Override
			public void onAnimationStart(Animation animation) {
				// TODO Auto-generated method stub
			}

		});

		// start animation
		image.startAnimation(fad);
	}

	// disable home button during splash screen
	@Override
	public void onAttachedToWindow() {
		this.getWindow().setType(
				WindowManager.LayoutParams.TYPE_KEYGUARD_DIALOG);
		super.onAttachedToWindow();
	}

	// disable back button during splash screen
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		return false;
	}
}

ActivityHomeScreen.java
package com.rdc;

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

public class ActivityHomeScreen extends Activity {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.home_screen);
	}
}
put these two files in res/layout folder
splash_screen.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:gravity="center">
	<ImageView
		android:layout_height="fill_parent"
		android:layout_width="fill_parent"
		android:src="@drawable/android_splash_image"
		android:id="@+id/imageViewSplash"></ImageView>
</LinearLayout>

home_screen.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"
	android:gravity="center">
	<TextView
		android:layout_width="wrap_content"
		android:id="@+id/textView1"
		android:layout_height="wrap_content"
		android:textSize="25sp"
		android:text="@string/homeTitle"></TextView>
</LinearLayout>

create anim folder in res and put below tow files at res/anim splash_fade_in.xml
<alpha
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:interpolator="@android:anim/decelerate_interpolator"
	android:zAdjustment="top"
	android:fromAlpha="0.0"
	android:toAlpha="1.0"
	android:duration="2000" />

splash_fade_out.xml
<alpha
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:interpolator="@android:anim/accelerate_interpolator"
	android:fromAlpha="1.0"
	android:toAlpha="0.0"
	android:duration="3000" />

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest
	xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.rdc"
	android:versionCode="1"
	android:versionName="1.0">
	<uses-sdk android:minSdkVersion="10" />

	<application
		android:icon="@drawable/icon"
		android:label="@string/app_name">
		<activity
			android:name=".ActivitySplashScreen"
			android:screenOrientation="nosensor"
			android:configChanges="keyboardHidden|orientation"
			android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"
			android:label="@string/app_name">
			<intent-filter>
			<action android:name="android.intent.action.MAIN" />
			<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity>
		<activity
			android:name=".ActivityHomeScreen"
			android:label="@string/app_name">
			<intent-filter>
		    <category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity>

	</application>
</manifest>

The output Screen will be like this..


You can download the complete source code zip file here : SplashScreenAdvance 

cheers!!

I'd love to hear your thoughts!

Tuesday, November 8, 2011

Splash Screen in Android (Basic)

A splash screen is an image with animation effects that appears while a game or program is loading. It may also be used to describe an introduction of App or page on a website.

So today we will learn how to create a splash screen in Android so that our app will start with Splash screen and then load Home Screen.

in this example i have defined 5 seconds delay to load home screen you may modify as your need.

so lets try this small app..

My Project structure is look like


-------------------------------------------
App Name: SplashScreenBasic
Package Name: com.rdc
Android SDK: Android SDK 2.3.3 / API 10
Default Activity Name: ActivitySplashScreen
-------------------------------------------

ActivitySplashScreen.java

package com.rdc;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.KeyEvent;
import android.view.Window;
import android.view.WindowManager;

public class ActivitySplashScreen extends Activity {

	// set splash duration 3 seconds
	private final int SPLASH_DISPLAY_LENGTH = 3000;

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

		// hide the notification bar title on screen
		requestWindowFeature(Window.FEATURE_NO_TITLE);

		// make full screen view
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
				WindowManager.LayoutParams.FLAG_FULLSCREEN);
		setContentView(R.layout.splash_screen);

		// create a thread for splash
		new Handler().postDelayed(new Runnable() {

			@Override
			public void run() {
				Intent i = new Intent(ActivitySplashScreen.this,
						ActivityHomeScreen.class);
				startActivity(i);
				finish();

				overridePendingTransition(R.drawable.splash_fade_in,
						R.drawable.splash_fade_out);

			}
		}, SPLASH_DISPLAY_LENGTH);
	}

	// disable home button during splash screen
	@Override
	public void onAttachedToWindow() {
		this.getWindow().setType(
				WindowManager.LayoutParams.TYPE_KEYGUARD_DIALOG);
		super.onAttachedToWindow();
	}

	// disable back button during splash screen
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		return false;
	}

}

ActivityHomeScreen.java
package com.rdc;

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

public class ActivityHomeScreen extends Activity {

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

}


create below two xml files in res/layout folder

splash_screen.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:gravity="center">
	<ImageView
		android:layout_height="fill_parent"
		android:layout_width="fill_parent"
		android:id="@+id/splash_image"
		android:src="@drawable/splashscreen"></ImageView>
</LinearLayout>

home_screen.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"
	android:gravity="center">
	<TextView
		android:layout_width="wrap_content"
		android:id="@+id/textView1"
		android:layout_height="wrap_content"
		android:text="@string/homeTitle"
		android:textSize="25sp"></TextView>
</LinearLayout>

create a drawable folder in resource and put these file for fad animation

splash_fade_in.xml
<alpha
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:interpolator="@android:anim/decelerate_interpolator"
	android:zAdjustment="top"
	android:fromAlpha="0.0"
	android:toAlpha="1.0"
	android:duration="2000" />

splash_fade_out.xml
<alpha
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:interpolator="@android:anim/accelerate_interpolator"
	android:fromAlpha="1.0"
	android:toAlpha="0.0"
	android:duration="3000" />

and you AndroidManifest.xml file will be like this.
<?xml version="1.0" encoding="utf-8"?>
<manifest
	xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.rdc"
	android:versionCode="1"
	android:versionName="1.0">
	<uses-sdk android:minSdkVersion="10" />

	<application
		android:icon="@drawable/icon"
		android:label="@string/app_name">
		<activity
			android:name=".ActivitySplashScreen"
			android:screenOrientation="nosensor"
			android:configChanges="keyboardHidden|orientation"
			android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"
			android:label="@string/app_name">
			<intent-filter>
			<action android:name="android.intent.action.MAIN" />
			<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity>
		<activity
			android:name=".ActivityHomeScreen"
			android:label="Home Screen">
			<intent-filter>
			<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity>

	</application>
</manifest>

The app will start like this..


You can download the complete source code zip file here : SplashScreenBasic

 cheers!!

 I'd love to hear your thoughts!