Question

I am trying to create my own buttons for a calculator application.

My trouble is that , i’m finding it hard to support all the different screen sizes.

Basically i have a number of buttons, created like this

<Button android:text="Button" android:id="@+id/button1"
    android:background="@drawable/test"
    android:layout_height="60dip" android:layout_width="60dip" android:layout_margin="5dip"></Button>

My background is an XML drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom 2dp Shadow -->
<item>
    <shape android:shape="rectangle">
        <gradient android:startColor="#E0E0E0" 
        android:endColor="#373737"
            android:angle="315" />
        <corners android:radius="20dip" />
    </shape>
</item>
<!-- White Top color -->
<item android:top="5dip" android:left="5dip" android:right="5dip"
    android:bottom="5dip">
    <shape android:shape="rectangle">
        <gradient android:startColor="#9E9E9E" android:endColor="#C5C5C5"
            android:angle="270" />
        <corners android:radius="20dip" />
    </shape>
</item>

Basically a background with rounded corners and what looks like a bevel , and a few gradients to make it look nice!

on 3.2 HVGA the buttons are the correct size

But when i view the buttons in 3.7 FWVGA , the aspect ratio is lost and there size is same size as 3.2 but as there are more pixels to work with on this screen the images are not the correct size.

Is there anyway to keep the consistency in this case???

Answer 1

The problem

As you already mentioned, the issue is that there is more screen space available. This means you have to resize your buttons according to fill the available space, e.g. fill the available width of the display with 4 buttons, and scale their height so that the aspect ratio of the graphic stays intact.

You are using dp units here, which is absolutely ok and good practice when defining layouts. But in this case it tells the layout “this thing has a fixed size of XX dp” (you can think of dp as a fixed unit, the fixed amount is just determined by the device that displays the layout). You don’t want a fixed size. You want the buttons to stretch in a dynamic way.

A solution

To provide a solution for your above layout: You can use a LinearLayout and it’s layout_weight attribute. Here is some short (incomplete) sample code to illustrate the principle:

<LinearLayout android:orientation="horizontal"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content">

    <Button android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            />
    <Button android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            />
    <Button android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            />
    <Button android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            />

</LinearLayout>

What happens here?

First we create an outer LinearLayout that fills the entire parent width (= the entire screen width) and adjusts it’s height depending on the content. Standard stuff.

Then we add 4 buttons. The relevant piece here is layout_weight. This tells each button to “fill the available space as much as possible”. Since every single one tries to stretch out now, we have to define how much space each button gets. Thats the number given to layout_weight. Here we have the equal number one for each button. That means each button will be the same size as any other. So how does the layout determine how much space that is? It calculates the total weight of it’s children, which is 4 here and gives each children space according to the ratio child_weight/total_weight. So each button takes 1/4 of the width. (You can also assign any other number, if you give every button the weight 3, each button will get 3/12 of the width, which is still 1/4 according to math 🙂 )

One question remains: Why layout_width="0dp"? That just prevents some unneccessary internal calculations inside as far as I know. All you have to know is use 0dp for the scaling dimension when using the layout_weight attribute. You can research a bit around if you want to know more.

Samples

Here are two screenshots of this in practice:

2.7″ QVGA

3.7″ FWVGA