Android Tab Menu

Web Hosting
Some times we want to wrap multiple views in a single window and navigate throught them with a Tab Container. this can be done in Android using TabHost control
There are two ways to use a TabHost application in Android:
  1. Using the TabHost to navigate through multiple views within the same activity.
  2. Using the TabHost to navigate through Actual multiple Activities using intents.
we will explain both ways through this tutorial:

Anatomy of  Tabbed Application

An activity with a TabHost may look like this:

The Activity consists of:
  1. TabHost: the root element of the layout.
  2. The TabHost wraps a TabWidget which represents the tab bar.
  3. The TabHost wraps a FrameLayout which wraps the contents of each tab.
There are some rules that we must stick to when using a Tabbed activity:
  1. If the activity is of type TabActivity [optional] then the TabHost must have the id@android:id/tabhost.
  2. The TabWidget must have the id @android:id/tabs.
  3. The FrameLayout must have the id @android:id/tabcontent.
now let’s see an example to an activity with multiple tabs:
this is the layout
<?xml version="1.0" encoding="utf-8"?>

    <TabHost android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tabHost"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <TabWidget
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@android:id/tabs"
    />
     <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="wrap_content"
    android:id="@+id/tab1"
    android:orientation="vertical"
    android:paddingTop="60px"
     >
     <TextView
    android:layout_width="fill_parent"
    android:layout_height="100px"
    android:text="This is tab1"
    android:id="@+id/txt1"
    />

     </LinearLayout>

     <LinearLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tab2"
    android:orientation="vertical"
    android:paddingTop="60px"
     >
     <TextView
    android:layout_width="fill_parent"
    android:layout_height="100px"
    android:text="This is tab 2"
    android:id="@+id/txt2"
    />

     </LinearLayout>

      <LinearLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tab3"
    android:orientation="vertical"
    android:paddingTop="60px"
     >
     <TextView
    android:layout_width="fill_parent"
    android:layout_height="100px"
    android:text="This is tab 3"
    android:id="@+id/txt3"
    />

     </LinearLayout>
     </FrameLayout>

    </TabHost>
then in the code of our activity
public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        TabHost tabHost=(TabHost)findViewById(R.id.tabHost);
        tabHost.setup();

        TabSpec spec1=tabHost.newTabSpec("Tab 1");
        spec1.setContent(R.id.tab1);
        spec1.setIndicator("Tab 1");

        TabSpec spec2=tabHost.newTabSpec("Tab 2");
        spec2.setIndicator("Tab 2");
        spec2.setContent(R.id.tab2);

        TabSpec spec3=tabHost.newTabSpec("Tab 3");
        spec3.setIndicator("Tab 3");
        spec3.setContent(R.id.tab3);

        tabHost.addTab(spec1);
        tabHost.addTab(spec2);
        tabHost.addTab(spec3);

 }
is going to look like this:
  1. We create tabs using TabSpecs class.
  2. We set the title of each tab using TabSpecs.setIndicator() method.
  3. We set the content of each tab using TabSpecs.setContent() method.
  4. if you use TabActivity to as a base class to your activity, you do not need to callTabHost.Setup() method.
We can add an icon to the title of the tab like this:
TabSpec spec1=tabHost.newTabSpec("Tab 1");
        spec1.setContent(R.id.tab1);
        spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.flash));

        TabSpec spec2=tabHost.newTabSpec("Tab 2");
        spec2.setIndicator("Tab 2",getResources().getDrawable(R.drawable.sun));
        spec2.setContent(R.id.tab2);

        TabSpec spec3=tabHost.newTabSpec("Tab 3");
        spec3.setIndicator("Tab 3",getResources().getDrawable(R.drawable.chart));
        spec3.setContent(R.id.tab3);
it will look like this:

we can also specify the indicator to be a view:
TabSpec spec1=tabHost.newTabSpec("Tab 1");
        spec1.setContent(R.id.tab1);
        TextView txt=new TextView(this);
        txt.setText("Tab 1");
        txt.setBackgroundColor(Color.RED);
        spec1.setIndicator(txt);

Setting the content of tabs:

we saw how to set the contents of tabs by specifying multiple layout resources to be displayed within the same activity.
what If we have multiple Activities in our application and we want to navigate between them using tabs ?
in this case we will have one activity as the root activity of the application. this activity will have theTabHost and will navigate to other activities using Intents.
Note: the root activity must inherit from TabActivity.
the root activity will have layout file like this:
<?xml version="1.0" encoding="utf-8"?>
    <TabHost android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@android:id/tabhost"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <TabWidget
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@android:id/tabs"
    />
     <FrameLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@android:id/tabcontent"
     >
     </FrameLayout>
    </TabHost>
the other activities will have a simple layout consisting of a TextView.
now to the code of the root activity
public class TabDemo 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();
        // no need to call TabHost.Setup()        

        //First Tab
        TabSpec spec1=tabHost.newTabSpec("Tab 1");
        spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.sun));
        Intent in1=new Intent(this, Act1.class);
        spec1.setContent(in1);
        // Second Tab
        TabSpec spec2=tabHost.newTabSpec("Tab 2");
        spec2.setIndicator("Tab 2",getResources().getDrawable(R.drawable.chart));
        Intent in2=new Intent(this,Act2.class);
        spec2.setContent(in2);

        tabHost.addTab(spec2);
        tabHost.addTab(spec3);
    }
}
and the activity will look like this:

Adding tabs at run-time:

we can add tabs to TabHost at run-time using TabSpec.setContent(TabContentFactory)method.
the TabContentFactory is an interface that requires the implementation of a callback methodcreateTabContent(String tag) which returns the view to be added to the content of the tab.
so in the last example if we changed code that adds the content of the second tab to this:
TabSpec spec1=tabHost.newTabSpec("Tab 1");
        spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.sun));

        spec1.setContent(new TabContentFactory() {

   @Override
   public View createTabContent(String tag) {
    // TODO Auto-generated method stub

    return (new AnalogClock(TabDemo.this));
   }
  });
the activity will look like this:

iPhone-Like Tabs:

to give the Android tabs the same look of the iPhone tabs we wrap the TabWidget and theFrameLayout in a RelativeLayout container and addingandroid:layout_alignParentBottom=”true” attribute to the TabWidget just like this:
<?xml version="1.0" encoding="utf-8"?>

    <TabHost android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@android:id/tabhost"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TabWidget
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@android:id/tabs"
    android:layout_alignParentBottom="true"
    />
     <FrameLayout
     android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@android:id/tabcontent"
     >

     </FrameLayout>
    </RelativeLayout>
    </TabHost>

Web Hosting

Android Button

Web Hosting
From Developer.android.com: "A button consists of text or an icon (or both text and an icon) that communicates what action occurs when the user touches it."

In this tutorial, we show you how to display a custom button with image, add a click listener by a few different ways, when user click on the button, open an URL in your Android’s internet browser.

Just open Eclipse and this is what you see after you drag a button to your layout.

Demo:



1. Two ways to make a button:

1.1 Design in your XML layout: 

 <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_bg"
        android:onClick="button_click"
        />

We need file layout "button_bg.xml" in drawable folder to customize this button
File: res/drawable/button_bg.xml” 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/up_button_press"
          android:state_pressed="true" />
    <item android:drawable="@drawable/up_button" />
</selector>

Android Custom Button- Figure 1up_button.png
Android Custom Button- Figure 2up_button_press.png 
1.2. By java code
If we before have a layout like:
<?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"
        >
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/layoutId"
            >
        </LinearLayout>
</LinearLayout>
 
Now the code we use to add button dynamically to this layout:

Button myButton = new Button(this);
// sets button properties
myButton.setText("Dynamic Button");
// btn.setId(1200);// use it if you want to set id for this button
myButton.setBackgroundResource(R.drawable.button_bg);
// retrieve a reference to the container layout
LinearLayout container = (LinearLayout)findViewById(R.id.layoutId);
LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
// adds dynamic button to the GUI
container.addView(myButton,lp);
 

2. Two ways to attach a click listener to the button, when user click on the button, open an URL in your Android’s internet browser
2.1. Use  android:onClick attribute in your button XML definition:
     android:onClick="button_click"

And in your code define the method button_click:

public void button_click(View view){ 
   Intent browserIntent =
             new Intent(Intent.ACTION_VIEW, Uri.parse("http://custom-android-dn.blogspot.com/"));
       startActivity(browserIntent);
}

2.2. Using an OnClickListener

myButton.setOnClickListener(new OnClickListener() {
@Override
   public void onClick(View v) {
      Intent browserIntent =
      new Intent(Intent.ACTION_VIEW, Uri.parse("http://custom-android-                 dn.blogspot.com/"));
      startActivity(browserIntent);
      }
});

CUSTOMIZED BUTTON

If you want to costumize your button using selector, you can find in the link below:

Adding Text & Image to Button

Code:

<Button
                android:id="@+id/preview"
                android:layout_width="fill_parent"
                android:layout_height="50dp"
                android:textStyle="bold"
                android:textSize="18sp"
                android:gravity="center_horizontal"
                android:shadowColor="#000000"
                android:shadowDx="1"
                android:shadowDy="1"
                android:shadowRadius="0.6"
                android:drawableLeft="@drawable/ic_preview"
                android:padding="10dp"
                android:background="@drawable/btn_style2"
                android:text="Preview"
                android:textColor="#FFFFFF" />

Demo:



That's all for now, Happy Coding!



Web Hosting

Running Apps

Web Hosting
If you followed the previous lesson to create an Android project, it includes a default set of "Hello World" source files that allow you to immediately run the app.
How you run your app depends on two things: whether you have a real Android-powered device and whether you're using Eclipse. This lesson shows you how to install and run your app on a real device and on the Android emulator, and in both cases with either Eclipse or the command line tools.
Before you run your app, you should be aware of a few directories and files in the Android project:
AndroidManifest.xml
The manifest file describes the fundamental characteristics of the app and defines each of its components. You'll learn about various declarations in this file as you read more training classes.
One of the most important elements your manifest should include is the <uses-sdk> element. This declares your app's compatibility with different Android versions using the android:minSdkVersion andandroid:targetSdkVersion attributes. For your first app, it should look like this:
<manifest xmlns:android="http://schemas.android.com/apk/res/android" ... >
    <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="17" />
    ...</manifest>
You should always set the android:targetSdkVersion as high as possible and test your app on the corresponding platform version. For more information, read Supporting Different Platform Versions.
src/
Directory for your app's main source files. By default, it includes an Activity class that runs when your app is launched using the app icon.
res/
Contains several sub-directories for app resources. Here are just a few:
drawable-hdpi/
Directory for drawable objects (such as bitmaps) that are designed for high-density (hdpi) screens. Other drawable directories contain assets designed for other screen densities.
layout/
Directory for files that define your app's user interface.
values/
Directory for other various XML files that contain a collection of resources, such as string and color definitions.
When you build and run the default Android app, the default Activity class starts and loads a layout file that says "Hello World." The result is nothing exciting, but it's important that you understand how to run your app before you start developing.

Run on a Real Device


If you have a real Android-powered device, here's how you can install and run your app:
  1. Plug in your device to your development machine with a USB cable. If you're developing on Windows, you might need to install the appropriate USB driver for your device. For help installing drivers, see the OEM USB Drivers document.
  2. Enable USB debugging on your device.
    • On most devices running Android 3.2 or older, you can find the option under Settings > Applications > Development.
    • On Android 4.0 and newer, it's in Settings > Developer options.
      Note: On Android 4.2 and newer, Developer options is hidden by default. To make it available, go toSettings > About phone and tap Build number seven times. Return to the previous screen to findDeveloper options.
To run the app from Eclipse:
  1. Open one of your project's files and click Run  from the toolbar.
  2. In the Run as window that appears, select Android Application and click OK.
Eclipse installs the app on your connected device and starts it.
Or to run your app from a command line:
  1. Change directories to the root of your Android project and execute:
    ant debug
  2. Make sure the Android SDK platform-tools/ directory is included in your PATH environment variable, then execute:
    adb install bin/MyFirstApp-debug.apk
  3. On your device, locate MyFirstActivity and open it.
That's how you build and run your Android app on a device! To start developing, continue to the next lesson.

Run on the Emulator


Whether you're using Eclipse or the command line, to run your app on the emulator you need to first create anAndroid Virtual Device (AVD). An AVD is a device configuration for the Android emulator that allows you to model different devices.
Figure 1. The AVD Manager showing a few virtual devices.
To create an AVD:
  1. Launch the Android Virtual Device Manager:
    1. In Eclipse, click Android Virtual Device Manager from the toolbar.
    2. From the command line, change directories to<sdk>/tools/ and execute:
      android avd
  2. In the Android Virtual Device Manager panel, click New.
  3. Fill in the details for the AVD. Give it a name, a platform target, an SD card size, and a skin (HVGA is default).
  4. Click Create AVD.
  5. Select the new AVD from the Android Virtual Device Manager and click Start.
  6. After the emulator boots up, unlock the emulator screen.
To run the app from Eclipse:
  1. Open one of your project's files and click Run  from the toolbar.
  2. In the Run as window that appears, select Android Application and click OK.
Eclipse installs the app on your AVD and starts it.
Or to run your app from the command line:
  1. Change directories to the root of your Android project and execute:
    ant debug
  2. Make sure the Android SDK platform-tools/ directory is included in your PATH environment variable, then execute:
    adb install bin/MyFirstApp-debug.apk
  3. On the emulator, locate MyFirstActivity and open it.

Web Hosting