So my problem is simple- I want to use XML layouts to precisely control the positioning of widgets on multiple devices. To do this, I thoroughly read the google docs on supporting multiple devices. According to this part, the WVGA854 and HVGA are both considered "Normal screen" size. So theoretically, positioning a widget on WVGA854 should look the same as with HVGA. However, the resultant screenshot shows otherwise.
The widget appears relatively higher placed on the WVGA854 skin. The XML code is shown below, and was placed under the layout-normal/ folder:
<?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" >
<ImageButton
android:id="#+id/button1"
android:src="#drawable/icon_unlock"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="300dp"
android:text="Button" />
</RelativeLayout>
The drawables I constructed are in the proper ratios (3:4:6:8 as recommended). So why does this positioning mismatch happen? I beginning to think that using XML to position things is quite fruitless. My app requires very accurate positioning of widgets so even this slight mismatch is a problem. Any help how I can remedy this?
EDIT:
What I want is for the widget to be placed in a manner such that the ratio of margin from top to the margin from bottom is exactly the same across devices. From the screenshot, you can see that this ratio is not the same for WQVGA854 and HVGA.
"Normal Screen" size does not mean that screens have the exact same number of dip. You need to think of it as a bucket which contains a number of different screen sizes which are all similar in physical size.
so using fixed size margins and paddings is not (easily) going to achieve the effect you need. So please clarify your question and give an example of what you exactly want to achieve.
Related
Learning some Android development through trial and error, however I'm having a slight issue with the rendering of buttons on top of an image view depending on the resolution of the phone.
I have an imageview with two imagebuttons (at the moment) on top. They are relative to the imageview. I will post the xml markup below. The issue is when I run this on the "Nexus 4" in Android studio, everything looks correct. When I debug through my Samsung Galaxy S4, the imagebuttons are off slightly, and I'm not sure why this would be a problem if everything is truly relative to the imageview. I understand that the resolutions are different, but how would one go about making sure that this renders the same on the smallest of screens, as well as the newer 1080p screens that are becoming more popular?
I can post pictures if need be, but I feel that the xml will provide adequate information on the issue.
Any help is appreciated. Thanks in advance!
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/SRMap"
android:layout_alignParentTop="false"
android:layout_alignParentLeft="false"
android:background="#drawable/sr_map"
android:layout_columnSpan="2"
android:layout_rowSpan="1"
android:layout_column="0"
android:layout_row="0"
android:contentDescription="Map of Summoners Rift"
android:cropToPadding="false"
android:layout_marginBottom="177dp"/>
<ImageButton
android:layout_width="15dp"
android:layout_height="15dp"
android:id="#+id/BlueSideAlert_BlueBuff"
android:background="#drawable/blue_alert_circle"
android:layout_alignTop="#+id/SRMap"
android:layout_alignLeft="#+id/SRMap"
android:layout_marginLeft="90dp"
android:layout_marginTop="128dp"/>
<ImageButton
android:layout_width="15dp"
android:layout_height="15dp"
android:id="#+id/BlueSideAlert_RedBuff"
android:background="#drawable/blue_alert_circle"
android:layout_alignTop="#+id/SRMap"
android:layout_alignLeft="#+id/SRMap"
android:layout_marginLeft="180dp"
android:layout_marginTop="215dp"/>
but how would one go about making sure that this renders the same on the smallest of screens, as well as the newer 1080p screens that are becoming more popular?
See the Docs here about supporting different screen sizes/resolutions. You create separate layout files adjusted to what you need. Simply use different qualifiers for the layout folder name according to the docs and the correct one will be used according to the device that loads it.
You can try and adjust one file to work on different screens but you are a lot better off using different layouts if it will be ran on different screen sizes and resolutions.
For example: you can have a default res/layout folder and a res/layout-large to be used on larger screens
I handled this in a fairly ugly way, but it works across all screen sizes now. Basically say the primary image was 800x800 dp (the image view). The buttons would be smaller than this (20x20 dp), however through transparency, i created 800x800 dp imageviews (note: no longer buttons) with everything transparent but the "icon" (still 20x20 dp). Although slightly larger in terms of file size, it's negligible in my case. Now no matter what the size of the screen, the imageviews all stretch the same amount, thus removing any guesswork from using the different pixel densities.
I realize that this wasn't the most graceful solution, but I cannot see any drawback aside from making some of the layout development more difficult, and the image files are slightly larger. I used Paint.NET in order to create the .png's that I used.
I am creating an app that is relevant to me, and that I figured would be easy to implement using some of the core functionality already provided in android. My idea is a simple League of Legends Jungle Timer Application. This is important to know as I link the pictures so people can understand the context.
Note that both images are the same resolution, there is just no border on the second one.
http://i.stack.imgur.com/Ad3LZ.jpg
http://i.stack.imgur.com/NfhRM.png
Additional details:
For this app I have disabled the "landscape" orientation, I plan on doing this using some of the details that were provided on this page (layouts).
All of these icon ImageViews are relative to the map, which is the first link, so they will always resize correctly. There are 12 of them also, if it matters.
Thanks all for your help!
I'm sure there's a basic answer but I'm still learning and I'm not quite sure.
I have an app with a few button on the start screen. It works on a Nexus One (emulator) and a Samsung S2 (device); probably because the screen size is the same. However, when I preview all screens on tablets for example the button are completely spread out and really small. On other devices they're halfway into each other and just doesn't look good. I've tried match_parent and wrap_content but that doesn't help, how do I use some .xml code or layout properties to make sure the button's don't budge into each other yet fill the screen (I'm using relative layout)?! Thank's anyone that can answer.
Is there something in the layout_height/width/align that I could change?
<Button
android:id="#+id/button10"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button9"
android:layout_alignBottom="#+id/button9"
android:layout_alignRight="#+id/button8"
android:text="Info" />
You need to make seperate layouts for different screen sizes and densities
http://developer.android.com/training/basics/supporting-devices/screens.html
If you set your target SDK version in the Android manifest file to "3", then your layout on large-screen devices will be just a scaled up version of what it is on small-screen devices. Once you set the target SDK to a higher SDK, you can create separate layouts for each screen density, which provides a much better user experience.
However, my layout is mainly made up of images, that are high enough resolution that they display just fine on all screen sizes, even when scaled up, because they're big enough that they don't need to be stretched. Now, it would be much easier for me to just create a small-screen layout and have it scaled up, because it would still look nice on large screens. Is there any way I can get that effect without going back to API level 3?
You can use weight parameter.
“weight” is a term that's used to specify how much of the screen a particular view should occupy if there’s any room left after it’s drawn.
Simply make a LinearLayout and place two TextViews within it as such:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="small"
android:layout_weight="0.2"
android:background="#123" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:text="huge"
android:background="#456"
/>
</LinearLayout>
You will notice how views occupy space accordingly. You can create any layout you want for smaller screen and specify weight attribute and every thing will be adjusted beautifully
Just don't specify a layout for larger screens. By default it uses the same one for all screens unless a more specific layout is available. If you're using match_parent for the width and height and the images to scaleType="fitCenter" or "centerCrop" -- things like that, it should fill whatever screen size that it is run on.
Dont'f forget making your app compaible with tablets. You must add
<supports-screens
android:anyDensity="true"
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:xlargeScreens="true" />
in your app manifest.
Hm. I thought Android already did this as long as you aren't using something like AbsoluteLayout. There's a few tricks that can help with the transition. Not entirely sure what the question is asking, but I'll give it a shot. Does API level 3 scale with aspect ratio or something?
I found that most of the UI ugliness going from phone to tablet deals with width. There's logic you can put in to fix the width at a certain res. Otherwise, the layout looks and acts fine. There other tricks like having assets sized using different dimens.xml, and having different sets of dimens.xml for different screen sizes and densities.
You don't have to have every single dimension in each version. You just have to have the base version of each value set, and you can set the different dimension in the other files.
Only way to resize images through different screen size is to use nine patch. Here is more resource on that subject : http://developer.android.com/tools/help/draw9patch.html
I believe this is only thing that you can do is in layout use relative width/height (weight) and images formatted in ninepath.
The problem I am running into related to supporting multiple screen sizes - a fairly common one I believe. I have searched a lot, but have not found something helpful.
I have my project laid out traditionally, with folders to support the various sizes called layout, layout-small, layout-large, layout-xlarge.
So as I have found out, even within each of these size regimes, there screens are not all the same size. For example, my 320x480 screen qualifies for the normal size layout, but so does someone's 480x800. As you can imagine, the content of my app will not fill up the whole screen of a 480x800 device because there is more area. Here are examples of what it looks like:
On 320x480 (what I designed for):
On 480x800 (notice the extra space at the bottom):
Now, I have done a lot of research and applied lots of techniques in an effort to make my app look nice on all screen, but I feel like I am missing something fundamental. I have taken all the basic steps to use dp instead of px, use RelativeLayout everywhere, stuff like that. But I need some way for my app to re-size itself to better fit the larger screens. For example, the margins between the various components could increase a little to occupy more of the empty vertical space.
Any advice, or help? In the worst case, is there a way to design a layout which would fire up specifically for 480x800 screens (because they seem to be most common)? Thanks.
If I were you I'd use a layout like this:
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<!-- Your first form line -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<!-- Your second form line -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<!-- Your third form line -->
</LinearLayout>
<!-- .... -->
</LinearLayout>
This layout will produce this (without colors, of course :) ). The ratio of the lines (colored boxes) is fix, but it's size is dinamically fit to the screen height. The fill_parent and layout_weight do the trick.
If you want to use RelativeLayout, you have to set the whitespaces and heights programatically from JAVA (some explanation here)
320 : 480 has a different ratio than 480 : 800. So the latter simply has more vertical space in relation to the horizontal space than the former. So there is nothing wrong with your layout.
You need to design screens so that you always think about how the Views you define behave when the screen's size shrinks or grows. As you saw, screens may be varying greatly even in the same size-category.
In the case of the screen that you showed, you need to give the width of the EditText components by using weights, not exact dp amounts. You can find many articles on how you might do this, here's one for a start.
hi all
i have to use linear layout with all resolution type device such as 480x800,480x854,320x480.
i use x,y position for placing element in linear layout while designing for 320x480. i have to redesign for other resolution device therefore it takes more time. please give common method for all the resolution with linear layout. thanks in advance.
DON'T design for a specific resolution. Use combinations of layout_weight attributes, layout_width and layout_height values of wrap_content and match_parent to get different proportional widths depending on the screen size, rather than hard coding pixel values.
For example, say you want to add a row of four buttons, each taking up equal width, along the top of the screen, offset from the top left by ~5 pixels:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:gravity="top"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 3"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 4"
/>
</LinearLayout>
This will give you a reliable result for any screen density, and you never have to worry about a certain pixel value. The use of dp (device-independent pixel) for the padding also changes slightly depending on the density, so that it stays a consistent physical size no matter what the resolution.
Read through the examples on the Android Developers site about LinearLayouts, FrameLayouts, and RelativeLayouts. You'll get a good feel on what each one is good for, and their advantages and disadvantages.
You can define different layouts for different screen categories. So you can adapt your layout so that it fits the actual screen. A good resource that describes how this is done is available here:
http://developer.android.com/guide/practices/screens_support.html
It's a good idea to use density-independent pixel (dp) in layouts. And I think this could be helpful: http://developer.android.com/guide/practices/screens_support.html
Very EXCELLENT ANSWERS ... I believe that alot of individuals and business alike think that Android is a "Device" and not clearly understanding Android is a "OS". Inorder to properly display images for all devices running Android OS one must go with the option to Support Mutiple Devices and develop according to Android OS and not a certain device running Android OS. I have encountered this problem before, my Boss (at that time) said "What size Images does your Test Device need? I said "just get me the images! I was forced to use 320x480 images (according to the test device) and when the Regional Manager saw the demo product on his ThinkPad (and 4 other device's) I was terminated from my position because my Supervisor thought Android was a Device and Not a OS ... and the company Android App has yet to be completed.My opinion holds "Supporting Mutiple Devices is developing for General Android OS while developing according to "Resolution" is for a certain device or type of device.