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.
Related
I still have problems with the correct view for the images in my Application. So on my first device (5,2 inches & 480 density) it looks good.
On the second device (5,5 inches & 420 density) the image doesn't fit and it shows white borders.
This is the ImageView in my layout:
<ImageView
android:id="#+id/iv_image"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#id/tv_topic" />
I placed all my Images in the drawable folder after reading this on a Android Blog:
There are commonly two ways to target all screen DPIs.
1. Easiest way - Make all images to Extra High or Extra Extra High DPI.
Android auto-scales the drawables if the device does not match the drawable DPI. If the only drawables are created in high density, lower DPI screens will down-scale a resource to fit in a layout.
So I implemented all Images in the highest possible resolution ONCE in the drawable folder. Is it necessary to place them all in the specific folders (drawable-ldpi, drawable-mdpi ...)? It would mean that there will be multiple copies of my Image with always the same size.
And yes I read the official documentation of supporting multiple screens a couple times. However I have some problems understanding it.
I advice you to use the layout_weight attribute to keep the constant ratio between the ImageView and the question layout.
Change your layout to something like this :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/iv_image"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="3" />
</LinearLayout>
Im developing an app and have situation like this:
I have 2 buttons from images and they have to fit whole screen.
So ive used linear layout and gave layout_weight to 1 to both.
However as u can see from my sketch theyre not rectngular so the one on right has to have negative left margin to look like on sketch. But images are dynamically scaled so margin amount depends in screen size. I tried to create multiplied dimen files for ldpi, mdpi, hdpi etc but only looking in preview 2 hdpi screens it doesnt look the same. Knowing orginal size margin is there any way to scale it properly on all screens?
Regards
Edit:
Ofc I'm using dp units. But like I said it's not the same for all screens with the same dpi.
For example:
values-xhdpi/dimens.xml:
<resources>
<dimen name="button_margin">-23dp</dimen>
</resources>
Nexus 10 2560x1600 xhdpi:
Galaxy Nexus 720x1280 xhdpi:
And my layout:
<LinearLayout 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:background="#android:color/transparent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/riderstabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:checked="true"
android:layout_weight="1"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/btn1" />
<ImageView
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:layout_marginLeft="#dimen/button_margin"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/btn2" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/list"
android:background="#android:color/transparent"
android:layout_weight="7"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</android.support.v4.view.ViewPager>
</LinearLayout>
Edit:
I've discovered that there's another category of screen sizes.
As documenatation says:
sizes: small, normal, large, and xlarge
densities: ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high) [i think there's xxhdpi, xxxhdpi and tvhdpi too].
So I have 2 buttons: 262x46 first and 404x46 second. -26 pixels is the orginal margin for the second button to perfect match. (so sum is 404+262-26=640).
I've found some factors for densities:
ldpi - 0.75
mdpi - 1.0
hdpi - 1.5
xhdpi - 2.0
xxhdpi - 3.0
xxxhdpi - 4.0
But when I for example guessed right margin for mdpi and multiplied it by 1.5 for hdpi it's not scaled properly (as for looking in preview in eclipse). And there comes screen sizes so it's even more complicated.
Using the density-independent points (dp) unit of your margin and your padding is the best way to maintain an absolute dimintion on all device sizes as following:
android:layout_margin="20dp"
Make sure you are using dp for all XML elements and sp for all texts
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'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>
I'm trying to draw a button with an image as background.
Here's my xml:
<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:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="13dp"
android:background="#drawable/button_bg"
android:text="Break Record"
android:textColor="#2c4417"
android:textSize="19dp"
android:textStyle="bold" >
</Button>
</LinearLayout>
On the graphical layout view, it looks as I intended:
But on the emulator, the button takes the entire width of the screen:
I've read the specification more than once, but couldn't get what my mistake is,
How do I write the button xml so that the button will look on the emulator (and all devices..) as in the Eclipse's Graphical Layout?
Thanks.
The width of button is due to #drawable/button_bg. If the background image is constant for different densities then hdpi would should button small in size, on the other hand, mdpi and ldpi devices would take more width to show the same button. Confirm that you have different background images and they are relative to their densities.
P.S. Run three different emulators with hdpi, mdpi and ldpi densities respectively and observe the layout.