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.
Related
I'm developing apps for android since over a year now with success, but one thing is still a problem for me:
How to design a layout with a combination of TextViews, ImageViews and Buttons while retaining the relation between each elements on different screen sizes.
I want to build a layout like this:
It's for a listview, so many of these layouts are used. The app has a different layout for smartphones and tablets.
So the orange button on the right should always have 3 lines of text but should still have a maximum width, the image on the left should have the same height as the button on the right. The 3 lines of text in the middle should take up as many space as they can. The star image should have the same hight as the text on their right.
I've managed to build a similar test layout with a TableLayout, here are the previews from AndroidStudio:
Nexus S
Nexus 6
On the Nexus S screen size, the layout is OK but on bigger screens it's ugly. The button is too small, the image on the left is also too small.
Here is the code for my test layout:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
>
<TableRow android:orientation="horizontal"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/iv1"
android:layout_width="80dp"
android:layout_height="match_parent"
android:contentDescription="#string/dummy"
android:padding="#dimen/raster4dp"
android:scaleType="fitXY"
android:src="#drawable/avatar_1" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some nice text here"
android:layout_alignParentLeft="true"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv1"
android:src="#drawable/ic_male_user_bw"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:layout_toRightOf="#id/iv2"
android:layout_alignBottom="#id/iv2"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/iv2"
android:layout_alignParentLeft="true"
android:src="#drawable/ic_male_user_bw"
/>
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:layout_toRightOf="#id/iv3"
android:layout_alignBottom="#id/iv3"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
</RelativeLayout>
<Button
android:id="#+id/btn1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:background="#drawable/button_dropshadow_black_xml"
android:text="Line1\nLine2\nLine3"
android:textColor="#android:color/white" />
</TableRow>
</TableLayout>
So hopefully my question is not too silly, but i have some problems understanding how to fix this. Currently I'm using a width of fixed 80dp on the button and the image to the left. I think this is not realy the way it works on Android.
What sizes do i need to use here, what kind of layouts?
The sections about sreensizes etc. on the developer site is known by me (https://developer.android.com/guide/practices/screens_support.html) but it wasn't that helpful to me.
Thanks for help! :)
Each terminal has different dimensions. If you put a button that has a size of 80dp, when other terminal screen is larger, that button is going to be smaller compared to the terminal screen you were doing the tests.
You should play with WEIGHT.
| | | |
|_____________|_________________________|____________|
0.3 0.5 0.2 0.3 + 0.5 + 0.2 = 1 <-Weight.
Read this, will help.
Also there's a question similar to yours, check it too.
DP is for setting a fixed amount of pixels, if you don't want to consider the pixel density of your device's screen. This lets you that a button would be shown with the same size in a Nexus 4,5 or in a Samsung Galaxy Mini.
The same "absolute" size. This means that if your image is too big, it could fit in Nexus, but no in the other because of its smaller screen. This is due to the fact that it does not depend on the screen size, neither the pixel density.
What I hardly recommend you is the use of LinearLayouts (with their attribute weight) and RelativeLayouts as direct children (in case you need them). This could be "the same" (not exactly) than the use of "%" in CSS.
Here, you can see an example of weight attribute (The second answer gives you more tips).
Linear Layout and weight in Android
I hope this helps!!
check this .... increase parent layout height if needed:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="dummy"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"
android:orientation="vertical" >
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some nice text here"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="more nice text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/iv24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:background="#565657"
android:text="Line1\nLine2\nLine3"
android:textColor="#android:color/white" />
</LinearLayout>
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.
I'm developing an Android 2.3.3 application that will work on every android phone or tablet device and it will only support portrait.
Reading Supporting Multiple Screens I see a table with a lot of screen sizes and densities.
How many layouts do I need? One for every screen size and density?
I think I only need four: one for small, normal, large and x-large.
you basically need four. But if you you want you application to behave different according to different screen sizes AND different orientations, you should use:
/layout-port > for medium layout portrait
/layout-land > for medium layout landscape
/layout-xlarge-port > for xlarge layout portrait
/layout-xlarge-land > for xlarge layout landscape
etc.
From the link you provided:
By default, Android resizes your application layout to fit the current device screen.
In most cases, this works fine.
Therefore the general rule is to use Density Independent Pixels (dips) for size definitions in your layout xmls leaving the rest to be handled by the operating system. Doing so you just have the only layout for all range of devices.
Making separate layouts is not really common practice. Only when you have images that can't be stretched is that really the recommended way. In that case, splitting the graphics based on the size and density of the screen can solve your problem anyway.
One layout is enough for device up to large density , if you also want to implement layout for x-large screen size then you need to make another layout,
just get the images as per ldpi , mpdi and hdpi , place them the relative folders ,
create layout using appropriate layout weights give full size to backgrounds like fill parent and exact size of buttons
like
<?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="#drawable/bg"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/bar"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".55"
android:gravity="left|center"
android:orientation="vertical" >
<Button
android:id="#+id/goBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:background="#drawable/back_btn" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".25"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forget Paaword"
android:textColor="#ffffff"
android:textSize="18dp"
android:textStyle="italic" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".55"
android:gravity="right|center"
android:orientation="vertical" >
<Button
android:id="#+id/hombutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:background="#drawable/home1" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".2"
android:gravity="right|center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:gravity="right|center"
android:orientation="horizontal" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:text="User Name"
android:textColor="#ffffff" />
<EditText
android:id="#+id/usernametext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".5" android:imeOptions="actionDone">
<requestFocus />
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:gravity="right|center"
android:orientation="horizontal" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:text="Email Id"
android:textColor="#ffffff" />
<EditText
android:id="#+id/emailtextfp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:inputType="textEmailSubject" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/loginbuttonfp"
android:layout_width="75dp"
android:layout_height="28dp"
android:layout_margin="5dp"
android:background="#drawable/btn" android:text="Ok" android:textColor="#ffffff"/>
<Button
android:id="#+id/cancelbutton"
android:layout_width="75dp"
android:layout_height="28dp"
android:layout_margin="5dp"
android:background="#drawable/btn" android:text="Cancel" android:textColor="#ffffff"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I created a tool that allows you to scale/adjust your layouts for tablets and small screen devices and made a blog post about it here: http://onemanmobile.blogspot.com/2012/04/how-to-scale-your-android-layouts-to.html
Basically, defining your layouts in dp units for one size is not enough if you want your app to fit on all devices and tablets, since there's four different "density-buckets".
This tool will allow your layouts to be converted into fitting these density buckets from a default baseline.
Hope it helps.
I realize that the Eclipse graphical layout editor often (usually?) doesn't render things the same way that the physical devices or emulator do. I can usually deal with that. However, I have a situation where I can't figure out why there is such a big difference, and more importantly, I can't figure out how to get what I want for a layout on the target devices.
I am attempting to use some custom ImageButton widgets with custom graphics files as buttons. I simply want the buttons to fill the parent layouts they are in. In the designer, they look the way I think they should. But when I run it on a device, the buttons are way to small. Here is what the design looks like, using a device that is set up to emulate the Droid X that I am testing with.
http://pozzy.com/consulting/LayoutDesignInEclipse.PNG
Here is a screen capture of the screen when running on my Droid X:
http://pozzy.com/consulting/ScoreEntryDroidXScreenCapture.png
I tried to trim the code down, but it still relies on a number of button image files. Here is the layout XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
Android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/scoreEntryPlayersAndMainEntry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/scoreEntryPlayers"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:orientation="vertical"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:paddingLeft="4dp" >
</LinearLayout>
<LinearLayout
android:id="#+id/scoreEntryMainEntry"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".5"
android:maxWidth="100dp"
android:orientation="vertical"
android:paddingBottom="4dp"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:paddingTop="4dp" >
<LinearLayout android:id="#+id/scoreEntryPreviousHoleNumberNextRow"
android:orientation="horizontal"
android:background="#drawable/score_entry_background_top"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".1"
android:gravity="center|top" >
<ImageButton
android:id="#+id/previousHoleButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:layout_margin="5dp"
android:scaleType="fitCenter"
android:background="#null"
android:contentDescription="Previous Hole"
android:src="#drawable/score_entry_prev" />
<TextView
android:id="#+id/holeNumber"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#null"
android:paddingTop="20dp"
android:text="##"
android:textColor="#FFFFFF"
android:textSize="24sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/nextHoleButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:layout_margin="5dp"
android:scaleType="fitCenter"
android:background="#null"
android:contentDescription="Next Hole"
android:src="#drawable/score_entry_next" />
</LinearLayout>
<LinearLayout
android:id="#+id/scoreEntryCurrentScore"
android:background="#drawable/score_entry_background_middle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight=".8" >
<FrameLayout
android:id="#+id/scoreEntryScoreOverlays"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:visibility="invisible"
android:id="#+id/scoreEntryPlayerScoreLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/currentPlayer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:text="Player Name"
android:textColor="#aaaaaa"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/currentScore"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="99"
android:gravity="center"
android:layout_gravity="bottom"
android:textColor="#ff0000"
android:textSize="100sp"
android:textStyle="bold|italic" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/scoreEntryScoreDownUpRow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/score_entry_background_bottom"
android:gravity="bottom"
android:layout_weight=".1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/scoreDownButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/score_entry_minus" />
<ImageButton
android:id="#+id/scoreUpButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/score_entry_plus" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Any help in figuring out how to get the buttons filling their respective areas would be greatly appreciated!
I've had exactly the same problem and I have had to workaround it by manipulating it everytime to fit both places which is sad. The eclipse graphics visualizer really sucks sometimes. I' ve
tried http://www.droiddraw.org/ since many people say that is pretty good - but somehow there seems to be a gap between what is seen on the visualizer and then on the actual device. I guess the rule of thumb is to follow this http://developer.android.com/training/multiscreen/screensizes.html to the letter and keep trying . I think Droid Draw works for me better than eclipse, I suppose following the dev link above and using say Droid Draw should ideally work for you.