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.
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>
I am making a bus schedule app. I have a lot of buttons in the main activity. My phone has a HD screen, so I made the buttons for that screen resolution.
How can I make the positions of the buttons to fit every screen resolutions?
If you are creating the buttons through xml layouts, then size them using dip (density independent pixels) as opposed to px (normal pixels). If you are pulling these images from resources, then you will have to have resources for all screen resolutions placed within the corresponding folders within the project structure (hdpi, mdpi, ldpi, etc.) - this would consume quite a bit of memory though.
You can use GridView...It will allow you lots of button to equally distributed along the screen.
You can follow these tutorials...
Android GridView Layout Tutorial
Android GridView example
Android Custom GridView Example
Android Custom GridView with Images and Text
You can use GridView for that purpose.
If you do not want to use GridView you can use linear with vertical orientation as main layout and linear layouts that contain buttons with "horizontal" orientation as rows.
To make buttons fit same space on different resolutions you can use layout_weigth attribute.
Something like that
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<!-- yo can define as much buttons as you want -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<!-- yo can define as much buttons as you want -->
</LinearLayout>
<!-- and so on -->
</LinearLayout>
Defining layout this way may be not good for peformance so use it carefully
You can use grid view with 7 rows
GridView gridView = new GridView(context);
gridView.setNumColumns(7);
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'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 have created layout,layout-large, layout-small layout-xlarge layout_xlarge-land but if i have created emulator with giving resolution my design is coming good . but i have checked in devices samsung galaxy tab 7 inch and samsung nexus s but my design in not properly coming can anybody tell what is problem? otherwise how to do?
This is my layout for large screen
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:layout_marginLeft="10dip"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:text="Large Screen" />
<fragment class="com.hcl.gcm.fragment.MeetingFragment"
android:id="#+id/meetingFrag"
android:layout_marginTop="200dip"
android:layout_width="match_parent"
android:layout_height="200dip"/>
<fragment class="com.hcl.gcm.fragment.MeetingRecieveFragment"
android:id="#+id/receivingFrag"
android:layout_marginTop="100dip"
android:layout_width="match_parent"
android:layout_height="200dip"/>
<fragment class="com.hcl.gcm.fragment.ButtonFragment"
android:id="#+id/btnFragment"
android:layout_marginTop="40dip"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Thanks
The design for Multiple Screen size is always a difficult one in Android.
Some Guidelines I know:
Mostly Use Relative Layouts which suit any screen size.
If you design for different screen sizes, then using different size images are good.
Try to use Nine Patch PNGs for Button backgrounds.
Design a separate App if you develop App also for Tablets. Because Tablet users want rich graphic UIs.
Always check UI in multiple size emulators during development.