Android

Android Tab Example with source code
Author : Ishtek

Setup Eclipse with Android ADT Plugin for test/code environment (by using Android API Level 7 and Emulator).
P.S- Above page is having around 14 images, download size could be around 700KB.

This Page and/or example code is using Android API Level 7 and tested using corresponding Emulator only.
For latest information please refer Android Official website.

Using Android API Level : 7 In this tutorial we shall be covering Android's TabActivity API with the help of an example. Final screen of this example would look like the below image: Tab view of this application showing two different sections as different categories. Following image shows screen after clicking second tab: This example Tab Layout for initial screen layout as follows: main.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" > <TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:layout_width="fill_parent" android:id="@+id/linearLayout1" android:layout_height="fill_parent" android:orientation="vertical"> <TabWidget android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@android:id/tabs"> </TabWidget> <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@android:id/tabcontent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab1"> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab2"> </LinearLayout> </FrameLayout> </LinearLayout> </TabHost> </LinearLayout>
Apart from the above main.xml file for the the main TabHost and TabWidget components, we have four other Android layout XML files with appropriate usage as mentioned below: tab1header.xml - for the layout of Tab 1 tab2header.xml - for the layout of Tab 2 tab1layout.xml - for the layout of Tab 1 content view tab2layout.xml - for the layout of Tab 2 content view. tab1header.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffff"> <ImageView android:id="@+id/camera1" android:src="@drawable/camera1" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="Cameras" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout>
tab1layout.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffee33"> <TableLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <TableRow android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:text="Cameras" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:src="@drawable/camera1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px"/> <ImageView android:src="@drawable/camera2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px"/> <ImageView android:src="@drawable/camera3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px"/> <ImageView android:src="@drawable/camera4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px"/> </LinearLayout> </TableRow> </TableLayout> </LinearLayout>
tab2header.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffff"> <ImageView android:id="@+id/cupboards" android:src="@drawable/cupboards1" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <View android:layout_width="20px" android:layout_height="20px"/> <TextView android:text="Cup-Boards" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout>
tab2layout.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tab2layout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffee33"> <TextView android:text="CupBoards" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <ImageView android:src="@drawable/cupboards1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px"/> <ImageView android:src="@drawable/cupboards2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px"/> <ImageView android:src="@drawable/cupboards3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px"/> <ImageView android:src="@drawable/cupboards4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="2px"/> </LinearLayout>
Using Android API such as TabActivity class and TabHost.TabContentFactory interface files, those can be extended by example specific Java class files such as "AdvanceTabExample" extends TabActivity and "TabContentLayout" implements TabHost.TabContentFactory interface file. AdvanceTabExample.java
package com.techienjoy.example.tab; import android.app.Activity; import android.app.TabActivity; import android.content.Context; import android.content.res.Resources; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TabHost; import android.widget.TabHost.TabSpec; public class AdvanceTabExample extends TabActivity { LayoutInflater layoutInflater = null; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); TabHost tabHost = getTabHost(); LinearLayout tab1Layout = (LinearLayout) layoutInflater.inflate(R.layout.tab1header, null); LinearLayout tab2Layout = (LinearLayout) layoutInflater.inflate(R.layout.tab2header, null); TabHost.TabSpec tab1spec = tabHost.newTabSpec("tabOneSpec"); ImageView imgView = new ImageView(this); imgView.setBackgroundResource(R.drawable.camerascategory); tab1spec.setIndicator("Cameras", imgView.getBackground()); //tab1spec.setContent(R.id.tab1); tab1spec.setContent(new TabContentLayout()); TabHost.TabSpec tab2spec = tabHost.newTabSpec("tabTwoSpec"); tab2spec.setContent(new TabContentLayout()); ImageView imgView1 = new ImageView(this); imgView1.setBackgroundResource(R.drawable.cupboards); tab2spec.setIndicator("Cup Boards", imgView1.getBackground()); tabHost.addTab(tab1spec); tabHost.addTab(tab2spec); } private class TabContentLayout implements TabHost.TabContentFactory { @Override public View createTabContent(String tag) { View view = null; if(tag.equals("tabOneSpec")) { view = (LinearLayout) layoutInflater.inflate(R.layout.tab1layout, null); } if(tag.equals("tabTwoSpec")) { view = (LinearLayout) layoutInflater.inflate(R.layout.tab2layout, null); } return view; } } }
Once all these files are placed in folders as appropriate within Eclipse Workspace and Android Project, Java files compiled and *.apk file created. Then this APK file can be published to Android Emulator for displaying application at runtime. If you would like to share your thoughts on this, please write to us @ usingframeworks @ gmail dot com
If interested in commenting related to Android Tab Example
Click Here

Name (To be shown on this Page:*

Email (Not to be shown):*

Website (To be shown on this Page)

Your Comments here (To be shown on this Page):*

(You can use <a> Tag in your comments)

Please enter same number as shown here 820

Name: usingframeworksDated: 2013-10-20 20:59:48
nice example of tab api from Android API. Can anyone please suggest any ways of showing tabs in vertical formation?
That means all tab headers would align vertically and on click of any given tab header corresponding tab details would be shown on the detailed section on the right side.    
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 648

Name: SureshDated: 2013-11-02 15:02:26
Is there any ways to provide animated change of tab details on click of the tab head label.

How to handle click event while using TAB example on Android API.

I am looking for help in finding approach for dynamically loading layout/screen from server,
and displaying in the tab details section of the tab header clicked.    
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 648




Android Thread Example

REST Interview Questions

JAX-WS Webservice Example

Android Overlap SurfaceView Example

Spring3 Integration of File Endpoint

JAXWS Webservice Example

Android WebView Example

Android Context Menu Example

Setting up Eclipse for Android App Development

Android SensorEvent Orientation Example

Android ImageSwitcher Example

REST API Design for Android App

Android ExpandableListView Example

Singleton Serializable on Android

Android GPS with Google MAP Example

Android Project With Example

Android Project Manageing Files

Project Ideas for App on Android Platform

Android EditText with Background

Android SQLite Database Example

Android AutoCompleteTextView Example

Android Tester

Android Interview Questions

Android ListView Example

Android Intent Notification Example

Android Intent Broadcast Example

Android TextView Link Example

Android Sensor List

Android Sensor Orientation Example

Android Intent Broadcast Receiver

Android Gallery SurfaceViews Example

Android Location Example

Android Text to Speech Example

Android Intent Example

Android Layout Example

Android Download File Example

Android Expandable ListView Example

Android Tab Example

Android RelativeLayout Example

Android Intent Example

Android Text to Speech Example

Android SQLite Example

Android CustomView Example

Android Canvas Example

Android SharedPreferences Example

Android Shape Background Example

Android ShapeButton Example

Android ViewFlipper Example

Android Gallery Example

Android TimePickerDialog Example





If interested commenting on this Page :

comments powered by Disqus
Any source code found on any of the page(s) in Techiecommunity.net is associated with following notice: 
   /*
     * TECHIECOMMUNITY.NET MAKES NO REPRESENTATIONS OR WARRANTIES ABOUT THE SUITABILITY OF
     * THE SOFTWARE, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
     * TO THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
     * PARTICULAR PURPOSE, OR NON-INFRINGEMENT. TECHIECOMMUNITY.NET SHALL NOT BE LIABLE FOR
     * ANY DAMAGES SUFFERED BY LICENSEE AS A RESULT OF USING, MODIFYING OR
     * DISTRIBUTING THIS SOFTWARE OR ITS DERIVATIVES.
     *
     * THIS SOFTWARE IS NOT DESIGNED OR INTENDED FOR USE OR RESALE AS ON-LINE
     * CONTROL EQUIPMENT IN HAZARDOUS ENVIRONMENTS REQUIRING FAIL-SAFE
     * PERFORMANCE, SUCH AS IN THE OPERATION OF NUCLEAR FACILITIES, AIRCRAFT
     * NAVIGATION OR COMMUNICATION SYSTEMS, AIR TRAFFIC CONTROL, DIRECT LIFE
     * SUPPORT MACHINES, OR WEAPONS SYSTEMS, IN WHICH THE FAILURE OF THE
     * SOFTWARE COULD LEAD DIRECTLY TO DEATH, PERSONAL INJURY, OR SEVERE
     * PHYSICAL OR ENVIRONMENTAL DAMAGE ("HIGH RISK ACTIVITIES"). TECHIECOMMUNITY.NET
     * SPECIFICALLY DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY OF FITNESS FOR
     * HIGH RISK ACTIVITIES.
     */
   
The content provided in this page is NOT warranted and/or NOT guaranteed by techiecommunity.net .
techiecommunity.net is not liable for any negative consequences that may result/arise from 
implementing directly/indirectly any information covered in these pages/articles/tutorials.

For any of the content, if you would like to bring it to notice for removal from this web site, 
please write to this web site administrator @ EMAIL-ID (please remove space before and after @),
with appropriate concern and supporting proof(s). After thorough review and if found genuine concern,
we would take appropriate action and remove disputed content from this web site within 24 hours 
starting from the time it has brought to techiecommunity.net Administrator notice.

This website uses cookies and third party cookies to improve the user experience. 
And to provide more relevant ads. 
In case of continued use of this website implies that you accept the use of cookies on this website.
		
While using this web site, you agree to have read and accepted techiecommunity.net terms of use and privacy policy.