How to make Bottom Bar [or Navigation Bar like iPhone] like myTubo on Android?

Question

I\'m looking how to get a similar bar at the bottom of my application like MyTubo (or GroupMe) for Android. Something like this:

Answer 1

Per Android's specs, please don't do this. This is an iOS convention and simply does not work on the Android platform.

http://developer.android.com/design/patterns/pure-android.html

Don't use bottom tab bars

Other platforms use the bottom tab bar to switch between the app's views. Per platform convention, Android's tabs for view control are shown in action bars at the top of the screen instead. In addition, Android apps may use a bottom bar to display actions on a split action bar.

You should follow this guideline to create a consistent experience with other apps on the Android platform and to avoid confusion between actions and view switching on Android.

Answer 2

Also for me a good way to obtain something similar to iPhone's UITabBarController in Android consists in using RadioGroup plus RadioButtons. The good of this approach is that you can also use Fragment or anything you like, instead of only Intent and Activity.

I wrote a blog post to achieve the same result of Pied Piper, but using RadioGroup and RadioButtons. It's in Italian but, fortunately, the code speaks internationally ;) Here the result:

For more elaborate navigation bar design (like the ones in the original question), I suppose it's only a matter of cool and smart drawable ;)

Answer 3

This can be possible with TabActivity.

Needs following things ...

1. TabHost with TabWidget at bottom
2. Selectors for each TabSpec
3. Layouts for TabSpec having badge or any other special effects
4. And finally TabActivity that hosts Activities and ActivityGoups

I have made one smiler screen layout.

Following are steps ...

1. You will need TabWidget at bottom of your TabHost add in your res/layout/host.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"
    android:background="#777777">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
       <RelativeLayout
            android:id="@+id/layTab"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:background="@drawable/your_navigatio_tab_background_drawable"
            android:layout_alignParentBottom="true"
            android:layout_centerVertical="true"
            >
            <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            />
        </RelativeLayout>
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_alignParentTop="true"
            android:layout_above="@id/layTab"/>
    </RelativeLayout>
</TabHost>

2.Next you will required selectors, one for each your TabSpec, Here is demo selector : res/drawable/homeselector.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_selected="false" android:drawable="@drawable/home_image_when_not_selected"/>
   <item android:state_selected="true" android:drawable="@drawable/home_selected"  />
</selector>

3. Also you will required layouts for the TabSpecs that having badge or anything special layout effect, Here for example my cart TabSpec having badge so i have made following layout which called : res/layout/cartbottom.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/cartselector"
    android:gravity="right"
    >
<Button 
    android:id="@+id/redbtn"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_alignParentTop="true"
    android:text="00"
    android:paddingBottom="3dp"
    android:gravity="right|center_vertical"
    android:paddingRight="9dp"
    android:textSize="11dp"
    android:textStyle="bold"
    android:textColor="#ffffff"
    android:background="@drawable/red_badge_drawable"
/>   
</RelativeLayout>

4. And finally the TabActivity

package x.y;

import android.app.TabActivity;
import android.content.Intent;
import android.database.DatabaseUtils;
import android.database.sqlite.SQLiteDatabase;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.Toast;
import android.widget.TabHost.TabSpec;

public class Host extends TabActivity {

    public static Button btnRed; // Works as a badge
                                 //Declared static; so it can be accessed from all other Activities 
    public static TabHost tabHost;

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

        tabHost = (TabHost)findViewById(android.R.id.tabhost);

        TabSpec homeTabSpec = tabHost.newTabSpec("tid1");
        TabSpec signinTabSpec = tabHost.newTabSpec("tid2");
        TabSpec cartTabSpec = tabHost.newTabSpec("tid3");
        TabSpec moreTabSpec = tabHost.newTabSpec("tid4");
        TabSpec searchTabSpec = tabHost.newTabSpec("tid5");

        //Make Intents to your Activities or ActivityGroups 
        Intent intent1 = new Intent(this, Cart.class);
        Intent intent2 = new Intent(this, Home.class); 
        Intent intent3 = new Intent(this, SignIn.class);
        Intent intent4 = new Intent(this, Search.class);
        Intent intent5 = new Intent(this, More.class);

        LayoutInflater layoutInflater = this.getLayoutInflater();
        View layout_with_badge = layoutInflater.inflate(R.layout.cartbottom, null);
        btnRed = (Button) layout_with_badge.findViewById(R.id.redbtn);

        String cnt = String.valueOf("0");// Number on the badge

        btnRed.setBackgroundDrawable(getResources().getDrawable(R.drawable.red_badge_image_drawable));

        btnRed.setText(cnt);
        btnRed.setOnClickListener(new OnClickListener() {

            //@Override
            public void onClick(View v) {
                tabHost.setCurrentTab(2);
            }
        });

        cartTabSpec.setIndicator(layout_with_badge).setContent(intent1);

        Drawable d = getResources().getDrawable(R.drawable.homeselector);
        ImageView img1 = new ImageView(this);
        img1.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        img1.setImageDrawable(d);
        homeTabSpec.setIndicator(img1).setContent(intent2);

        d = getResources().getDrawable(R.drawable.signinselector);
        img1 = new ImageView(this);
        img1.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        img1.setImageDrawable(d);
        signinTabSpec.setIndicator(img1).setContent(intent3);

        d = getResources().getDrawable(R.drawable.searchselector);
        img1 = new ImageView(this);
        img1.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        img1.setImageDrawable(d);
        searchTabSpec.setIndicator(img1).setContent(intent4);

        d = getResources().getDrawable(R.drawable.moreselector);
        img1 = new ImageView(this);
        img1.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        img1.setImageDrawable(d);
        moreTabSpec.setIndicator(img1).setContent(intent5);

        /* Add tabSpec to the TabHost to display. */
        tabHost.addTab(homeTabSpec);
        tabHost.addTab(signinTabSpec);
        tabHost.addTab(cartTabSpec);
        tabHost.addTab(searchTabSpec);
        tabHost.addTab(moreTabSpec);

    }
}

How it looks ...

Answer 4

I know it is not related directly to the answer of the question , but I feel it is important to mention that it seems google has changed their mind regarding using bottom bars.(Thanks for the brilliant comment from @milapTank i did some digging)

up until last month (Feb 2016) google was saying "Don't use bottom tabbed bars" check out this cached page: https://web.archive.org/web/20160211061655/http://developer.android.com/design/patterns/pure-android.html

currently (March 2016) they removed this note and even add you some nice page to help you with the design :)

http://developer.android.com/design/patterns/pure-android.html

https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-behavior