1

I am very new to Android programming. I am just trying to create a very simple Tab Layout. I want the image on the tab to be placed above the text but that is not happening. The image ends up being placed over the text and looks terrible. I've been stuck on this for days.

Any help is much appreciated.

Thank you

<TabHost
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/tabHost"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="match_parent">

            <LinearLayout
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:backgroundTint="#ff5c2dff"
                android:baselineAligned="true"
                android:measureWithLargestChild="true"
                android:minHeight="50dp">


            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:minHeight="50dp">

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="New Button"
                    android:id="@+id/button"
                    android:layout_gravity="center_horizontal" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:minHeight="50dp"></LinearLayout>
        </FrameLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#ffff2a1d"></TabWidget>
    </LinearLayout>
</TabHost>


protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    getSupportActionBar().hide();
    setContentView(R.layout.activity_main);


    TabHost tabHost=(TabHost)findViewById(R.id.tabHost);
    tabHost.setup();

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


    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);

   setTabIcon(tabHost, 0, R.drawable.homeb);
}


public void setTabIcon(TabHost tabHost, int tabIndex, int iconResource) {
    ImageView tabImageView = (ImageView) tabHost.getTabWidget().getChildTabViewAt(tabIndex).findViewById(android.R.id.icon);
    tabImageView.setPadding(10, 10, 10, 15);
    tabImageView.setVisibility(View.VISIBLE);

    tabImageView.setBackgroundColor(Color.BLUE);
    tabImageView.setColorFilter(Color.GREEN);
    tabImageView.setImageResource(iconResource);



}
Indigo Montoya
  • 57
  • 2
  • 6
  • I would really suggest using a tab library. There are so many great ones that makes tabs easier. I also suggest against putting an image over the tab. Here are the latest guidelines for tabs. If you want an example I can post it. http://www.google.com/design/spec/components/tabs.html – Eugene H May 27 '15 at 23:28
  • Thanks, but I want my android app to match my iOS app. – Indigo Montoya May 28 '15 at 00:28
  • I understand. Just for thought, Android users may not be familiar with IOS design making it not user friendly. – Eugene H May 28 '15 at 00:38
  • I believe your problem is similar to this [http://stackoverflow.com/questions/21528687/how-to-add-the-icon-for-swipeable-tabs](example) – Roon13 May 28 '15 at 07:02

1 Answers1

0

1)Create a layout and design it as a vertically oriented LinearLayout containing two elements - ImageView and TextView (Give padding/margin,etc as per your requirement).
2)Now in your existing code where you are defining TabSpec - set your above layout as its Indicator. Now update ImageView and TextView using their ids.
You're done.
I would have pasted the code for you but it's not allowing

AnswerDroid
  • 1,873
  • 2
  • 33
  • 52