Android ICS to JB Actionbar tabs changed requirements

Question

I have an application that targets SDK 15, ICS 4.0.3. I just updated it to point at 4.1 it broke my user interface, and makes it pretty ugly:

Here's what it looks like normally on API 15:

And here's it on 16 or 17:

I got a feeling this is because the Nexus 7 uses the phone UI instead of the actual tablet UI... Is there a way to force the tabs into the actionbar without having to use something like ActionBar sherlock or something else (like subclassing)? Or even if I could make the tabs not look terrible, perhaps if they had centered text? Right now the buttons don't even do match_parent. Is there a downside to targeting a lower SDK (I don't need anything higher right now)? My app only runs on ICS or higher.

Accroach

Answer 1

I have created like instagram action bar like a tabs you may check my previous answer and how i did it. Im using phone right im not able to post the code as its on my laptop. Anyway just check my previous answer . Later i will drop by again and post the code.

Edit------

Edit here is the image :). 

back again with a best results :). first thing you need to do is create a layout name it header.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="@dimen/action_bar_height"
    android:layout_gravity="top"
    android:baselineAligned="true"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/share"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:layout_weight=".14"
        android:background="@drawable/action_bar_left_button"
        android:src="@drawable/action_bar_glyph_back" />

    <ImageView
        android:id="@+id/bright"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".14"
        android:background="@drawable/action_bar_left_button"
        android:src="@drawable/action_bar_glyph_lux" />

    <ImageView
        android:id="@+id/rotate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".14"
        android:background="@drawable/action_bar_left_button"
        android:src="@drawable/rotate" />

    <ImageView
        android:id="@+id/bright"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".14"
        android:background="@drawable/action_bar_left_button"
        android:src="@drawable/action_bar_glyph_lux" />

    <ImageView
        android:id="@+id/rotate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".14"
        android:background="@drawable/action_bar_left_button"
        android:src="@drawable/rotate" />

    <ImageView
        android:id="@+id/forwa"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".14"
        android:background="@drawable/action_bar_left_button"
        android:src="@drawable/forward" />

</LinearLayout>

after that go to your MainActivity.class and create this method.

    private void setupActionBar() {
    ActionBar actionBar = getActionBar();
    //actionBar.setDisplayShowHomeEnabled(false);
    actionBar.setDisplayShowTitleEnabled(false);
    ViewGroup v = (ViewGroup)LayoutInflater.from(this)
        .inflate(R.layout.header, null);
    actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM,
            ActionBar.DISPLAY_SHOW_CUSTOM);
    actionBar.setCustomView(v,
            new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT,
                    ActionBar.LayoutParams.WRAP_CONTENT,
                    Gravity.CENTER_VERTICAL | Gravity.RIGHT));

} 

add setupActionBar(); to your onCreate Activity and run your app :).

now you have custom ActionBar with Dividers and Images P.S the divider is defined in the layout as an image background :).

Hickson

While this works well (and I'll likely use it in the future), it doesn't exactly solve the issue with the tabs moving into the actionbar (though it can be used to do so). I'm using a viewpager so I can swipe left/right to switch tabs and it'd take a bit more work to get it working, but if I can't I'll possibly make a custom actionbar. – Accroach

you can use viewpage with this , or you can use HorizontalScrollView to make them scrolls , or you can simply add a function to the viewpager that when you scroll it it make the imgeView highlighted. lets say u using imageView so when you scroll between page from first to the second page it will highlight the image Above in my example. just add this method in your viewpage onCreate so when you scroll to it, it highlights the image imageView1.setImageResource(R.drawable.PressedImage) – Hickson