App sizing on different screens.

Awkward Badger

I am making a simple android app and I have it all laid out and working on a 4.7" screen. But when I run it on any other size screen it doesn't resize, just either cuts off some of the display on smaller screens or sits in the centre of large screens.

To get it optimised for other screens do I have to make a different layout file for each of the screens with different sized buttons and stuff ? Or have I done something wrong that its not resizing automatically ?

The Corinthian

Layout code please?

Awkward Badger

The Corinthian wrote: »

Layout code please?

I found something about creating different layout files for small, normal, large screens. With each one being used automatically depending on the screen size. So I did that, but is seems small is around 2.7 and large 5.1. Which leaves quite a bit for normal. Is it just a matter of getting the sizing right so it fits all considered normal ? Or should it stretch and shrink a bit to fill the screen ?

Bear in mind with the code, I don't have much of a clue what I'm doing so it may be a bit all over the place. Positioning and aligning is whatever it was set at when I dragged it over there. I did change the sizes, colours and try to center it up.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#190707"
    android:columnCount="1"
    android:gravity="center"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="295dip"
        android:layout_height="65dip"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_column="0"
        android:layout_gravity="center"
        android:layout_marginTop="10dip"
        android:layout_row="0"
        android:background="#00BFFF"
        android:textColor="#190707"
        android:textSize="50dip" 
    	android:gravity="center" 
    	android:layout_marginBottom="-20dip" />

    <Button
        android:id="@+id/button5"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_alignLeft="@+id/button2"
        android:layout_alignTop="@+id/button4"
        android:text="5" 
        android:textColor="#00BFFF"
        android:onClick="five"/>

    <Button
        android:id="@+id/button6"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_alignLeft="@+id/button3"
        android:layout_alignTop="@+id/button5"
        android:onClick="six"
        android:textColor="#00BFFF"
        android:text="6" />

    <Button
        android:id="@+id/button8"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_alignLeft="@+id/button5"
        android:layout_alignTop="@+id/button7"
        android:onClick="two"
        android:textColor="#00BFFF"
        android:text="2" />

    <Button
        android:id="@+id/button9"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_alignLeft="@+id/button6"
        android:layout_alignTop="@+id/button8"
        android:onClick="three"
        android:textColor="#00BFFF"
        android:text="3" />

    <Button
        android:id="@+id/button11"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_alignLeft="@+id/button8"
        android:layout_alignTop="@+id/button10"
        android:onClick="clear"
        android:textColor="#00BFFF"
        android:text="C" />

    <Button
        android:id="@+id/button12"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_alignLeft="@+id/button9"
        android:layout_alignTop="@+id/button11"
        android:onClick="dec"
        android:textColor="#00BFFF"
        android:text="." />

    <Button
        android:id="@+id/button14"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_above="@+id/button7"
        android:layout_alignLeft="@+id/button13"
        android:onClick="mul"
        android:textColor="#00BFFF"
        android:text="*" />

    <Button
        android:id="@+id/button15"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_alignBaseline="@+id/button9"
        android:layout_alignBottom="@+id/button9"
        android:layout_alignRight="@+id/button14"
        android:onClick="minus"
        android:textColor="#00BFFF"
        android:text="-" />

    <Button
        android:id="@+id/button16"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_alignRight="@+id/button15"
        android:layout_alignTop="@+id/button12"
        android:onClick="plus"
        android:textColor="#00BFFF"
        android:text="+" />

    <Button
        android:id="@+id/button10"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_below="@+id/button7"
        android:layout_toLeftOf="@+id/button11"
        android:onClick="zero"
        android:textColor="#00BFFF"
        android:text="0" />

    <Button
        android:id="@+id/button7"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_below="@+id/button5"
        android:layout_toLeftOf="@+id/button8"
        android:onClick="one"
        android:textColor="#00BFFF"
        android:text="1" />

    <Button
        android:id="@+id/button4"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_below="@+id/button1"
        android:layout_toLeftOf="@+id/button5"
        android:onClick="four"
        android:textColor="#00BFFF"
        android:text="4" />

    <Button
        android:id="@+id/button13"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_alignBaseline="@+id/button3"
        android:layout_alignBottom="@+id/button3"
        android:layout_alignRight="@+id/textView1"
        android:onClick="div"
        android:textColor="#00BFFF"
        android:text="/" />

    <Button
        android:id="@+id/button3"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_above="@+id/button6"
        android:layout_toLeftOf="@+id/button14"
        android:onClick="nine"
        android:textColor="#00BFFF"
        android:text="9" />

    <Button
        android:id="@+id/button2"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_above="@+id/button5"
        android:layout_toLeftOf="@+id/button6"
        android:onClick="eight"
        android:textColor="#00BFFF"
        android:text="8" />

    <Button
        android:id="@+id/button1"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="74dip"
        android:layout_height="70dip"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="37dip"
        android:layout_toLeftOf="@+id/button5"
        android:onClick="seven"
        android:textColor="#00BFFF"
        android:text="7" />

    <Button
        android:id="@+id/button17"
        android:layout_width="295dip"
        android:layout_height="70dip"
        android:layout_alignLeft="@+id/button10"
        android:layout_alignRight="@+id/button16"
        android:layout_alignTop="@+id/button10"
        android:layout_marginTop="70dip"
        android:onClick="equal"
        android:text="="
        android:textColor="#00BFFF" />

</RelativeLayout>

The Corinthian

Looking at your layout, to me it seems you're essentially setting an absolute layout in a relative one; that is, your buttons, for example, all have fixed dimentions, which means they're not very 'stretchy'.

I would instead use a RelativeLayout, but within that LinearLayouts denoting rows (android:orientation="vertical") and within each of those embed further LinearLayouts, for the columns in each row, to contain each button (with width and height that match_parent) - then use weighting to impose a uniform and 'stretchy' effect.

This Stackflow link gives an example of what you are roughly looking to do.

Awkward Badger

The Corinthian wrote: »

Looking at your layout, to me it seems you're essentially setting an absolute layout in a relative one; that is, your buttons, for example, all have fixed dimentions, which means they're not very 'stretchy'.

I would instead use a RelativeLayout, but within that LinearLayouts denoting rows (android:orientation="vertical") and within each of those embed further LinearLayouts, for the columns in each row, to contain each button (with width and height that match_parent) - then use weighting to impose a uniform and 'stretchy' effect.

This Stackflow link gives an example of what you are roughly looking to do.

Excellent. For some reason I thought the dp sizes would be dependant on the screen rather than the same size regardless of the screen. And I used it because I was losing my mind trying to place and size the buttons in the graphical layout.

I'll start looking into the linear layouts and weighting. Thanks for the help.

The Corinthian

Awkward Badger wrote: »

For some reason I thought the dp sizes would be dependant on the screen rather than the same size regardless of the screen.

They are dependent on the screen resolution (rather than size), but they're still fixed sizes and thus have limits in how they can be used.

Awkward Badger

The Corinthian wrote: »

They are dependent on the screen resolution (rather than size), but they're still fixed sizes and thus have limits in how they can be used.

Ah I see. Well I did as you suggested and used linear layouts to make columns and rows for the buttons, set the weight etc and after weeding out the unnecessary bits and fixing a few problems it all worked out brilliantly.

Thanks again for the help.