I'm very disappointed. I just finished my project based on 360dp for "normal screens", but when I tried to run in Motorola Atrix I had a surprise. Motorola Atrix is 360dp instead 320dp, because his width is 540px. Now I'm breaking my head to find out that problem to be resolved. How can I create a layout for 360dp?
I tried all of these:
res/values-sw360dp
res/layout-sw360dp
main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#DFEFF1">
<Button
android:background="#AAAA11"
android:id="#+id/button1"
android:layout_width="#dimen/default_width"
android:layout_height="#dimen/default_height"
android:text="SOME TEXT 1"
/>
<Button
android:background="#FFAA11"
android:id="#+id/button2"
android:layout_width="#dimen/default_width"
android:layout_height="#dimen/default_height"
android:text="SOME TEXT 2"
android:layout_alignParentRight="true" />
</RelativeLayout>
res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="default_width">160dp</dimen>
<dimen name="default_height">160dp</dimen>
</resources>
Motorola Atrix
Samsung Galaxy SII
Generally when designing your layout you want to avoid planning for a specific pixel size. If you were to separate all of your layouts based on pixels like you want to, then you'd have to almost provide one layout for every single device (There are so many devices with different sized screens in the world). Usually you'll want to provide layout resources for a few different categories of size. layout-small, layout-normal, layout-large, etc. If you provide those and your layouts are built in a good manner it should scale to the different sized devices pretty well.
Is there something specific that is wrong with your layout when you run it in the larger sized device? Perhaps if you post that I can help you to try to solve it without needing to separate your layouts by pixel size.
Supporting Multiple Screens in the developer docs has lots of great information about how to build your applications so that they will scale well.
EDIT:
One potential way to solve your problem is not use a static dp value for the width, instead allow the buttons to grow to takeup however much space (horizontally) in order to fill up the width of the screen. You can do that with layout_weight and setting the width to fill_parent. I don't have access to eclipse now so I can't test, but I think surely there is also a way you could get this effect without the linearlayout, but this was the first way that I thought of.
<?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="#DFEFF1">
<LinearLayout
android:id="#+id/buttonRow"
android:orientation="horizontal"
android:layout_height="#dimen/default_height"
android:layout_width="fill_parent">
<Button
android:background="#AAAA11"
android:id="#+id/button1"
android:layout_width="0"
android:layout_height="#dimen/default_height"
android:text="SOME TEXT 1"
android:layout_weight="1"
/>
<Button
android:background="#FFAA11"
android:id="#+id/button2"
android:layout_width="0"
android:layout_height="#dimen/default_height"
android:text="SOME TEXT 2"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
Related
I have this simple 'XML' layout. I have tested in various devices and emulators and works fine. But on Galaxy Tab Samsung 9.6inch (1280x800) 157 dpi, text customer gets cropped in the end & becomes "custom".
I have read that i should declare dimens xml for various densities but i thought using DP is what makes your layout look the same in all devices. Am i wrong?
Also this tablet is a ldpi and x-large screen. I have tested it in other similar devices with similar specs and works well. How should i make this work for this device?
NOTE I want specifically 100dp to match others texts in width
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/labelSelGateName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_paddingLeft="16dp"
android:text="customer" />
</LinearLayout>
There could be the issue of TextSize in that device. Have you tried playing with the text size?
Is this layout is in any other layout?
Its happening because u have used padding on whole side.just set padding only top and bottom as u have only fixed the width.then it should be worked
to support padding just follow below-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/labelSelGateName"
android:layout_width="132dp"
android:layout_height="wrap_content"
android:layout_paddingLeft="16dp"
android:layout_paddingRight="16dp"
android:text="customer" />
</LinearLayout>
I'm a little confused after reading Designing for Multiple Screens in the Android documentation. There is a tool in Eclipse to preview the layout in different screens. And I can see from there that certain images are out of place and too big or too small. For example in this screenshot the big one is how it should look like and all the others are what it would look like in other screens. As you can see the jar with brain is out of place in all screens screens(except for Galaxy Nexus).
Throughout my application I've used all the best practices:
I have multiple versions of all the images located in drawable-xhdpi, hdpi, mdpi and ldpi, xxhdpi
I've used wrap-content and fill-parent wherever possible
I've used RelativeLayout
I've used dp for margins and paddings
layout xml for this particular layout in the screenshot:
<?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="#drawable/wall_nobrainjar"
android:orientation="vertical" >
<ImageButton
android:id="#+id/brainjar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginRight="129dp"
android:layout_marginTop="215dp"
android:layout_toLeftOf="#+id/red_paint"
android:background="#drawable/brainjar"
android:onClick="zoomImage" />
<Button
android:id="#+id/riddle_book"
android:layout_width="70dp"
android:layout_height="30dp"
android:layout_alignBottom="#+id/red_paint"
android:layout_alignParentLeft="true"
android:layout_marginLeft="83dp"
android:background="#android:color/transparent"
android:onClick="zoomImage" />
<ImageView
android:id="#+id/zoomed_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<FrameLayout
android:id="#+id/brainjar_zoomed"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/brainjar_zoomed_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/brain_grey"
android:visibility="gone" />
<ImageView
android:id="#+id/riddleBook_zoomed_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/riddle_zoomed"
android:visibility="gone" />
</FrameLayout>
<Button
android:id="#+id/red_paint"
android:layout_width="50dp"
android:layout_height="60dp"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/brainjar"
android:layout_marginRight="14dp"
android:background="#android:color/transparent"
android:onClick="zoomImage" />
</RelativeLayout>
What is my problem? the only thing I haven't followed is having multiple versions of layouts (-large, -small,etc). Is that the problem? If it is there a way to solve it without having many layout files. Currently I have only one layout folder, where I've put all my layout files.
Create different folders of name layout-small,
layout-large,
layout-xlarge
in res folder
Copy-paste all ur .xml's from ur layout to thes folder
Open all the xml's & set the margins with using different screen sizes one by one
Then u can run & see the app in different size emulators
It is the simplest way !
Short answer: Don't be lazy.
More detailed answer: Your background is scaled to fit the screen, but your other images are are not, so the ratio between the background and other images are different on different devices, if you look carefully you will see that the brain jar is not only in different places, but with different sizes. To solve this, you simply, or not that simply ;) need to add layouts for different screen sizes, to layout and scale your brain jar probably.
I have a screen with 4 ImageButton in a 2x2 Grid (using TableLayout).
I need to give support to all the different screen sizes. So I created the 4 layout folders (small, medium, large and extralarge).
It worked ok for the position of the ImageButton. But on large and extralarge screens the ImageButton's size are too small.
I tried to solve this problem using the 4 folders for diferents density (drawable-ldpi, drawable-mdpi, drawable-hdpi and drawable-xhdpi) using the x0.75, x1, x1.5 and x2 relation between mdpi and the others folders.
But I thinks that is not working or is not the right way to resolve this.
It is that the right way to resolved?
I worry about small screen but with Hight Density. Or Medium screen with low density. In those cases maybe is not working, right?
Other idea that I have, is to force the ImageButton's size (measure in dips) on every layout of every sizes folder. It that a better way to resolved?
I really lost with this. I want to apply the best/correct solution.
Can somebody help me?
Thanks and sorry for my poor english
Update:
This is the layout:
<?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="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal">
<TableRow
android:gravity="center"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_marginTop="60dip" >
<ImageButton
android:id="#+id/newCard_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_new_card_button"/>
<ImageButton
android:id="#+id/showLastTicket_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_show_last_ticket_button"/>
</TableRow>
<TableRow
android:gravity="center"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<ImageButton
android:id="#+id/cancelLastTransaction_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_anulla_button"/>
<ImageButton
android:id="#+id/searchCustomer_button"
android:layout_margin="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_search_customer_button"/>
</TableRow>
</TableLayout>
Okay, so what I would suggest for this is to use the relatively new qualifiers sw600dp and sw720dp (shortest width: 600dp or 720dp) to define larger sizes for those screens -- those are basically 7" and 10" tablets. You could either define a specific dimen variable and have a larger value in a values-sw600dp resource folder, or actually create a different layout altogether in a layout-sw600dp resource folder, depending on how much needs to change.
You could try to adjust ImageButton's width and height values in your layout by giving exact values like 50dip instead of wrap content. dip value is going to appear in different sizes in different screens as dip means Density Independent Pixels.
I got a problem in a project with the following structure. On each emulator (also large screens) a button positioned within a simple relative layout using that code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/first_bg" >
<Button
android:id="#+id/btnNext"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="202dp"
android:layout_marginRight="54dp"
android:background="#drawable/m_button"
android:text="#string/next" />
</RelativeLayout>
appears fine. BUT testing the app on Galaxy Note has shown that the button just flies away to some crazy positions. I used an emulator with similar configuration and the button appeared properly. I have no idea where the problem could be..
Have you tried to use a linearlayout instead?
With it you don't nedd to set the margin, just the position
It's based on the density-independent pixels (dp units), it'll show up at different positions on different phones.
http://developer.android.com/guide/practices/screens_support.html#density-independence
I've got a 4-item start screen in my app, which looks like the following:
What's important to me there:
- All items do have the same width (not regarding how much text is actually in it)
- Look the same on all devices (small-screen, mdpi, large-screen, etc.)
Im just wondering if there is a easy solution about this problem?
I've tried using 3 LinearLayouts but thats really awkward..
(1 presenting the layout root[vertical] and two which do each contain 2 buttons[horizonal]).
Making this layout ready for multiple screens would require a lot of fixed-width and fixed-margin hacking. Just like "button margin = 30dp on xlarge, 20 on large, 15 on normal,...".
My layout-xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
android:id="#+id/main_root"
android:orientation="vertical"
android:gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center" >
<Button
android:id="#+id/btn_learn"
android:text="#string/mainBtn_learn"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
<Button
android:id="#+id/btn_quiz"
android:text="#string/mainBtn_quiz"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center" >
<Button
android:id="#+id/btn_search"
android:text="#string/mainBtn_search"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
<Button
android:id="#+id/btn_more"
android:text="#string/mainBtn_more"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
</LinearLayout>
Is there a view which "auto-scales" these Buttons or still any other easier solution?
Edit:
So, in special, you need something like
button:
android:layout_width="15%" // 15% of screen width / height depending on the orientation
android:layout_marginBottom="10%" // see above
I'm pretty new to Android development but I can show you what worked for me in a similar case. I defined my layout as follows:
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/outputText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:editable="false" />
<Spinner
android:id="#+id/outputSpinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/OutputBaseOptionsPrompt" />
</LinearLayout>
I have a horizontal layout with two items. The LinearLayout has a width of "match_parent" so that it is as wide as the screen. Both items in the layout have the following:
android:layout_width="0dp"
android:layout_weight="1"
Since both items have a layout_weight of 1, they will be drawn at the same width. In this case, each item takes up half of the available space. If you change the weight of one of these items to "2" then it will be twice as wide as the item with a weight of "1".
Do you already have xml that makes it work on one screen size? If so post what you have so far.
I would suggest using a RelativeLayout for your root though. You can use the alignCenter attributes to float your children towards the middle. Then you just have to hard code the inner margins (how far apart you want the buttons) rather than the margin from yourself to the wall.
You could also avoid having to hard code the inner margin by making your own button 9 patch images. You can just add a border of transparent pixels in your image to represent the margin. You'll probably still want to supply an image for each density you wish to support though.
The solution is you dont use hardcoded values any where
Put three images with same name in hdpi mdpi and ldpi folders in drawables
an run the code