Question

I’m creating a car dock application for myself and I have 6 buttons to allow me to place shortcuts to applications. I’ve designed a layout for landscape and portrait mode. I’m having issues with screen sizes in portrait mode. I have my icons lined up like so:

Text up here
------------
| 1  |  2  |
------------
| 3  |  4  |
------------
| 5  |  6  |
------------

Here’s the XML for the buttons:

<Button
    android:id="@+id/btnLaunchSlotOne"
    style="@style/launchButton"
    android:layout_width="fill_parent"
    android:layout_height="100dp"
    android:layout_weight="1"
    android:layout_marginRight="8dp"
    android:padding="10dp"
    android:text="Navigation"
    android:textColor="#ffffff" />

Now the problem I’m having is when I test the app on a smaller screen size, the buttons don’t seem to resize and they go off the screen at the bottom. How can I get them to scale properly? I thought using “dp” took care of all that?

Do I need to calculate the screen size programatically?

Thanks for the suggestions / help!

Answer 1

Use something like the layout below to correctly nest the buttons:

<LinearLayout
    android:orientation="vertical">
    <TextView>Put your Text here</TextView>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_weightSum="2">
        <LinearLayout
            android:orientation="vertical"
            android:layout_height="fill_parent"
            android:layout_width="0dp"
            android:layout_weightSum="3"
            android:layout_weight="1">
            <Button 
                android:layout_weight="1"/>
            <Button 
                android:layout_weight="1"/>
            <Button 
                android:layout_weight="1"/>
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_weightSum="3"
            android:layout_height="fill_parent"
            android:layout_width="0dp"
            android:layout_weight="1">
            <Button 
                android:layout_weight="1"/>
            <Button 
                android:layout_weight="1"/>
            <Button 
                android:layout_weight="1"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Then each button needs height of 0dp (this lets the weight apply and scale the button horizontally) and width of fill parent.

The trick is that the weight of a child element will cause the dimension that is set to 0dp to fill to a percentage of of the weightSum of the parent element.

Eg i have a linear layout with weightSum 3 and 3 child buttons of weight 1. When height is set to 0dp they will each take 1/3 of the height of the parent as their height. When width is set to 0dp they will each take 1/3 of the width of the parent as their own.

This is the best way to organise items according to a percentage width or height.

As an aside if you had two buttons one with weight 2 and one with weight 1 then 1 button would be 33% of the parents height/width and the other 66% of the parents height/width. Handy little trick and works on all screens.