TabWidget custom tabs - unwanted extra margin and text aligment issues

Question

I'm using TabWidget to get tabbed navigation. Each tab tile has icon and text below it. As content of my tab I currently have cardview list. So, tab button layout:

<LinearLayout android:id="@+id/tabsLayout"
              xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"

              android:gravity="center"
              android:orientation="vertical">

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_gravity="bottom|center"/>

    <TextView android:id="@+id/title"
              style="@android:style/TextAppearance.Holo.Medium"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentBottom="true"
              android:layout_centerHorizontal="true"
              android:textColor="#000000"
              android:text="test"
              android:visibility="visible"
              android:focusableInTouchMode="false"
              android:layout_gravity="center"
              android:textIsSelectable="true" android:textSize="13sp"
              android:textAlignment="center"
              android:gravity="center_horizontal"/>
</LinearLayout>

My activity where tab widget is used:

<?xml version="1.0" encoding="utf-8"?>
<TabHost
    android:id="@android:id/tabhost"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

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

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0"/>

        <FrameLayout
            android:id="@+id/realtabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"/>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:orientation="horizontal" android:background="#84dadada"/>

    </LinearLayout>
</TabHost>

FrameLayout is for replacing tab content with fragments when user switch between tabs. It works, but there are some problems though. This is how it looks like:

As you can see - first problem is icon alignment. If text is wrapped as multiline (large font and small screen), icon is not aligned with the rest ones that have one line label. How to get all icons properly aligned? Second - there is white extra space just above my tab control - why? How to disable it?

Any ideas?

[edit] My CardView is defined as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="horizontal"
              android:padding="3dp"
    >

    <android.support.v7.widget.CardView android:id="@+id/card_view"
                                        xmlns:card_view="http://schemas.android.com/apk/res-auto"
                                        android:layout_width="match_parent"
                                        android:layout_height="100dp"
                                        android:layout_gravity="center_vertical"
                                        android:background="?android:attr/selectableItemBackground"

                                        card_view:cardCornerRadius="0dp"
                                        card_view:cardElevation="dp" android:clickable="false">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/card_image"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="2"
                android:padding="6dp"
                android:src="@drawable/ic_launcher"/>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="5"
                android:orientation="vertical"
                android:padding="4dp">

                <TextView
                    android:id="@+id/card_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="2dp"
                    android:text="Large Text"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textStyle="bold"/>

                <TextView
                    android:id="@+id/card_info"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="2dp"
                    android:text="Small Text"
                    android:textAppearance="?android:attr/textAppearanceSmall"/>

            </LinearLayout>

            <ImageView
                android:id="@+id/arrow"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:padding="6dp"
                android:src="@drawable/arrow"/>

        </LinearLayout>


    </android.support.v7.widget.CardView>



</LinearLayout>

So it seems there is extra margin around cardview - top, bottom, left and right. How to disable it?

Instead of textView and ImageView, try to use `drawableTop` element in textView for icon. — Alex Chengalan, Sep 10 '15 at 07:01
can you try to set both `android:padding="0px" android:layout_margin="0px"` to your `TabHost` ? In Android, some components come with default padding and margin > 0 — Stefano, Sep 10 '15 at 08:16
I think it's about cardview, not tabhost. Isn't it the same as margin at the top? — user1209216, Sep 10 '15 at 08:45
I never used TabHost and CardViews in my projects, in your case I'd go step by step setting padding and margin to 0px from the children up to the top parent container, since the problem is solved :) — Stefano, Sep 10 '15 at 09:29
I figuret it out, there was padding set for my relative layout on frament displaying recyclerview. But icons aligment issue is still open — user1209216, Sep 10 '15 at 10:47

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

For the space issue have a look here, it may be a duplicate answer.

For the icon-alignment, have a look here, it shows how to keep your text on a single-line and use ellipsis to truncate it if your device doesn't have room to show it entirely. It may not be your perfect solution, but it's a good hint.

edited May 23 '17 at 12:14

Community

1
1

answered Sep 10 '15 at 06:58

Stefano

156
3
14

For space issue, I can't add 'android:layout_paddingTop' and so on, it throws an error "No resource identifier found" – user1209216 Sep 10 '15 at 07:21
`android:padding="0px" android:layout_margin="0px" ` ? – Stefano Sep 10 '15 at 07:38

TabWidget custom tabs - unwanted extra margin and text aligment issues

1 Answers1