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!

Labels: , ,

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!

Labels: , ,

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!

Labels: , ,

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!

Labels: , ,