Scaling ImageButtons for multiple resolutions - android

I have a button which I want to occupy 75% of the screen:
On a 480x800 resolution screen this would be 360 pixels wide.
On a 280x320 resolution screen this would be 210 pixels wide.
How do I go about specifying this in my layout XML file?
I understand there is a DIP unit of measurement, but does that also work to scale screen images for resolutions? What DIP measurement would I use for this, and do the images need to be saved at 160dpi.

You should really try to avoid making this complicate by thinking about all the different screen sizes, and densities and such.
You say you want your button to occupy 75% of the screen.
Okay, put it in a LinearLayout somewhat like this:
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent
android:orientation="horizontal">
<My75PercentButton
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="75">
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="25">
</LinearLayout>
This makes the two views have 0 width, but spreads 75% of the available space for them after that into the first, and 25% into the second.
If you want to make your button stretch to fill that space (instead of just leaving empty padding around it), make it a 9-patch.
You will also want to support different screen densities, so provide different image sizes for your button in drawable-ldpi, drawable-mdpi, and drawable-hdpi.
But I will really caution: trying to push yourself into a world where you are designing your graphics for various specific screen sizes is going to end up in a huge world of hurt. You really don't want to do that. There are already a lot of screen sizes Android devices are running; this is only going to increase greatly in the future. If you take advantage of layout managers and other such facilities to adjust for the actual screen size, your app will run well on all of these screens with little to no work on your part. If you try to design your graphic for specific screen sizes, you are going to be doing this over and over and over again until you can't stand it.

You can create different layouts for different screen densities by defining the layouts in their appropriate subdirectories called layout-small for small density screens, layout-normal for all densities and layout-large for high density screens.
The dip-measurement works for this but I'm not quite sure on what value to set I guess you gotta try it and find out which one fits your needs best.
You can find an in depth article here.
EDIT: I've actually mixed them up ... sorry for the confusion. Corrected my answer above.
#HardQuestion: Here are the supported media formats for Android.

Related

Is "Scalable dp" the best choice for supporting every different screen size in android?

I have been searching for information to define dimens.xml for every different screen size so that I can have different values for different screen sizes. I have seen that is really difficult because I would have to make a different dimens file for every different screen size. While searching for a possible solution to this, I have found this library: https://github.com/intuit/sdp
Is that library the best solution nowadays to support all the different android devices according to the screen size? I would appreciate other alternatives if using "scalable dp" library is not a good option.
In my case, the purpose of having different values according to the screen size is because I have a ConstraintLayout with some items that have Top and Bottom margin. To let you understand, imagine that both Top and Bottom margin is 10dp. I can see so much difference of margin between device 1: 480x800px (4" and screen density= hdpi) and device 2: 480x800px(3.7" and screen density= hdpi). As you can see both devices have same screen density and same px, so I have to use some other attribute or tool to distinguish that different screen size...

Supporting multiple screen sizes and rotations in android

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.

Android layouts size and resize

I am doing a lot of work about android layout I still can't create a layout working in every phone. I am not sure about best the way to create a layout so correct me if I am wrong . There are three things to keep in mind :
Screen px (resolution, for example 1080x1920 px)
Screen dimension "inches"
Screen density dp or also called dpi ( dp is a virtual resolution, it's correct?)
To draw a layout working in every phone (my app will works for phones) do I have to create a directory "layout-kindofdensitydpi for every screen density (layout-ldpi,layout-mdpi,layout-hdpi,layout-xhdpi,layout-xxhdpi,layout-xxxhdpi) and draw "manually" or do I have to do something else?
I did a test, I created these 6 directory and drew manually for every resolution. It requires a lot of time, also device with a resolution of 768x1280 my app doesn't respect what I drew, for example spaces aren't respected, the collocation of elements doesn't result correct and frame layout with ImageView inside isn't scaled.
What I have to do? In some Android books isn't mentioned that elements could not resize and usually them explain how to put some text or image without analyse resize in every device.
Thanks in advice
First you should find the appropriate layout type for your UI (RelativeLayout or LinearLayout). Sometimes using a good layout(or nested layouts) can make the UI look good on every screen. I prefer LinearLayout cuz I can simply set layout_weight for components.
Then set different sizes in dimens.xml file for different densities or screen size buckets. Like this:
And you can also use match_parent or wrap_content
Don't forget to set the screen orientation of your activity if it doesn't need to rotate. Having one orientation makes it much easier to design.
If you couldn't make a good layout using tips above you should create multiple layouts to fit every screen size or density (Screen size and density are two different things).
You should find the best way to determine your screens according to.
Screen size bucket (small, normal, large, and xlarge) picks a layout that fits the screen (or the closest), density bucket (ldpi, mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi) picks a layout according to the density ,or the smallest width (I think it's almost the same thing as density).
480dp is the sw of these two devices
You can make layouts for different screen orientations too.
I don't like creating layouts for different screens for some reason. One of them and the most important is that sometimes same screen sizes have different densities and it makes it hard and time consuming. To create a layout and you should also provide a lot of pictures.
Use
android:layout_width="match_parent"
android:layout_height="match_parent"
to the outer layout to get access of the full screen of the device.
Also, if there are no changes in your UI then you don't need to create different layout folders.
Refer http://developer.android.com/training/multiscreen/screensizes.html
You should have a look at
http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/training/multiscreen/screensizes.html
http://developer.android.com/training/multiscreen/index.html
I would suggest using layout-swXXXdp or layout-large etc instead of layout-KindOfDensitydpi
Create your relative layouts using RelativeLayout and use the weights of LinearLayout. Don't hard code any of the positions in the layout

How to make images for different screen sizes?

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.

Why is my layout not Density Independent?

My layout as shown below looks very different depending on what screen size it is projected on to. I'm aware I can improve this somewhat using different layouts for each screen size but considering I have followed the best practises described in the android multiple screen support documentation (using dps, no absolute layouts etc) I wasn't expecting the results to look this bad so I fear there is a further underlying problem.
Code:
http://pastebin.com/D96ue9sc
Your layout is fine and completely as I would expect it. You shouldn't mix up density independent pixels with fully dynamically layouts.
DP just means that the value is calculated according the density types. The density itself has nothing to do with screen resolutions. 60dp are 60px on a mdpi device, it doesn't matter if the screen is full HD or just 480x360. But the result is, of course, very different because the calculated 60px are nothing on a HD screen but a lot on a small one.
You have not other possibility but to provide different layouts according to the screen size/resolution.

Categories

Resources