Reputation: 149
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>
Upvotes: 0
Views: 81
Reputation: 116080
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:
Upvotes: 1
Reputation: 15334
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.
Upvotes: 0