why is the layout different in different scrreen

Question

I would like to ask, how can I fix the layout on different screens?

When I run the application, the layout as shown in the XML is different from the layout that my devices is shown. nonetheless, the layout on a galaxy Ace 2 and the layout on a samsung note , is also different.

May I know why is this so, and how can I fixed it?

I wanted my layout to look like this

However, my layout always look like this

I'm currently using table layout and linear layout. I've tried other layout too, but none matches my needs.

Can someone help me?

green color represent textview red color represent edittext

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
     android:orientation="vertical"
    android:layout_height="fill_parent"
    tools:context=".MainActivity" 
    android:background="@drawable/background">

   <TableLayout
        android:id="@+id/tableLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:stretchColumns="1" >

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/datetxtview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Date:"
                android:textColor="#99FFFF"
                android:textSize="18sp"
                android:textStyle="bold" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <EditText
                android:id="@+id/date"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:clickable="false"
                android:cursorVisible="false"
                android:focusable="false"
                android:focusableInTouchMode="false"
                android:hint="DD/MM/YYYY"
                android:inputType="date"
                android:textColor="#FFFFFF"
                android:textColorHint="#0099FF"
                android:textSize="12sp" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/fuelpricetxtview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Fuel Price ($):"
                android:textColor="#99FFFF"
                android:textSize="18sp"
                android:textStyle="bold" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow4"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <EditText
                android:id="@+id/fuelprice"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:hint="Enter the price"
                android:textColor="#FFFFFF"
                android:textColorHint="#0099FF"
                android:textSize="15sp" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow5"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/fuelpumptxtview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Fuel Pump (litre):"
                android:textColor="#99FFFF"
                android:textSize="18sp"
                android:textStyle="bold" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow6"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <EditText
                android:id="@+id/fuelpump"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:hint="Enter the number of litres pump"
                android:textColorHint="#0099FF"
                android:textColor="#FFFFFF"
                android:textSize="15sp" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow7"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/totalcosttxtview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Total Cost ($):"
                android:textColor="#99FFFF"
                android:textSize="18sp"
                android:textStyle="bold" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow8"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/tcost"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textColor="#FFFFFF"
                android:textSize="15sp" />
        </TableRow>




        <TableRow
            android:id="@+id/tableRow9"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/odometertxtview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Current Odometer (mileage):"
                android:textColor="#99FFFF"
                android:textSize="18sp"
                android:textStyle="bold" 
                />
        </TableRow>




        <TableRow
            android:id="@+id/tableRow10"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <EditText
                android:id="@+id/odometer"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:ems="10"
                android:textColor="#FFFFFF"
                android:textSize="15sp" 
                 android:hint="Enter your current odometer"
                android:textColorHint="#0099FF"/>
        </TableRow>





        <TableRow
            android:id="@+id/tableRow12"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/fctxtview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Fuel Consumption:"
                android:textColor="#99FFFF"
                android:textSize="18sp"
                android:textStyle="bold" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow13"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/fcon"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textColor="#FFFFFF"
                android:textSize="15sp" />
        </TableRow>


    </TableLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:weightSum="90">
              <Button
                android:id="@+id/saveBTN"
                style="@style/ButtonInside"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:paddingTop="100dp"
                android:text="Save" 
                android:layout_weight="45"/>
  <Button
      android:id="@+id/cancelBTN"
      style="@style/ButtonInside"
     android:layout_width="0dp"
                  android:layout_weight="45"
      android:layout_height="wrap_content"
      android:paddingTop="100dp"
      android:text="Cancel" />

    </LinearLayout>
</RelativeLayout>

Answer 1

As a user, you've probably noticed that the screen and specs of your devices are different from one another (a lot) :

Galaxy note : 800 x 1280 (1.6 aspect ratio) - 5.3 inch, 285 ppi

galaxy Ace 2 : 480 x 800 (1.6666... aspect ratio) - 3.8 inch , 246 ppi

and that's not the only 2 different android devices out there. there are thousands...

you need to think how to handle them all using elegant solutions.

if you insist that both devices would make the components stretch in size, set the rows to have equal weights . i think you can still use TableLayout, since it extends from LinearLayout, but if you can't, you'll need to have more job.

However, if you do that, smaller devices would have tiny components and make them all squeeze into their small screen, while larger devices (even tablets) would have huge UI components.

I suggest you watch some Google IO lectures regarding UI design and how to handle different screens. there are also many links about it, such as:

• http://developer.android.com/design/style/metrics-grids.html
• http://developer.android.com/training/multiscreen/index.html
• http://android-developers.blogspot.co.il/2011/07/new-tools-for-managing-screen-sizes.html
• http://developer.android.com/design/style/devices-displays.html
• http://developer.android.com/design/videos/index.html

Answer 2

Designing for Android isn't like designing for iOS devices - there are thousands of different screen configurations available, whereas with iOS, there are under ten.

You can consider it as being similar to designing a website, with responsiveness in mind; the designer does not know how the screen will look for the client, so they must consider size buckets, and craft a layout which can re-flow according to the device it's displayed on.

You can specify qualifiers on your resource directories which work like media queries for websites (e.g. layout-sw600dp which will only be used when the device it's being run on has a shortest width of 600 density independent pixels).

See Android Developer - designing for multiple screens.