Firstly I wanna say that I red probably all there is on internet on this topic.
I kinda get the picture about it but still I am not sure, and my brain is boiling trying to think about how it should go properly so I need somebody to clarify me these things maybe better than I found at other tutorials and topics.
Also a lot of questions and answers are kinda old and I know that these qualifiers for layouts like small, large and xlarge are kinda deprecated so refreshing would be nice.
So the thing that bothers me is how to support multiple screen sizes and orientations in android?
I understand that I need to support different drawable resources for different screen density's and that I need to use smallest width available qualifier for different screen sizes.
The thing that is the problem and I don't understand is how to accompany both of that together.
For instance for first example I have like logo sign which should draw over the whole screen of the mobile.
Can I actually provide all possible solutions and all possible sizes of that logo in all orientations or the android will size them as needed from the closest ones I give him?
How does the smallest width qualifier go in hand with different density drawable resources?
They just change the size of the picture depending on the screen dpi but they don't change the layout appearance.
Should I change layouts depending on screen sizes, and the pictures will change according to the density by itself what is actually a second example, because like buttons are different story, if they are 50 x 50 px in mdpi they will be 100 x 100 px in xhdpi.
And that's what I kinda get.
The bigger problem is how to put in the picture all alone that is filling the screen by itself and also to take screen rotations and changing of width and height with it in account.
So it was a long question, hope I told you what you need to know, the similar questions have already been asked but they are kinda old and outdated in some parts, and even there I still didn't find all the answers I was looking for so I hope I will find them here.
Looking forward for your help and thank you in advance !
I would say you're over complicating the topic, to support all sizes/layouts, you just have to keep them in mind while designing your layout. A vast majority of your layouts should only need to be built once and if they're built in a way that scales well it'll work out.
For example, if you're trying to draw a splash screen with a logo in the center, you can do something like this.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_logo" />
</FrameLayout>
This would work on all devices/sizes/orientations as it is just putting the logo in the center.
When building a layout, just focus on an average size of a current modern phone but keep in mind people have smaller devices. Use that as your base for assets, and try to include smaller ones, or use vector images.
And if you're building a View that is long, wrap it in a ScrollView so it can scroll on smaller devices.
I would only ever use the other layout directories ( for sizing or orientation ) for very specific cases, like when you want to completely change how your layout looks.
Hopefully that helps.
Related
I want to show some images on the background that is also image. Say my background image contains an empty squares, and I want to show an apple image that must appear exactly in one of that squares.
I have a problems with the apple sizes, as the background scales and fits the screen, but apple image stays the same for the different resolution and the same density devices.
Say I have two ldpi devices with 240x320 and 480x800 resolutions. When I keep my drawable aple file in the drawable-ldpi folder, and use wrap_content for height and width (or fixed dp values) those 2 devices draw the apple with the same size, like it is described in the documentation.
The LinearLayout works slow when I stack them.
Using RelaytiveLayout I must programmatically resize the images which is also "not so good" solution I guess.
I've found a solution here https://github.com/intuit/sdp that maps the dp-s.
They set dimen-s for values-sw300dp to be
<dimen name="_10sdp">10.00dp</dimen>
and for values-sw480dp to be
<dimen name="_10sdp">16.00dp</dimen>
and so on for the different cases ...
So when I set the with of the apple to be _10sdp it means different dp-s for my 2 devices with the same density and solves my problem. Is it a good solution as it seems to be for me?
Is there any other easy ways?
This is indeed the recommended solution as you could see in the iosched github repository which is a generally good source of knowing whether something is a desired common practice at least according to Google since i know they spend a lot of time to create this code to reflect the best practices and obtain the new APIs
Your solution seems good, just as common solution, would be good to use folders described in documentation.
For your case, as easier solution I would suggest to not use an apple image separately and place it in background's square. You can have an image: apple in square, and place it on background wherever you want. An apple will always be in a square and you can avoid tiresome process of creating dimens for each configuration.
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!
Currently i'm trying to develop a mobile app for the Android devices (using Appcelerator).
There are alot of Android devices out there with different screen resolutions. So i basically want the app to look the same on every Android device.
So suppose i have a background image in the center of the screen. Which is (in pixels) 550x300.
I just tried to set the width and height of the imageviews to dips (density independent pixels). So in my case to: 332dp x 226dp.
I tested this first on an HTC One X. In there the image in nicely centered and i have a small space left on the left and right side to the edge of the screen.
Then i tested it on a slightly older device, the HTC Desire Z. In there the image width is a little bit more than the actual width of the screen. (example screen. The blue square represents the image)
So that means setting the width and height as dp isn't a good choice either for images.
What would be a good way to set the image width and height so that it looks the same on both phones. i.e., so that they both have a small white spaces on the other edges of the image left (like i have now in the HTC One X)??
Any advice on this matter?
edit
Thanks for the info so far. Some of you posted links to resources etc and made some suggestions. I'll try to work them out in the next few days, so i might take a couple of days before i accept an answer. In the mean time, any ideas suggestions are welcome.
Use the various drawable folders, i.e. drawable, drawable-large, drawable-xlarge to store your image assets for your background in various sizes. Review http://developer.android.com/guide/topics/resources/providing-resources.html for more information.
Also refer to Android: Scale a Drawable or background image? for helpful information.
I would recommend using a size to fit.
in objective c it looks kinda like this... not much of a android programmer but this may help.
CGRect frame = _textView.frame;
frame.size.height = _textView.contentSize.height;
_textView.frame = frame;
so if you could figure a way to get the frame size then you could set your image to that size any way the view is positioned.
and if you dont want it to take up the whole screen and just the sides then there might be a autoresizing function for android this way your image will be flexible with your frame which will vary based on the phone size.
I think the is problem is not that the image is wider, but the screen width of the phone is smaller on the HTC Desire Z.
I think the best way fot the image to look the same on all devices would be to set width/height programmatically.
But I think this doesn't really matter, as you will encounter much more complicated problems further wil developing for multiple devices. Both look good IMO.
What I would is set your android:layout_width to fill_parent and then add a android:layout_marginLeft and android:layout_marginRight in dip. You can also set a margin for the top and bottom, but based on your screenshots that doesn't seem to be an issue.
As a general rule, try to avoid setting fixed heights and widths for your widgets. Here is a great reference for dealing with different screen sizes:
http://developer.android.com/guide/practices/screens_support.html
So i basically want the app to look the same on every Android device.
No you don't. You think you do, but you really don't. That's like trying to fit a photograph in a 4x6, 5x7, and 8x10 frame -- something's gotta give. You have small phones, medium phones, large phones, 7" tablets, 10" tablets -- these are not the same experience and you simply have to allow some leniency to the design to make it work. If you just want a specific amount of space outside of the image, just give your ImageView a specific margin in DP units, e.g.:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dip"
//...
/>
You should be striving to make the experience the same (although different layouts for tablets are highly recommended) but you can't expect it to look identical across all screen sizes and densities.
Getting my head around Android, I've sort of trouble understanding support for multiple
devices. I've gone through the dev-docu, now for the clear-up:
The idea behind using dp is, that e.g. a button has the same 'real-world'-size, independent of the actual screen-size, right?
If so, that means, I provide the images in ldpi, hdpi and so on. That results in a button, that has always the same size.
If still correct, I understand that now, that my buttons always has the same size, I should provide different layouts, because on a small device, there might only be space for two next to one another, where on a larger device there's room for three.
If all of the above is correct, my question would be, how I deal graphics-tool-wise with it. Say I have a button 100px x 100px at 300dpi, what sizes and dpi's would that be for the new documents in e.g. Gimp for the different screensizes?
Thanx in advance for any smoke-lifting!
Marcus
What it means when you can use your custom assets for different screen densities is that when you put those respective assets, they will not scale again and use them as they are. Now it is true that the size of the screen also varies. That is when you can consider tweaking your layout.
For example in a large screen you may be able to fit two components beside each other and use a linear layout with horizontal alignment. But when it comes to a small screen, that might not be possible and one option is to define a new layout for small screens and say pt those two components in a vertical layout.
For more information regarding how to implement this and best practices, check these Android Docs
After some more study, it seems that the graphocs-tools DPI are actually the one referred to in e.g. the baseline. So to create a baseline-doc, you indeed create a document 470 x 320 pixel in size and a resolution of 160 dpi. The rest goes from there.
I am currently developing an Android Application for a company who are set on having this type of design and targeting Hires devices however I have found that this is very difficult to do and on some hires devices buttons start to stretch.
Screen design here: https://skitch.com/aaronwardle/r7kwa/screen
A few people have recommended making the buttons into Nine Patch PNG files which help with the various screen layouts.
Should I try and get a new app design for this project, which fits all screens using standard controls, or do you think this is achievable?
Looking at stats the most common devices are small screen ones, so creating this application may have a limited audience.
If any one has any pointers on what I could do, i.e. could I make this for hi res screens and within the application have a different layout for smaller screens?
Thanks Aaron!
Your question is too generic to give a simple and quick answer. Furthermore, the layout you want to make is complex and very non-native-looking which complicates matters. Please make sure you read and understand the official docs on the subject from HERE. There is no replacement for that...
The main points that come to mind from that document are:
the <supports-screens> manifest item
Resource directory qualifiers for screen size and density. Appending stuff such as -small or -portrait allows you to create resources that are loaded only on a particular screen aspect, size or DPI. For example, you can create bigger images for bigger screens, or change the layout XMLs for portrait or landscape
Use 9-patch images to scale up rectangles (buttons).
Best practices (as recommended by Google):
Use wrap_content, fill_parent, or the dp unit, instead of absolute pixels
Avoid AbsoluteLayout
Do not use hard-coded pixel values in your code
Use density and/or size-specific resources
I know my answer is a bit generic, but then again, so is your question...
You have to use 9 patch png and also will have to make some changes in the manifest file, to make it screen resolution free. These are very less changes in the manifest file so would not be a trouble.
You can use 9 patch images as well as to design application for different resolutions, you can create different layouts for landscape and portrait.