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>
Related
I have an app which is supposed to work on different layouts of phone and tablets.
On my phone it uses a vertical layout and uses all the screen while on my tablet it stays tiny instead of using the whole screen.
I used a relative layout but referring to fill_parent for widths thinking that this was the right way to use all the parent's space (the whole screen).
Here is my code:
<?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"
android:background="#bbbbbb" >
<!-- Parte1 -->
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Distanza Km m Gare"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1"
android:onClick="OnClickButton1"
android:text="#string/calcola" />
<EditText
android:id="#+id/editText1_1"
android:layout_width="#dimen/single_textEdit"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="#fff123"
android:inputType="numberDecimal"
android:singleLine="true"
android:textSize="40sp"
android:gravity="center"
android:imeOptions="actionDone"
android:layout_toRightOf="#+id/button1"
android:nextFocusDown="#+id/editText1_2"
android:layout_below="#+id/textView1"/>
<EditText
android:id="#+id/editText1_2"
android:layout_width="#dimen/double_textEdit"
android:layout_height="50dp"
android:layout_below="#+id/textView1"
android:layout_marginLeft="10dp"
android:background="#fff123"
android:layout_toRightOf="#+id/editText1_1"
android:gravity="center"
android:inputType="numberDecimal"
android:nextFocusDown="#+id/editText2_1"
android:singleLine="true"
android:textSize="40sp" />
<Spinner
android:id="#+id/gare_spinner"
android:layout_width="fill_parent"
android:layout_below="#+id/textView1"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="#layout/border"
android:gravity="center_vertical|center_horizontal"
android:dropDownSelector="#drawable/ic_launcher"
android:layout_toRightOf="#+id/editText1_2" />
....
Make a new layout folder. Your normal folder is just called layout, but make a second one called layout-sw600dp. This is for screen width of 600 pixels, so basically for tablets. You can make the exact same xml layouts and just give them different dimensions in here.
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.
So here is my XML. I am trying to fill the whole screen and when I view it in Eclipse, it fills the whole screen. However, when I open it on my phone, everything is smaller and there are views overlaying. I don't know what's going on.
<?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" >
<TextView
android:id="#+id/front"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="Front"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/frontInput"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_below="#+id/front"
android:ems="10" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/frontInput"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="Back"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/backInput"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/back"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:ems="10"
android:inputType="textMultiLine" />
<TextView
android:id="#+id/background"
android:layout_width="wrap_content"
android:layout_marginLeft="5dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/backInput"
android:layout_marginTop="44dp"
android:text="Background"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Spinner
android:id="#+id/colors_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/backInput"
android:layout_marginLeft="30dp"
android:layout_marginTop="22dp"
android:layout_toRightOf="#+id/background"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/colors_spinner" >
<Button
android:id="#+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
</RelativeLayout>
this is what it looks in Eclipse.
But I get this:
Another thing is that when I open the keyboard my view does not rezise so you can see everything but smaller so you can see what you are typing etc... I have added the android:windowSoftInputMode="adjustResize" for the specific activity but nothing is happening... Any ideas? Thanks guys...
If you use adjustResize it will resize everything to fit as best it can. The other option is adjustPan, which will scroll the window so that the focused EditText will be in the view and the caret visibile. Other than that there's no real way to control things.
In your case you have some exact heights in there, so it won't work well with a resize, since you can't shrink an exact height.
Also, never trust how things look in Eclipse. Its an attempt to lay things out that shares no code with how Android really does things, it should be viewed as an estimate. Real layouts may end up looking significantly different, especially for complex layouts.
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.
I used relativelayout and here is what I've got. I can't get the image to fill the section I want. I don't know how to fix it. I've heard something about using layout weight, is that some thing I should use?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/background">
<ImageView
android:id="#+id/imagehome"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_margin="10dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_above="#+id/tvtitle1"
android:src="#drawable/one" />
<TextView
android:id="#+id/tvtitle1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Voted Best Dentist five years running by"
android:textSize="16dp"
android:textColor="#9D4F1B"
android:layout_above="#+id/tvtitle2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="6dp"/>
<TextView
android:id="#+id/tvtitle2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="The Oakland Tribune"
android:textSize="16dp"
android:textColor="#9D4F1B"
android:layout_above="#+id/tvhome"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"/>
<TextView
android:id="#+id/tvhome"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text=" You'll be cared for by our highly trained staff of dental professionals,energized to work as a team while providing the highest quality of care for your dental health. We offer complete dentistry for the entire family at a single location. "
android:textColor="#4C2016"
android:textSize="15dp"
android:layout_centerHorizontal="true"
android:layout_above="#+id/special"
android:layout_marginBottom="25dp" />
<Button
android:id="#+id/special"
android:layout_width="120dp"
android:layout_height="40dp"
android:background="#drawable/cc"
android:text="Specials"
android:textColor="#F6E6C6"
android:textSize="17dp"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_above="#+id/tvbutton"
android:layout_marginBottom="15dp" />
<TextView
android:id="#+id/tvbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App provided by Bay Area Dental Marketing"
android:layout_centerHorizontal="true"
android:textSize="10dp"
android:layout_alignParentBottom="true" />
</RelativeLayout>
on the xml file,
and on the device
It got better but it'snot there yet!
Not sure how much flexibility you have but the best solution would be to remove the text and image from the background and add them as views instead. As you have experienced unless each piece is added as a view it is nearly impossible to guarantee it will look correct on all devices.
When working with multiple screen sizes, I have found it best practice to either (a) use RelativeLayout, or (b) set a LinearLayout inside a ScrollView.
Use RelativeLayout so you won't have to specify the pixels.
Alternativley if you are doing that for one particular phone select corresponding screen size in the XML designer in Eclipse. Yet, using RelativeLayout guarantees it will work on all the phones
Even using the suggested answers above you may still run into problem on different size screens. The best solution I can think of is to create separate image resources for the background and foreground then add an image view with the foreground image as the source.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background" >
<!-- This method makes this layout redundant, dont need this anymore
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="23dip"
android:layout_marginRight="15dip"
android:layout_marginTop="255dip"
android:orientation="vertical" >-->
<!-- put the foreground image in an imageview -->
<ImageView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/foregroundImage"/>
<TextView
android:layout_width="276dp"
android:layout_height="132dp"
android:textSize="15dp"
android:gravity="center_vertical"
android:text="some text"
android:textColor="#4C2016"/>
<Button
android:id="#+id/special"
android:layout_width="131dp"
android:layout_height="40dp"
android:background="#drawable/cc"
android:layout_marginTop="20dip"
android:layout_marginLeft="75dip"
android:textSize="17dp"
android:textStyle="bold"
android:text="Specials"
android:textColor="#F6E6C6" />
</LinearLayout>