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.
Related
How to edit xml file layout. All display screen is the same.
screen size 4.7", 5.0" display accuracy. But screen other than this. Display Distortion. Except screen tablet.
Help me fix it.
screen_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="jp.vertice.test.MainScreenFragment">
<!-- TODO: Update blank fragment layout -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#51c8fc">
<ImageView
android:layout_width="200dp"
android:layout_height="195dp"
android:id="#+id/imageView2"
android:src="#mipmap/ic_launcher"
android:background="#fc0c0c"
android:layout_marginLeft="18dp"
android:layout_marginStart="18dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn1"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/btn3"
android:layout_alignStart="#+id/btn3" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn2"
android:layout_below="#+id/btn1"
android:layout_alignLeft="#+id/btn1"
android:layout_alignStart="#+id/btn1" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn5"
android:layout_below="#+id/btn2"
android:layout_alignLeft="#+id/imageView2"
android:layout_alignStart="#+id/imageView2"
android:layout_marginTop="5dp" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn4"
android:layout_alignTop="#+id/btn5"
android:layout_toRightOf="#+id/btn5"
android:layout_toEndOf="#+id/btn5"
android:layout_marginLeft="9dp"
android:layout_marginStart="9dp" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn3"
android:layout_alignTop="#+id/btn4"
android:layout_toRightOf="#+id/btn4"
android:layout_toEndOf="#+id/btn4"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="205dp"
android:background="#F4F4F4"
android:layout_gravity="bottom">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="YYYY.MM.DD"
android:id="#+id/txt1"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="22dp"
android:layout_marginStart="22dp"
android:layout_marginBottom="173dp" />
<TextView
android:layout_width="230dp"
android:layout_height="50dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
android:id="#+id/text2"
android:layout_alignTop="#+id/txt1"
android:layout_alignLeft="#+id/txt1"
android:layout_alignStart="#+id/txt1"
android:layout_marginTop="25dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON"
android:id="#+id/btn6"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"
android:layout_alignTop="#+id/text2"
android:layout_toRightOf="#+id/text2"
android:layout_toEndOf="#+id/text2" />
<TextView
android:layout_width="fill_parent"
android:layout_height="20dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="FOOTER"
android:id="#+id/textView2"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="10sp"
android:textStyle="bold"
android:textAlignment="center"
android:gravity="center_vertical"
android:background="#FFFFFF" />
</RelativeLayout>
</FrameLayout>
Don't use Frame Layout here because Frame Layout used to show single view.
I see you are using fixed dp values for layout_width and layout_height.
dp means density independent pixel. It is not a size independent pixel.
The dp makes sure your layout looks the same on devices with the same size, but different pixel density. It will not look the same on bigger devices.
If you want it to scale to larger devices you will have to use match_parent and wrap_content.
Use the power of the relative layout to place items on the right side of the screen also.
You can also make separate layout files for differently sized devices. So you can customise it depending on the size.
You do this by making a new layout folder named for example layout-sw600dp/ (or any number you want) which will only be used on devices that have at least the width you specified (so 600dp in this example).
Make sure your layout file has the same name in this folder as in the normal folder.
You can find very useful information about this in the documentation:
here and here.
You can try using a GridLayout. This way, the image columns will fill the whole screen.
you can't work with dp and expect the same result on different
if you want same display for all the devices you can work with weightSum and weight here is a little example
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</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 have gone through many relative answers on stockoverflow and link's such as Supporting Different Screens or Screen Compatibility Mode
I have created the following relative layout and I am trying to make it look alike in all android screens.
My images fit perfect for 4.8 inch phones but when I try to use a 2.8 inch display or something like like that, some buttons go on top of others, and they do not shrink.
Does anyone have any suggestion how to improve that?
And preferably without increasing the size of my app.
Thanks in advance!
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:mm="http://millennialmedia.com/android/schema"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
tools:context=".MainActivity" >
<ImageButton
android:id="#+id/Switch_off"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:onClick="someMethod"
android:background="#drawable/switch_off"/>
<ImageView
android:id="#+id/warning_shot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/more"
android:onClick="someMethod" />
<ImageView
android:id="#+id/imageViewBatteryState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/Switch_off"
/>
<ImageView
android:id="#+id/sh"
android:layout_width="147dp"
android:layout_height="54dp"
android:layout_below="#+id/Switch_off"
android:layout_centerHorizontal="true"
android:background="#drawable/me"/>
<ImageView
android:id="#+id/sit"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_below="#+id/Switch_off"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/textViewBatteryInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold"
android:typeface="monospace"
android:layout_alignBottom="#+id/sit"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
I will suggest you to use LinearLayout instead of Relativelayout specially for the issue :
My images fit perfect for 4.8 inch phones but when I try to use a 2.8
inch display or something like like that, some buttons go on top of
others, and they do not shrink.
Because When you give orientation to Linearlayout then Its child will never get on top of each other for any resolution or screen size.
And If you give them Weight then Views will be in fix position for Each and Every device.
For example Put below Xml in your project and Check this out in Any resolution, It will give the same Result.
XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:mm="http://millennialmedia.com/android/schema"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 3" />
</LinearLayout>
</LinearLayout>
I want to create the following layout -
http://postimg.org/image/56e9y0hrj/
But when I use the Relative layout and write the following code, I get something like this.
http://postimg.org/image/4gm0r15k1/
Here is mt xml file -
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#5c575c"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Top Stories"
android:background="#ccc6ba"
style="#style/format"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignLeft="#+id/textView1"
android:layout_alignTop="#+id/textView1"
android:src="#drawable/one" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/imageView1"
android:src="#drawable/two" />
<TextView
android:id="#+id/textView2"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignLeft="#+id/imageView1"
android:text="A sample widget for multiple lines"
android:layout_alignRight="#id/imageView1"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView3"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView2"
android:layout_alignBottom="#+id/textView2"
android:layout_alignLeft="#+id/imageView2"
android:text="A sample widget for multiple lines"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView4"
android:layout_marginTop="10dip"
android:layout_marginBottom="2dip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/textView2"
android:text="World"
android:background="#ccc6ba"
style="#style/format"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignLeft="#+id/textView4"
android:layout_alignTop="#+id/textView4"
android:src="#drawable/three" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/imageView3"
android:src="#drawable/four" />
<TextView
android:id="#+id/textView5"
style="#style/format_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView3"
android:layout_alignLeft="#+id/imageView3"
android:layout_alignRight="#+id/imageView3"
android:background="#ccc6ba"
android:text="A sample widget for multiple lines"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView6"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView5"
android:layout_alignBottom="#+id/textView5"
android:layout_alignLeft="#+id/imageView4"
android:text="A sample widget for multiple lines"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView7"
android:layout_marginTop="10dip"
android:layout_marginBottom="2dip"
style="#style/format"
android:background="#ccc6ba"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView3"
android:layout_below="#+id/imageView3"
android:text="Cricket"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
I have gone through http://android-developers.blogspot.in/2009/02/android-layout-tricks-1.html and http://www.mkyong.com/android/android-relativelayout-example/ but could not find the solution. The images I use are of dimention 400by300 generated by http://dummyimage.com/
Please help me out !
Possible layout workaround, just from scratch, should show only my idea and is not testet: Do two LinearLayouts which specify layout_weight="1" inside one parent LinearLayout. This segments both LinearLayouts inside to the same size. Inside these two LinearLayouts, set the imageView and textView. But also, here You have to do different layout.xml for multiple screen usage.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scaleType="center"
android:src="#drawable/one"
/>
<TextView
android:id="#+id/textView2"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A sample widget for multiple lines"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scaleType="center"
android:src="#drawable/two"
/>
<TextView
android:id="#+id/textView3"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A sample widget for multiple lines""/>
</LinearLayout>
</LinearLayout>
And then, You have define some new layout folders inside res-folder in your project. You need folders for different sizes. Inside these folder you have to define a layout file where the image views got different heights to match to the related screen size. But this is beyond the frame, so You have to learn a little bit about using multiple screen sizes:
http://developer.android.com/guide/practices/screens_support.html
using Fragments is even possible:
http://developer.android.com/guide/components/fragments.html
http://www.vogella.com/articles/AndroidFragments/article.html
EDIT
This behaviour of your textvies is because of the different screen sizes. That´s what I had talking about, to get all looking good, You have to do more than only one layout. Here are some examples how one layout looks on different screens:
HTC Desire S 3.7 inches
the imageViews and TextViews fill the whole width, so the textViews are completely as width as the imageViews. By default, the textView wraps automatically if the text is too long, but this could be device dependant. Usally define maxLines, that will cause wrap text inside the textView. But if the text is shorter than the width, it doesn´t wrap.
Device with 5.1 inches
here the text is shorter than the width, so it doesn´t wrap. You could fix this by set fixed sizes to textView.
But this is all just scratches the subject, I can´t complain the whole thing in here. You have to learn how to handle different layouts. You have to set fixed sizes to different layouts, different resources and so on.
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.