Android: August 2015

This is a simple tab layout contains 3 tabs.

In this post we need three separate activities for three tab screens. So let’s get started by creating a simple project by opening eclipse IDE.

Create a new project File -> New -> Android Project and give activity name asAndroidTabLayoutActivity.

Open your AndroidTabLayoutActivity and extend the class from TabActivity.

public class AndroidTabLayoutActivity extends TabActivity {

open AndroidTabLayoutActivity.java and type the following code. In the following code we are creating three TabSepcs and adding them to TabHost.

AndroidTabLayoutActivity.java

package com.example.androidtablayout;

import android.app.TabActivity;

import android.content.Intent;

import android.os.Bundle;

import android.widget.TabHost;

import android.widget.TabHost.TabSpec;

public class AndroidTabLayoutActivity extends TabActivity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

TabHost tabHost = getTabHost();

////////////////////// Tab for Photos

TabSpec photospec = tabHost.newTabSpec("Photos");

photospec.setIndicator("Photos", getResources().getDrawable(R.drawable.icon_photos_tab));

Intent photosIntent = new Intent(this, PhotosActivity.class);

photospec.setContent(photosIntent);

// //////////////////////Tab for Songs

TabSpec songspec = tabHost.newTabSpec("Songs");

// setting Title and Icon for the Tab

songspec.setIndicator("Songs", getResources().getDrawable(R.drawable.icon_songs_tab));

Intent songsIntent = new Intent(this, SongsActivity.class);

songspec.setContent(songsIntent);

// ///////////////////// Tab for Videos

TabSpec videospec = tabHost.newTabSpec("Videos");

videospec.setIndicator("Videos", getResources().getDrawable(R.drawable.icon_videos_tab));

Intent videosIntent = new Intent(this, VideosActivity.class);

videospec.setContent(videosIntent);

// Adding all TabSpec to TabHost

tabHost.addTab(photospec); // Adding photos tab

tabHost.addTab(songspec); // Adding songs tab

tabHost.addTab(videospec); // Adding videos tab

}

Now we need 3 activities and 3 xml layouts for three tabs. So create three activities by right click on your package folder and create classes and name them as PhotosActivity.java,SongsActivity.java and VideosActivity.java. Type the following code respectively.
Right Click on package folder -> New -> Class

PhotosActivity.java

package com.example.androidtablayout;

import android.app.Activity;

import android.os.Bundle;

public class PhotosActivity extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.photos_layout);

}

SongsActivity.java

package com.example.androidtablayout;

import android.app.Activity;

import android.os.Bundle;

public class SongsActivity extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.songs_layout);
}

}

VideosActivity.java

package com.example.androidtablayout;

import android.app.Activity;

import android.os.Bundle;

public class VideosActivity extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.videos_layout);

}

}

===================================================================

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

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.androidtablayout"

android:versionCode="1"

android:versionName="1.0">

<uses-sdk android:minSdkVersion="8" />

<activity android:name=".AndroidTabLayoutActivity"

android:label="@string/app_name">

<intent-filter>

</intent-filter>

</activity>

<activity android:name=".SongsActivity" />

<activity android:name=".VideosActivity" />

<activity android:name=".PhotosActivity" />

</application>

</manifest>

Each and every tab needs an icon so design icons for each tab. We need three dimensions of each icon. Design each icon in 48 x 48 px, 32 x 32 px and 24 x 24 px and place them indrawable-hdpi, drawable-mdpi and drawable-ldpi respectively. See following diagram for your guidance

$G:\kjs\mad programs\AndroidTabLayout\res\drawable-hdpi\icon.png$ $G:\kjs\mad programs\AndroidTabLayout\res\drawable-hdpi\songs_white.png$ $G:\kjs\mad programs\AndroidTabLayout\res\drawable-hdpi\photos_white.png$ $G:\kjs\mad programs\AndroidTabLayout\res\drawable-hdpi\songs_gray.png$ $G:\kjs\mad programs\AndroidTabLayout\res\drawable-hdpi\photos_gray.png$ $G:\kjs\mad programs\AndroidTabLayout\res\drawable-hdpi\videos_gray.png$ $G:\kjs\mad programs\AndroidTabLayout\res\drawable-hdpi\videos_white.png$

icon_photos_tab.xml

<?xml version="1.0" encoding="utf-8"?>

<item android:drawable="@drawable/photos_gray"

android:state_selected="true" />

</selector>

icon_songs_tab.xml

<?xml version="1.0" encoding="utf-8"?>

<item android:drawable="@drawable/songs_gray"

android:state_selected="true" />

</selector>

icon_videos_tab.xml

<?xml version="1.0" encoding="utf-8"?>

<item android:drawable="@drawable/videos_gray"

android:state_selected="true" />

</selector>

Now open your main.xml under res -> layout folder and type the following code.

<?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">

<TabWidget

android:id="@android:id/tabs"

android:layout_width="fill_parent"

android:layout_height="wrap_content" />

<FrameLayout

android:id="@android:id/tabcontent"

android:layout_width="fill_parent"

android:layout_height="fill_parent"/>

</LinearLayout>

</TabHost>

photos_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="PHOTOS HERE"

android:padding="15dip"

android:textSize="18dip"

android:layout_width="fill_parent"

android:layout_height="wrap_content"/>

</LinearLayout>

songs_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="SONGS HERE"

android:padding="15dip"

android:textSize="18dip"

android:layout_width="fill_parent"

android:layout_height="wrap_content"/>

</LinearLayout>

videos_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="VIDEOS HERE"

android:padding="15dip"

android:textSize="18dip"

android:layout_width="fill_parent"

android:layout_height="wrap_content"/>

</LinearLayout>

Android

Sunday, August 23, 2015

Tabview