Hi I have created an app that i want to run across multiple screens i built the whole thing at HDPi. and when I run it on a newer android phone with a bigger screen the alignment of stuff is out. I know this is because i have set margins to position things using DP.
My question is whats the best practices for using margins across multiple screen sizes and/or is there some code that I can set that can divide/multiply the DP based on screen size?
I'm wanting to get the app across as many devices as possible. but this is my first app so not entirely sure how to do this. So any help would be greatly appreciated.
heres an example of my layout
<?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="20dip"
android:background="#drawable/bg_tablecell"
android:orientation="horizontal"
android:weightSum="1"
>
<TextView
android:id="#+id/position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:paddingLeft="4dip"
android:text="#string/POS"
android:textSize="15dip"
android:textColor="#color/blue"
/>
<TextView
android:id="#+id/TeamName"
android:layout_width="90dip"
android:layout_height="wrap_content"
android:layout_marginLeft="23dip"
android:ellipsize="end"
android:gravity="left"
android:lines="1"
android:text="#string/Team"
android:textColor="#color/blue"
android:textSize="15dip"
android:textStyle="bold"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/played"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/TeamName"
android:layout_alignBottom="#+id/TeamName"
android:layout_marginLeft="35dip"
android:layout_toRightOf="#+id/TeamName"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/won"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/played"
android:layout_alignBottom="#+id/played"
android:layout_marginLeft="17dip"
android:layout_toRightOf="#+id/played"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/drawn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/won"
android:layout_alignBottom="#+id/won"
android:layout_marginLeft="16dip"
android:layout_toRightOf="#+id/won"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/lost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/drawn"
android:layout_alignBottom="#+id/drawn"
android:layout_marginLeft="16dip"
android:layout_toRightOf="#+id/drawn"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/goalsFor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/lost"
android:layout_alignBottom="#+id/lost"
android:layout_marginLeft="16dip"
android:layout_toRightOf="#+id/lost"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/goalsAgainst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/goalsFor"
android:layout_alignBottom="#+id/goalsFor"
android:layout_marginLeft="17dip"
android:layout_toRightOf="#+id/goalsFor"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/Difference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/goalsAgainst"
android:layout_alignBottom="#+id/goalsAgainst"
android:layout_marginLeft="15dip"
android:layout_toRightOf="#+id/goalsAgainst"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/points"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/Difference"
android:layout_alignBottom="#+id/Difference"
android:layout_marginLeft="18dip"
android:layout_toRightOf="#+id/Difference"
android:gravity="center"
android:text="#string/Zero"
android:textColor="#color/blue"
android:textSize="10dip"
android:layout_centerVertical="true"/>
screens hdpi
screens xhdpi
Well the whole point of using DP is so that you don't have to worry about this. Margins will be roughly the same across devices, but if you're relying on lining things up on one particular device resolution/density combination, you'll definitely be in for a surprise when you test on other devices.
That said, if you do need to specify different margins for different screen sizes, simply add an XML file in res/values -- something like dimens.xml:
<resources
xmlns:android="http://schemas.android.com/apk/res/android"
>
<dimen name="my_view_margin">10dip</dimen>
</resources>
Then add one of these XMLs for every specific device qualifier that you need to (e.g. values-large, values-sw600dp, values-xlarge, etc.) and modify the value as you see fit. When you want to use these dimensions in a layout, just use:
android:layout_margin="#dimen/my_view_margin"
And Android will pick the correct value for whatever device it happens to be running on.
Related
I've created my android application. The app is complete but it's a problem: when I install this app in other smartphone, objects,that normally are in the screen, are overlapping or not in original position.
My IDE is Android Studio 2.2
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gaugePH"
android:layout_width="180dp"
android:layout_height="180dp"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
app:gaugePointStartColor="#color/md_red_900"
app:gaugePointEndColor="#color/md_red_900"
app:gaugePointSize="5"
app:gaugeStartAngle="135"
app:gaugeStrokeCap="ROUND"
app:gaugeStrokeColor="#color/md_grey_400"
app:gaugeStrokeWidth="10dp"
app:gaugeStartValue="0"
app:gaugeEndValue="14"
app:gaugeSweepAngle="270"
android:layout_alignTop="#+id/gaugePressione"
android:layout_alignParentEnd="true"
android:layout_marginRight="10dp"/>
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gaugePressione"
android:layout_width="180dp"
android:layout_height="180dp"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
app:gaugePointStartColor="#color/md_blue_900"
app:gaugePointEndColor="#color/md_blue_900"
app:gaugePointSize="5"
app:gaugeStartAngle="135"
app:gaugeStrokeCap="ROUND"
app:gaugeStrokeColor="#color/md_grey_400"
app:gaugeStrokeWidth="10dp"
app:gaugeStartValue="0"
app:gaugeEndValue="15"
app:gaugeSweepAngle="270"
android:layout_marginTop="39dp"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="10dp"/>
<TextView
android:id="#+id/textPH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignRight="#+id/textStrPH"
android:layout_marginTop="100dp"/>
<TextView
android:id="#+id/textPressione"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignRight="#+id/textStrPressione"
android:layout_marginTop="100dp" />
<TextView
android:id="#+id/textStrPressione"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bar"
android:textSize="30dp"
android:textStyle="italic"
android:layout_below="#+id/textPressione"
android:layout_alignLeft="#+id/gaugePressione"
android:layout_marginLeft= "70dp"
android:textColor="#color/md_black_1000"/>
<TextView
android:id="#+id/textStrPH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PH"
android:textSize="30dp"
android:textStyle="italic"
android:layout_alignRight="#+id/gaugePH"
android:layout_alignBottom="#+id/textStrPressione"
android:layout_marginRight= "70dp"
android:textColor="#color/md_black_1000"/>
<Button
android:id="#+id/goMaps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mappa"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"/>
<TextView
android:id="#+id/textTemperatura"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignTop="#+id/textUmidita"
android:layout_alignRight="#+id/textStrPressione"/>
<TextView
android:id="#+id/textStrTemperatura"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="°C"
android:textSize="30dp"
android:textStyle="italic"
android:layout_marginLeft= "70dp"
android:textColor="#color/md_black_1000"
android:layout_alignRight="#+id/textPressione"
android:layout_alignTop="#+id/textTemperatura"
android:layout_marginTop="40dp"
android:layout_marginRight="10dp"/>
<TextView
android:id="#+id/textUmidita"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignRight="#+id/textPH"
android:layout_alignTop="#+id/gaugeUmidita"
android:layout_marginTop="60dp"/>
<TextView
android:id="#+id/textStrUmidita"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="%"
android:textSize="30dp"
android:textStyle="italic"
android:layout_marginLeft= "70dp"
android:textColor="#color/md_black_1000"
android:layout_marginRight="10dp"
android:layout_alignBaseline="#+id/textStrTemperatura"
android:layout_alignBottom="#+id/textStrTemperatura"
android:layout_alignEnd="#+id/textStrPH" />
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gaugeUmidita"
android:layout_width="180dp"
android:layout_height="180dp"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
app:gaugePointStartColor="#color/md_red_900"
app:gaugePointEndColor="#color/md_red_900"
app:gaugePointSize="5"
app:gaugeStartAngle="135"
app:gaugeStrokeCap="ROUND"
app:gaugeStrokeColor="#color/md_grey_400"
app:gaugeStrokeWidth="10dp"
app:gaugeStartValue="0"
app:gaugeEndValue="100"
app:gaugeSweepAngle="270"
android:layout_alignTop="#+id/gaugeTemperatura"
android:layout_alignParentEnd="true"
android:layout_marginRight="10dp" />
<pl.pawelkleczkowski.customgauge.CustomGauge
android:id="#+id/gaugeTemperatura"
android:layout_width="180dp"
android:layout_height="180dp"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
app:gaugePointStartColor="#color/md_blue_900"
app:gaugePointEndColor="#color/md_blue_900"
app:gaugePointSize="5"
app:gaugeStartAngle="135"
app:gaugeStrokeCap="ROUND"
app:gaugeStrokeColor="#color/md_grey_400"
app:gaugeStrokeWidth="10dp"
app:gaugeStartValue="-20"
app:gaugeEndValue="50"
app:gaugeSweepAngle="270"
android:layout_marginTop="13dp"
android:layout_marginLeft="10dp"
android:layout_below="#+id/gaugePressione"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/textImpianto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Impianto:"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"/>
<TextView
android:id="#+id/textCodImpianto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="30dp"
android:textStyle="bold"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="145dp"
android:layout_marginBottom="10dp"/>
</RelativeLayout>
There is not a simple answer but start reading Supporting Different Screen Sizes documentation at https://developer.android.com/training/multiscreen/screensizes.html
That is because you are using hard coded values for height and width. Those values have dp - which is density pixel. Since the screens are different, the pixels on those screens will also be different, so those values "will not work".
You should try to use match_parent (which will fill all the space they can within the parent) or wrap_content which will use only the needed space. Usually the width is match_parent and the height is wrap_content.
If have more than one element on that layout, you can also try to use weight, which basically will give a certain percentage to each one of the elements.
Imagine one element with android:weight="1" and another one with android:weight="2". Both those elements will have different "percentages" of the screen.
What are the views that are causing problems?
Are #id/goMaps, #id/textCodImpianto or #id/textImpianto among them?
Here is what Android Studio editor has to say about it (once I replaced hard-coded text with resources):
#id/goMaps can overlap #id/textCodImpianto if #string/_0, #string/mappa grow due to localized text expansion less... (Ctrl+F1)
If relative layout has text or button items aligned to left and right sides they can overlap each other due to localized text expansion unless they have mutual constraints like toEndOf/toStartOf
Substitute text size change with screen size change (the same effect in this case) and you have at least one explanation about why some of your views are overlapping or moved.
At the very least, you are lacking some constraints.
I just wrote all this and I'm being told by this little red bar that I can't post pictures, or more than two links. So if you could kindly reference this Imgur album, that'd be great. Thank you.
I'm relatively new here and even newer to android programming. I am trying to write an app that emphasizes visual appeal more than functional appeal. It's not an assignment or work related, it's just something I wanna try out.
So I've hit a roadblock. I am wrangling with the layout of some TextView boxes when in different emulators and devices. I have been reading this but it's kind of long and it doesn't seem to solve my problem and honestly, it's just over my head.
So here's my issue.
I have some TextView boxes and I used the layout attributes in XML, and in the Design window with a Nexus 4 mock device in Android studio, it looks like this (Image 1)
The code looks like this:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/anger"
android:id="#+id/angertv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="36dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/happiness"
android:id="#+id/happinesstv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_centerVertical="true"
android:layout_alignParentStart="true"
android:layout_marginStart="34dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fear"
android:id="#+id/feartv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="165dp"
android:layout_marginEnd="100dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sadness"
android:id="#+id/sadnesstv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="165dp"
android:layout_marginStart="66dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/surprise"
android:id="#+id/surprisetv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_marginTop="165dp"
android:layout_marginStart="60dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/disgust"
android:id="#+id/disgusttv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="165dp"
android:layout_marginEnd="74dp" />
I have been using the parent borders to position the 6 words on the devices screen. But when time comes to run it, it looks like this (Image 2) on a Nexus 5 emulator screen, and when on an actual HTC One m8, it looks like this (Image 3).
So I try something like this instead:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/center"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/anger"
android:id="#+id/angertv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/center"
android:layout_marginStart="70dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/happiness"
android:id="#+id/happinesstv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/center"
android:layout_marginEnd="67dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fear"
android:id="#+id/feartv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_above="#+id/center"
android:layout_toEndOf="#+id/center"
android:layout_marginBottom="67dp"
android:layout_marginStart="30dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sadness"
android:id="#+id/sadnesstv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_below="#+id/center"
android:layout_toStartOf="#+id/center"
android:layout_marginTop="68dp"
android:layout_marginEnd="12dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/surprise"
android:id="#+id/surprisetv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_above="#+id/center"
android:layout_toStartOf="#+id/center"
android:layout_marginBottom="67dp"
android:layout_marginEnd="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/disgust"
android:id="#+id/disgusttv"
android:textSize="28sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#FFFFFF"
android:layout_below="#+id/center"
android:layout_toEndOf="#+id/center"
android:layout_marginTop="68dp"
android:layout_marginStart="16dp" />
I use an extra TextView (ID'd center) which is aligned to the center of the device, which is empty and use it to align it the other Views with text in them. These are the results.
Design window Nexus 4: (Image 4)
Nexus 5 emulator: (Image 5)
HTC One m8: (Image 6)
It's better but not quite. Ideally, the words should stay in one place inside the pie slices I have made. I have been looking around but nothing seems specific, and since I'm a beginner at all this, I can't seem to extrapolate from peoples answers to other questions that are maybe similar but not quite like this situation.
If anyone could explain to me how I can solve this issue, or point me in the right direction, I would be very grateful. Thank you.
You can use #dimen different dimen files so that different screen sizes will have different font sizes.
android:textSize="#dimen/text_28"
Have the dimen values in different directories:
res/values/dimen.xml
<dimen name="text_28">28sp</dimen>
res/values-600dp/dimen.xml
<dimen name="text_28">22sp</dimen>
etc.
You'll have to play around with different font sizes and screen sizes but you should be able to find something that works.
http://developer.android.com/training/multiscreen/screensizes.html#TaskUseSizeQuali
And this page shows some popular device metrics:
https://design.google.com/devices/
My application uses buttons and image buttons constructed via XML and drawable folder.
On some devices applications UI elements (buttons and image buttons) losses its position and overlaps on each other and on some devices last button in bottom of screen disappears.
Same is happening when orientation is changed.
I want all my elements to be on same position on all devices.
How can I make this using XML.
Is there any easy and simple way to do so?
Here is my XML.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg"
android:orientation="vertical" >
<ImageButton
android:id="#+id/main_btn_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="55dp"
android:layout_marginTop="71dp"
android:background="#ffffff"
/>
<ImageButton
android:id="#+id/main_btn_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/main_btn_1"
android:layout_marginRight="56dp"
android:background="#000000"
/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/main_btn_1"
android:layout_below="#+id/main_btn_1"
android:textColor="#00aeed"
android:textStyle="normal" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView1"
android:layout_alignBottom="#+id/textView1"
android:layout_alignLeft="#+id/main_btn_2"
android:textColor="#ea1d24"
android:textStyle="normal" />
<ImageButton
android:id="#+id/main_btn_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView1"
android:layout_below="#+id/textView1"
android:layout_marginTop="42dp"
android:background="#000000"
/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/main_btn_3"
android:layout_below="#+id/main_btn_3"
android:textColor="#f7941d"
android:textStyle="normal" />
<ImageButton
android:id="#+id/main_btn_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView2"
android:layout_alignTop="#+id/main_btn_3"
android:background="#000000"
/>
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/main_btn_4"
android:layout_below="#+id/main_btn_4"
android:textColor="#f7941d"
android:textStyle="normal" />
<ImageButton
android:id="#+id/main_btn_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView4"
android:layout_centerHorizontal="true"
android:layout_marginTop="12dp"
android:background="#000000"
/>
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/main_btn_5"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:textColor="#0065b3"
android:textStyle="normal" />
</RelativeLayout>
Because there are many devices with so many different screen sizes, resolutions, etc., probably the main thing you have to avoid is using absolute positions when placing layout elements. The Android SDK has some powerful structures to avoid absolute positioning (i.e. LinearLayout, RelativeLayout), so try working with them and instead of defining positions like "12dp", use the correct combination of layout_width, layout_height (wrap_content or match_parent) and layout_weight, which can help you to place layout elements without specifying absolute positions.
I have developed app, the header bar appear as normal according to expectation. But when the same application installed on the screen with higher resolution it header bar does not appear properly.
Following the layout code for header bar
*<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/header_bg"
android:shrinkColumns="1"
android:stretchColumns="1" >
<TableRow
android:gravity="center"
android:minHeight="45dp" >
<ImageButton
android:id="#+id/btnTopLeft"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:layout_marginRight="20dp"
android:padding="15dp"
android:background="#drawable/back_bg"
android:onClick="onClickBackButton" />
<TextView
android:id="#+id/txtHeader"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:ellipsize="end"
android:gravity="center|center_vertical|center_horizontal"
android:lines="1"
android:scrollHorizontally="true"
android:shadowColor="#ffffff"
android:shadowDx="1"
android:shadowDy="1"
android:shadowRadius="1"
android:singleLine="true"
android:textSize="18sp"
android:textStyle="bold" />
<Button
android:id="#+id/btnTopRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:background="#drawable/button_bg"
android:onClick="onClickTopRightButton"
android:textColor="#ffffff"
android:visibility="invisible" />
</TableRow>
</TableLayout>*
Please tell what I can do regarding this issue ?
Thanks in Advance
Your header bar background is probably stretching because it is tied to the TableLayout.
One way of solving that would be using 9 Patch images. You can learn more about on this link.
Other way is just by placing an image with higher resolution on the res/hdpi/ folder. The problem is that it would still stretch when using a screen with different proportions, like a Square screen.
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>