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>
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
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.
Related
The UI in our app does not scale properly in different phones. The screenshots below are from Samsung 2 and Xperia Z1 Compact. Both phones are using medium sized screens so thereby I thought the black navigation-bar introduced since API 14 caused the scaling problem. I added the following code to my project but the outcome was still the same:
mMainView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION);//sets the layout as if the navigation bar is hidden (even if it’s not)
mMainView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE);//help your app maintain a stable layout.
= Xperia Z1 Compact
=
Samsung 2
As you can see in screen captures the height is not what it is supposed to be in Xperia (We want the UI to scale as it does in Samsung 2). The text is smaller in Xperia, our logo is smaller (mostly on the height) and so on. It seems like the Xperia UI has a wider width or? What may cause this if it is not the navigation bar? I will post the XML-file aswell even if I am 99% sure there is nothing wrong with it:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingBottom="4sp"
android:paddingLeft="35dp"
android:paddingRight="35dp"
android:weightSum="1.0" >
<ViewSwitcher
android:id="#+id/landing_search_switcher_banner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inAnimation="#anim/fadein"
android:outAnimation="#anim/fadeout" >
<ImageView
android:id="#+id/landing_search_image_banner_license"
android:layout_width="wrap_content"
android:layout_height="230dp"
android:layout_gravity="center"
android:layout_marginTop="1sp"
android:contentDescription="#string/ContentDescriptionLogo"
android:gravity="center"
android:scaleType="fitCenter"
android:src="#drawable/app" />
<ImageView android:id="#+id/landing_search_image_banner"
android:layout_width="wrap_content"
android:layout_height="230dp"
android:layout_marginTop="1sp"
android:contentDescription="#string/ContentDescriptionLogo"
android:gravity="center"
android:layout_gravity="center"
android:scaleType="centerInside"
android:src="#drawable/app"/>
</ViewSwitcher>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:orientation="horizontal"
android:weightSum="1.0" >
<EditText
android:id="#+id/landing_search_field"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight="0.75"
android:background="#android:drawable/edit_text"
android:digits="/0123456789.abcdefghijklmnopqrstuvwxyz"
android:gravity="left|center"
android:hint="xlarge res"
android:inputType="number"
android:maxLines="1"
android:textSize="35sp"/>
<ImageButton
android:id="#+id/landing_search_button"
android:layout_width="0dip"
android:layout_height="80dp"
android:layout_gravity="center"
android:layout_weight="0.25"
android:background="#android:drawable/btn_default"
android:contentDescription="#string/ContentDescriptionSearchButton"
android:scaleType="center"
android:src="#drawable/ic_button_search" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="2sp"
android:layout_marginRight="4sp"
android:layout_marginTop="6sp"
android:background="#ffffff"
android:orientation="vertical" >
<LinearLayout style="#style/BarTitleStyle"
android:layout_height="58dp"
android:layout_width="fill_parent"
>
<TextView
android:id="#+id/landing_search_list_topbar_label"
style="#style/TitleTextStyle"
android:text="#string/LabelInformation"
android:textSize="32sp"
>
</TextView>
<include layout="#layout/menu_button"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="1.0" >
<ListView
android:id="#+id/landing_search_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:background="#color/white"
android:cacheColorHint="#color/white"
android:gravity="left"
android:isScrollContainer="false"
android:visibility="gone" />
<LinearLayout
android:id="#+id/landing_search_search_information_section"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="0.9"
android:orientation="vertical"
android:paddingBottom="9sp"
android:visibility="visible" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="vertical"
android:weightSum="1.0" >
<TextView
android:id="#+id/landing_search_current_book_label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="-9.5dp"
android:gravity="center|bottom"
android:text="#string/LabelCurrentBook"
android:textColor="#515151"
android:textSize="39sp"
android:textStyle="bold" />
<Button
android:id="#+id/landing_search_button_book"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center|top"
android:ellipsize="end"
android:maxLines="1"
android:minWidth="170sp"
android:textSize="39.5sp"
android:scrollHorizontally="true"
android:singleLine="true"
android:background="#null"
android:text="#string/ButtonLabelChooseBook"
android:textColor="#1453DB" />
<Button
android:id="#+id/landing_search_button_school"
android:layout_width="wrap_content"
android:layout_height="92sp"
android:layout_gravity="center|top"
android:ellipsize="end"
android:maxLines="1"
android:minWidth="170sp"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="#string/ButtonLabelChooseSchool"
android:textColor="#1453DB"
android:visibility="gone" />
</LinearLayout>
<!--
<Button
android:id="#+id/landing_search_choose_book_button"
android:layout_width="wrap_content"
android:layout_height="18.5dp"
android:layout_gravity="center|top"
android:autoLink="web"
android:background="#null"
android:gravity="center|top"
android:text="#string/ButtonLabelChooseBook"
android:textColor="#5c5cff"
android:textSize="14sp" >
</Button>
-->
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginRight="3sp"
android:layout_marginTop="-5.5sp"
android:gravity="center"
android:text="#string/LabelNoSearchResult"
android:textColor="#7f7f7f"
android:textSize="28.5sp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6.5sp"
android:gravity="center"
android:text="#string/LabelNoSearchResult2"
android:textColor="#515151"
android:textSize="28.5sp"
android:layout_marginBottom="7.5dp" >
</TextView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:autoLink="email"
android:gravity="center"
android:text="#string/LabelContactEmail"
android:textColor="#1453DB"
android:textColorLink="#1453DB"
android:textSize="32.5sp"
android:layout_marginBottom="7.5dp" >
</TextView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/landing_search_button_buy"
android:layout_width="420dp"
android:layout_height="130dp"
android:layout_gravity="center"
android:layout_marginTop="9dp"
android:background="#drawable/button_buy"
android:contentDescription="#string/ButtonLabelSubscribe"
android:gravity="center"
android:paddingBottom="0sp"
android:textColor="#515151"
android:textSize="14.5sp"
android:textStyle="bold" >
</Button>
<Button
android:id="#+id/landing_search_premium"
android:layout_width="825sp"
android:layout_height="220sp"
android:layout_gravity="center"
android:layout_marginTop="-12dp"
android:background="#drawable/premium_logo"
android:gravity="center"
android:paddingBottom="0sp"
android:textColor="#515151"
android:textSize="14.5sp"
android:textStyle="bold" >
</Button>
</LinearLayout>
These two devices may not have exactly the same width in DP units.
Assuming you are talking about the Galaxy S2:
They both have approximately the same size screen. However, the S2 is 217ppi, which is toward the low end of the hdpi bucket, while the Xperia is 342ppi, which is toward the high end of the xhdpi bucket. It is because of where they fall within their own density buckets that they scale somewhat differently, and there's not much you can do about this.
DP and SP units only ensure that your elements are approximately the same size on all devices.
Think about older versions of Windows you may have used, where apps ignored dpi of the monitor. If you used a monitor with a higher dpi, you simply saw smaller text. This is like all monitors were in the same dpi bucket.
Android's multiple dpi buckets help support a much wider range of screen densities, but you still get the same effect as you do in Windows when comparing devices that are at different ends of their respective dpi buckets.
iOS doesn't have this problem because each "bucket" corresponds with exactly one dpi, not a range of dpi.
I'm developing my first app on android and I think my apply meets the requirements (using only dp or sp, etc...) needed to support multiple screens.
However, it seems I'm doing something wrong. Textviews gets overlapped at the bottom of the screen.
Now...did I wrote bad xml or do I need to add different layouts for each android version, to be sure to avoid this kind of problems?
First device spec (docomo ARROWS NX F-06E) 1080×1920 px, 16,777,216 colors
First device screenshot:
Second device spec (LG L-07C Optimus) 480 x 800 px, 256K colors
Second device screenshot:
Here is the xml code.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/dark_green"
android:orientation="vertical"
>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="5dp"
android:src="#drawable/sakai" />
<TextView
android:id="#+id/random_field"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="false"
android:layout_alignParentRight="false"
android:layout_alignTop="#id/image"
android:layout_toLeftOf="#+id/chronometer"
android:layout_toRightOf="#id/image"
android:background="#drawable/bubble_bl"
android:text="#string/index"
android:textSize="20.5sp" />
<Chronometer android:id="#+id/chronometer"
android:format="#string/chronometer_initial_format"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="0dip"
android:layout_weight="0.5"
android:paddingBottom="30dip"
android:paddingTop="30dip"
/>
<Button
android:layout_below="#id/image"
android:id="#+id/askquestion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/ask"
style="#style/ButtonText"
android:background="#drawable/btn_blue_states"
/>
<Button
android:layout_below="#id/askquestion"
android:id="#+id/answer1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/ask"
style="#style/ButtonText"
android:background="#drawable/btn_blue_states"/>
<Button
android:layout_below="#id/answer1"
android:id="#+id/answer2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/ask"
style="#style/ButtonText"
android:background="#drawable/btn_blue_states"/>
<Button
android:id="#+id/answer3"
android:layout_below="#id/answer2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/ask"
style="#style/ButtonText"
android:background="#drawable/btn_blue_states" />
<Button
android:id="#+id/answer4"
android:layout_below="#id/answer3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/ask"
style="#style/ButtonText"
android:background="#drawable/btn_blue_states"/>
<TextView
android:id="#+id/score_field"
android:layout_below="#id/answer4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dip"
android:gravity="center"
android:text="#string/score"
android:textSize="24.5sp"
/>
<TextView
android:id="#+id/performance_field"
android:layout_below="#id/score_field"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="24.5sp"
/>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_alignParentBottom="true"
android:weightSum="4.0" >
<TextView
android:id="#+id/difficult_textview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/difficulty"
android:textSize="24.5sp"
/>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayoutWithButtons"
android:orientation="horizontal"
android:weightSum="4.0" >
<Button
android:id="#+id/diff1"
style="#style/ButtonText"
android:layout_weight="1.0"
android:layout_height="wrap_content"
android:background="#drawable/btn_blue_states"
android:text="#string/one" />
<Button
android:id="#+id/diff2"
style="#style/ButtonText"
android:layout_weight="1.0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn_blue_states"
android:text="#string/two" />
<Button
android:id="#+id/diff3"
style="#style/ButtonText"
android:layout_weight="1.0"
android:layout_height="wrap_content"
android:background="#drawable/btn_blue_states"
android:text="#string/three" />
<Button
android:id="#+id/diff4"
style="#style/ButtonText"
android:layout_weight="1.0"
android:layout_height="wrap_content"
android:background="#drawable/btn_blue_states"
android:text="#string/four" />
</LinearLayout>
</LinearLayout>
It's a simple matter of aspect ratios:
1080x1920 is 16:9
480x800 is 5:3
So the higher resolution screen is a longer (taller) rectangle. Your layout is designed well such that part of the layout will hang to the bottom and another part to the top, but you designed it with the taller screen in mind and so things are running together on the smaller screen. You have one of two options:
Redesign the layout to fit properly on the shorter screen, in which case on the taller screen it will just stretch to show more extra space between the top and bottom sections.
Use resource qualifiers to create two different layouts for screens based on their height. This level of effort only makes sense if you are trying to achieve a more pixel-perfect look regardless of the device's screen aspect.
Ok, I have read all of the other posts regarding multiple device layouts and the android docs, yet I still managed to stuff it up!
I made the mistake of testing this application using my HTC Sensation HD. So when I decided to emulate it on the HTC Desire (medium screen res) imagine my shock that it wasn't even close to fitting.
I used DIP for EVERYTHING. So why on earth does half the screen fall off when using the emulator in the Desire medium resolution. I thought it would just scale down. if not, what am I supposed to do?
I have attached a Picture of the result. A dropbox download of a Working project (a dumbed down version) and the xml attached here. As you see, four controls have dropped off the page.
I need this App to work on large, medium and Small devices. (Sensation HD, Desire, Cha Cha). Any advise would be awesome.
PROJECT LINK
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="20dip"
android:paddingRight="20dip" >
<ImageView
android:id="#+id/clientLogo_TextView"
android:layout_width="wrap_content"
android:layout_height="120dip"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_marginBottom="15dip"
android:layout_marginTop="15dip"
android:src="#drawable/logotop"
android:adjustViewBounds="true"/>
<Button
android:id="#+id/buttonOne_Button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dip"
android:text="Button One" >
</Button>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/customshape"
android:orientation="vertical"
android:padding="7dip" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/labelOne_TextView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Label One"
android:textStyle="bold" >
</TextView>
<TextView
android:id="#+id/labelTwo_TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label Two"
android:textSize="13dip" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonTwo_Button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:singleLine="true"
android:text="Button Two"
android:textSize="16dip" >
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/sliderLabel_TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dip"
android:text="Slider"
android:textStyle="bold" >
</TextView>
<TextView
android:id="#+id/sliderStatus_TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" - Status"
android:textSize="13dip" >
</TextView>
</LinearLayout>
<SeekBar
android:id="#+id/sliderOne_SeekView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="10" >
</SeekBar>
<TextView
android:id="#+id/labelThree_TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label Three"
android:textStyle="bold" >
</TextView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="45dip"
android:layout_gravity="center_vertical|center_horizontal"
android:orientation="horizontal" >
<Spinner
android:id="#+id/spinnerOne_Spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
</Spinner>
<Spinner
android:id="#+id/spinnerTwo_Spinner"
android:layout_width="wrap_content"
android:layout_height="45dip"
android:layout_weight="1" >
</Spinner>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:orientation="horizontal"
android:weightSum="1.0" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_weight="0.5"
android:orientation="vertical"
android:weightSum="1.0" >
<TextView
android:id="#+id/labelFour_TextView"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight=".2"
android:gravity="center_vertical|center_horizontal"
android:text="Label Four"
android:textStyle="bold" >
</TextView>
<Spinner
android:id="#+id/spinnerThree_Spinner"
android:layout_width="fill_parent"
android:layout_height="45dip"
android:layout_weight=".4" >
</Spinner>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_weight="0.5"
android:orientation="vertical"
android:weightSum="1.0" >
<TextView
android:id="#+id/labelFire_TextView"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight=".2"
android:gravity="center_vertical|center_horizontal"
android:text="Label Five"
android:textStyle="bold" >
</TextView>
<Spinner
android:id="#+id/spinnerFour_Spinner"
android:layout_width="fill_parent"
android:layout_height="45dip"
android:layout_weight=".4" >
</Spinner>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/ButtonsLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip" >
<Button
android:id="#+id/buttonThree_Button"
android:layout_width="fill_parent"
android:layout_height="45dip"
android:layout_margin="0dip"
android:layout_weight="1"
android:text="Button Three" >
</Button>
<Button
android:id="#+id/buttonFour_Button"
android:layout_width="fill_parent"
android:layout_height="45dip"
android:layout_weight="1"
android:text="Button Four" >
</Button>
</LinearLayout>
Device-independent pixels (dip) are intended to make your pixel measurements uniform across different screen densities. Screen size and density are two different things. You still need to code your layouts to span physical screen sizes.
For example, nearly all 10-inch tablets right now have a medium-density screen, despite the fact they have an "extra-large" screen size. That's because even though the screen is physically large, it doesn't pack in the pixels as densely as on some high-end phones, such as the Galaxy Nexus.
In order for your layouts to adapt to different screen sizes, you need to account for this in the structure of your layout. This means several things:
Avoid hard-coded dimensions whenever possible. If you can, use match_parent to allow a UI widget to encompass available space.
Try not to stack so
many controls so they go off the screen of the smallest device you'll
be using, or put the controls into a ScrollView.
Center controls in
available screen space. You can group a set of controls with a
layout container such as LinearLayout, then center that within
another layout manager with android:layout_gravity. You can also
use android:gravity on some widgets (notably TextView and ImageView)
to center their content within the bounds of the view itself.
Android will allow you to create custom layouts for each combination of screen size and density, if you need to custom-tailor a layout for a particular class of device, such as a 7-inch tablet or a 3-inch phone. See the Android SDK docs.
To span a very wide range of screens, you can take advantage of the
Fragments API to stack related layouts on a tablet-sized screen, but
show them individually on a phone screen.
There's other techniques, but the key thing to note is that using dip doesn't automatically scale your layout to encompass all screen sizes. You have to address the matrix of screen size and density.
I am designing an app in xml android. I have been using lots of drawable resources. The thing is, when i test the design in an emulator of size 800x800 it runs fine. but as i decrease the size of the emulator to 500x500 the design starts breaking out. Its not completely in the same position. I have used a lot of layout_margin attributes. please tell if there is any other way by which my design runs fine irrespective of size of the emulator!?
a snip of my code is:
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/containers"
android:src="#drawable/containers"
android:paddingTop="42px"
android:paddingLeft="3px">
</ImageView>
<TextView android:textColor="#000000"
android:paddingLeft="20px"
android:paddingTop="58px"
android:layout_width="wrap_content"
android:id="#+id/current_loc"
android:text="#string/current_loc"
android:layout_height="wrap_content">
</TextView>
<TextView android:textColor="#000000"
android:paddingLeft="20px"
android:paddingTop="109px"
android:layout_width="wrap_content"
android:id="#+id/current_loc"
android:text="#string/at"
android:layout_height="wrap_content">
</TextView>
<Button android:text="#string/time"
android:textColor="#000000"
android:id="#+id/pickTime"
android:layout_height="50px"
android:layout_width="120px"
android:layout_marginTop="100px"
android:layout_marginLeft="40px">
</Button>
<Button android:text="#string/date"
android:textColor="#000000"
android:id="#+id/pickDate"
android:layout_height="50px"
android:layout_marginTop="100px"
android:layout_marginLeft="160px"
android:layout_width="100px">
</Button>
<TextView android:textColor="#000000"
android:layout_marginLeft="260px"
android:id="#+id/to"
android:layout_marginTop="110px"
android:layout_width="wrap_content"
android:text="#string/to"
android:layout_height="wrap_content">
</TextView>
<EditText android:textColor="#000000"
android:id="#+id/editText2"
android:layout_marginTop="97px"
android:layout_marginLeft="280px"
android:layout_height="60px"
android:layout_width="190px"
android:hint="#string/dest"
android:textSize="20px"
android:singleLine="True">
</EditText>
<TextView android:textColor="#000000"
android:paddingLeft="20px"
android:id="#+id/thereare"
android:paddingTop="180px"
android:layout_width="wrap_content"
android:text="#string/ihave"
android:layout_height="wrap_content">
</TextView>
<EditText android:textColor="#000000"
android:id="#+id/num1"
android:layout_marginTop="169px"
android:layout_height="55px"
android:layout_width="50px"
android:layout_marginLeft="85px"
android:hint="2"></EditText>
<TextView android:textColor="#000000"
android:paddingLeft="140px"
android:id="#+id/female"
android:paddingTop="180px"
android:layout_width="wrap_content"
android:text="#string/female"
android:layout_height="wrap_content">
</TextView>
<TextView android:textColor="#000000"
android:paddingLeft="210px"
android:id="#+id/and"
android:paddingTop="180px"
android:layout_width="wrap_content"
android:text="#string/and"
android:layout_height="wrap_content">
</TextView>
To make xml design works properly on any screen device, wrap your widget around RelativeLayout and change you measurement unit from px to dp. With dp unit you will get relative measurement that change depends on the screen resolution.
For more info, refer to this link http://developer.android.com/guide/practices/screens_support.html
You should try to get rid of specifying sizes in pixels. Instead you can use dip and layout_weights
You can specify different layout .xml files for different screen resolutions, to avoid your problem. Read carefully the guidelines that Android Developers site gives here
try using this code now may be it would be helpful for u
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#8B8989" android:orientation="vertical">
write down your XML in betweenthis code
</LinearLayout>
I started writing a super-simple text adventure game a few months ago, and I am just now getting back to it. But after looking at the layout, I now think it's really ugly.
I'm really new to this whole XML layout format, and I was wondering if someone could take a look at this for me and let me know if there's a better, more attractive way of writing this layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TableLayout android:stretchColumns="*"
android:layout_height="wrap_content"
android:id="#+id/tableLayout1"
android:layout_width="fill_parent">
<TableRow
android:layout_height="wrap_content"
android:id="#+id/tableRow1"
android:layout_weight="1"
android:layout_width="fill_parent"
android:gravity="center">
<TextView android:text=""
android:id="#+id/introText"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip">
</TextView>
</TableRow>
<TableRow
android:layout_height="wrap_content"
android:id="#+id/tableRow1"
android:layout_weight="1"
android:layout_width="fill_parent"
android:gravity="center">
<TextView android:text="navigationText"
android:id="#+id/navigationText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dip"/>
<TextView android:text="actionText"
android:id="#+id/actionText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dip"/>
<TextView android:text="encounterText"
android:id="#+id/encounterText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dip"
android:layout_marginBottom="1dip"/>
</TableRow>
</TableLayout>
<TableLayout android:stretchColumns="*"
android:layout_height="wrap_content"
android:id="#+id/tableLayout1"
android:layout_width="fill_parent">
<TableRow
android:layout_height="wrap_content"
android:id="#+id/tableRow1a"
android:layout_weight="1"
android:layout_width="fill_parent"
android:gravity="left">
<TextView android:text="characterInfo"
android:id="#+id/charText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dip">
</TextView>
<TextView android:text="" android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<Button android:text="North"
android:id="#+id/btnNorth"
android:layout_height="wrap_content"
android:layout_width="fill_parent" android:layout_margin="2dip">
</Button>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tableRow2"
android:gravity="left">
<TextView android:text="statsText"
android:id="#+id/statsText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="5"
android:layout_margin="2dip">
</TextView>
<Button android:text="West"
android:id="#+id/btnWest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="32dip" android:layout_marginRight="2dip"
android:layout_marginTop="2dip" android:layout_marginBottom="2dip">
</Button>
<Button
android:text="i"
android:id="#+id/btnInventory"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginLeft="10dip"
android:layout_marginRight="10dip" android:layout_marginTop="2dip"
android:layout_marginBottom="2dip">
</Button>
<Button
android:text="East"
android:id="#+id/btnEast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dip" android:layout_marginRight="32dip"
android:layout_marginTop="2dip" android:layout_marginBottom="2dip">
</Button>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tableRow3"
android:gravity="left">
<TextView android:text="itemsText"
android:id="#+id/itemsText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dip">
</TextView>
<TextView android:text="" android:id="#+id/textView2"
android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
<Button android:text="South"
android:id="#+id/btnSouth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dip">
</Button>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tableRow4"
android:gravity="center">
<TextView android:text="" android:id="#+id/textView3"
android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
<Button android:text="Attack" android:id="#+id/btnFight"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:layout_marginLeft="15dip" android:layout_marginRight="10dip"
android:layout_marginTop="2dip"></Button>
<Button android:text="Flee" android:id="#+id/btnRun"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="10dip" android:layout_marginRight="10dip"
android:layout_marginTop="2dip"></Button>
<Button android:text="Search" android:id="#+id/btnSearch"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="10dip" android:layout_marginRight="15dip"
android:layout_marginTop="2dip"></Button>
</TableRow>
</TableLayout>
</LinearLayout>
If you're just looking to make your layout more manageable, there are a number of simple solutions I can think of. They mostly require zero to little design change.
You can add XML comments to separate logical sections, as ugly as they may be
You could divide your layout into separate included layouts
You can use fragments (using the Fragment Compatibility Package available through the SDK updater if necessary) to fragment your Activity into separate UI components which would have their own layout files. This is the only solution that would require moving your java code around, but I highly recommend it; it makes UI components highly reusable.
Assuming you're looking to make the code look better, the latest version of the ADT Plugin for Eclipse has an XML layout code formatter that reformats your code to the generally accepted Android style. I find the code it produces looks pretty nice (at least as nice as XML can look).
So I'm guessing you mean make the code look better, right? You've asked a general question so the best I can do is give you a general answer. What you should probably do is combine some of these layout elements together into what are called CompoundControls. This will allow you to factor out a bunch of the code in to smaller xml layout files. You'll be basically just creating your own composite widgets that you can then place in your main layout using less code. Plus, you can reuse the widgets in multiple places.
If what you are writing is a game, you should really consider using a Canvas instead of trying to design a complex layout from Android components. I suggest this page as a way to get started:
http://developer.android.com/guide/topics/graphics/2d-graphics.html
Naturally, since your project is text-based, you'd be primarily interested in the primitives and functions that draw text, like drawText() in the Canvas class:
http://developer.android.com/reference/android/graphics/Canvas.html