How Do I Get Six Buttons To Resize Based On The Screen Size?

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 havi

Solution 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.

Solution 2:

If you want the buttons to always take up the full screen you could use a GridView which will automatically handle scaling on all screen sizes.

Solution 3:

you can use the below xml file:::

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <TextView 
 android:text="Text 1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 /> 
 <LinearLayout 
  android:orientation="horizantal" android:layout_width="fill_parent"
  android:layout_height="fill_parent" android:weight_sum = "2">
 <Button android:layout_width="fill_parent" android:layout_weight="1"
  android:layout_height="fill_parent" android:text="test" />
<Button android:layout_width="fill_parent" android:layout_weight="1"
  android:layout_height="fill_parent" android:text="test" />
</LinearLayout>
 <LinearLayout 
  android:orientation="horizantal" android:layout_width="fill_parent"
  android:layout_height="fill_parent" android:weight_sum = "2">
 <Button android:layout_width="fill_parent" android:layout_weight="1"
  android:layout_height="fill_parent" android:text="test" />
<Button android:layout_width="fill_parent" android:layout_weight="1"
  android:layout_height="fill_parent" android:text="test" />
</LinearLayout>
 <LinearLayout 
  android:orientation="horizantal" android:layout_width="fill_parent"
  android:layout_height="fill_parent" android:weight_sum = "2">
 <Button android:layout_width="fill_parent" android:layout_weight="1"
  android:layout_height="fill_parent" android:text="test" />
<Button android:layout_width="fill_parent" android:layout_weight="1"
  android:layout_height="fill_parent" android:text="test" />
</LinearLayout>


</LinearLayout>

Solution 4:

See an example here. Specifically the Dashboard Layout