Android button height

Question

I have created a set of vertical tabs using buttons to represent the tabs and I have set the height of the buttons to wrap content.

This doesnt seem to be respected though as the buttons scale to take up all available space, there are only 5 buttons in the vertical linear layout yet they all stretch to take up the available space. The icon in the button is small and so is the text so this doesnt look very good.

How do I get the buttons to truly only wrap their content? I would like them all the same size and to not fill all available space.

Is setting the height explicitly in dp a good or bad idea?

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/light_grey">
<LinearLayout android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:layout_marginRight="8dp">
    <FrameLayout android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="3">
        <TabWidget android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:visibility="gone"/>
        <LinearLayout
            android:id="@+id/tab_btn_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <Button
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_weight="1.0"
                android:background="@color/lightest_grey"
                android:id="@+id/patient_tab_btn"
                android:text="Patient"
                android:textSize="7sp"
                android:gravity="bottom|center"
                android:drawableTop="@drawable/user"
                android:paddingTop="4dp"
                />
            <Button
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_weight="1.0"
                android:background="@color/lightest_grey"
                android:id="@+id/relations_tab_btn"
                android:text="Relations"
                android:layout_marginTop="1dp"
                android:textSize="7sp"
                android:gravity="bottom|center"
                android:drawableTop="@drawable/family"
                android:paddingTop="4dp"
                />
            <Button
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_weight="1.0"
                android:background="@color/lightest_grey"
                android:id="@+id/providers_tab_btn"
                android:text="Providers"
                android:layout_marginTop="1dp"
                android:textSize="7sp"
                android:gravity="bottom|center"
                android:drawableTop="@drawable/doctors_bag"
                android:paddingTop="4dp"
                />
            <Button
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_weight="1.0"
                android:background="@color/lightest_grey"
                android:id="@+id/locations_tab_btn"
                android:text="Locations"
                android:layout_marginTop="1dp"
                android:textSize="7sp"
                android:gravity="bottom|center"
                android:drawableTop="@drawable/map_marker"
                android:paddingTop="4dp"
                />
            <Button
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_weight="1.0"
                android:background="@color/lightest_grey"
                android:id="@+id/summary_tab_btn"
                android:text="Summary"
                android:layout_marginTop="1dp"
                android:textSize="7sp"
                android:gravity="bottom|center"
                android:drawableTop="@drawable/treatment_plan"
                android:paddingTop="4dp"
                />
            <Button
                android:layout_height="|"
                android:layout_width="match_parent"
                android:layout_weight="1.0"
                android:background="@color/lightest_grey"
                android:id="@+id/cpis_tab_btn"
                android:text="Protection"
                android:layout_marginTop="1dp"
                android:textSize="7sp"
                android:gravity="bottom|center"
                android:drawableTop="@drawable/students"
                android:paddingTop="4dp"
                />

        </LinearLayout>
    </FrameLayout>
    <FrameLayout android:id="@android:id/tabcontent"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="17"
        android:background="@color/white"/>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>

Thanks

Setting the height explicitly is generally a bad idea for stuff with text in it because the user can scale the global text size outside of your app. To answer the rest, you'll need to post some code - your layout should suffice but we might need more ;_0 — JoeyJubb, Oct 08 '15 at 08:37

score 2 · Answer 1 · answered Oct 08 '15 at 08:44

The layout_weight parameter of the buttons is what is causing your problem. If this parameter is set, the height parameter is ignored. Setting a weight results in all the remaining space being allocated to all children with weights in the ratio of their weights. In your layout, you have 6 buttons. Hence, the remaining space is filled by the 6 buttons with equal height set for all. You can either limit the height of the linear layout parent, or remove the weights of the buttons. Edit: I have mentioned that if weight is set, height is ignored. This is true only if the orientation of the LinearLayout is vertical. In case it is horizontal, the width attribute is ignored.

score 2 · Accepted Answer · edited May 23 '17 at 12:03

2

Setting height in dp will not keep perfect proportions through different screens.

For me, the easiest way is to create my interface by code so i can make any calculations i need and set the exact sizes on px.

Take a look at my post asking for opinions.

As for fixing your xml, set your LinearLayout height to wrap_content or remove the weights, it is making the buttons to distribute parent height equally.

Hope this helps.

edited May 23 '17 at 12:03

Community

1
1

answered Oct 08 '15 at 08:46

Nanoc

2,381
1
20
35

Thanks a lot for the help removing the weight fixed it, shame I cant accept multiple answers but thanks again for the quick reply! – berimbolo Oct 08 '15 at 08:50

Android button height

2 Answers2