I'm working for build the UI of my team's App.
In the beginning, my partner designs UI using Sketch 3.
According to the Android API guide for development Supporting Multiple Screens we known that 1dp = 1px in mdpi.
So we plan to design a basic standard UI in mdpi density. Other density would be automatically fit the position or length if we use dp as our length unit.
The basic UI resolution for designing canvas we use in Sketch is 360 x 640. We've read some articles, some articles said the mdpi resolution for designing standard is 360 x 640, and others said is 480 x 320.
It's really confused. We finally choose 360 x 640, because 480 x 320 is 4:3 aspect ratio not so many Android devices use it.
After we've done our UI, I'm trying to apply it to our app. But I've met some problems with positioning element. For example, our splash page.
Here is our splash page, I can hold Option/Alt to get the distance between edge to out element in Sketch 3. Because the UI sample file was made in mdpi resolution, I can use the length directly.(1px = 1dp in mdpi)
Splash Sample Image
CoolLogo is a ImageView. the whole layout is an RelativeLayout.
I'm using android:layout_centerHorizontal="true" to make ImageView in the center of Layout.
and android:layout_marginTop="268dp" to make it right position according to our UI sample file.
Here is whole layout xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/LaunchPageLayout">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/coollogo"
android:layout_marginTop="268dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
Preview on the Nexus 5(5", xxdpi, 1080 x 1920) looks fine. But the ImageView position seems to be incorrect a little bit.
When switch to smaller device such as Nexus One(3.7", hdpi, 480 x 800), the position is totally wrong. it should be in more upside position.
Nexus One Preview Sample Image in Android Studio
I'm confused. How can we get the right position values when we put our element into layout? Doesn't it means we just only to design a UI in mdpi it should fit all density? but if that is ture, why the layout on small devices is wrong? because our sample UI is design in mdpi resolution. I'm totally muddled.
might somebody give me some advices or some best practice to bulid UI?
Thank you.
According to guideline,
Google is not recommend to use absolutely pixel unit to design UI.
We use the method below to design our application in the end.
Share to everybody who started to design Android UI.
Basically, we need an mdpi size canvas, the canvas size is 320px * 480px
We use this resolution as our standard resolution,
including measuring length and size.
And if you ever heard about the design of iOS UI (or macOS).
You'll know that iOS often use 320px * 480px as standard x1 resolution.
When export resources, there will be x1 for standard resolution and x2 for Retina resolution.
Because the Retina resolution is two times of standard resolution.
Just like that, if we use standard resolution, Android will help us to fit on machines with different resolutions.
so we got:
mdpi => x1 (the standard)
hdpi => x1.5
xhdpi => x2
xxhdpi => x3
Theoretically, if we follow standard resolution, we can build layout for any other resolution.
By the way, We can set different dimen values as well.
it will help the layout to be more accurate in visually.
Maybe the best way to build one layout to fit all kind of resolution currently is to use ConstraintLayout.
but this kind of approach sometimes doesn't make sense.
Anyway, designing UI for phone and tablet (or even phablet) always be a good user experience.
Related
I am in android development for last 6 months, recently got a design from a client. I implemented the design and he said this is not exactly look like what the designer has done. Then again he gave me the design with following specifications
my question is - is this right to add the spacing as he has given will this be proper in all devices else how can I explain him what he says is wrong
Please correct me am I wrong or he is wrong
As other users told you, px is not a relative dimension. As an example, we suppose a mobile phone with 5x10 cm screen dimensions, the model has hdpi resolution (480x854 px). For this device, a horizontal margin of 100px takes up more than 20% of the screen width. But, we also have another phone with the same screen dimensions (5x10 cm), but this one is more expensive and it has higher resolution (xxhdpi -> 1080x1920 px). For this case, a horizontal margin of 100 px will not take up more than 10% of the screen width. Therefore, it is needed a relative dimension as dp.
A possible way to deal with your designer could be decide a device to do the designs (a common one). This is a useful link with some devices and their configurations: https://material.io/tools/devices/ . I could recommend you to design using a 720x1080 px (xhdpi) one as MotoG or Nexus 4. For this case, you only need to divide by 2 the px value that he provides you to get each dp value.
You should take in account 3 Things:
Px - dp proportions:
Read this answer : https://stackoverflow.com/a/2025541/5884956 (actually the whole post is useful)
Percentage doesn't work for you:
What you improve by using dp instead of px is that for screens with same
aspect ratio and different pixel density, the layout looks exactly the same (dp-density independent pixel). It means everything inside the screen will look with the same proportions (buttons, imageviews, margins... etc).
Then, you would imagine all android phones have the same aspect ratio (16:9 for example). Which means that for every 16 dp of high, they have 9 dp of width , or in other words if you divide the height of the phone between the width of the phone will give you the same solution as 16/8.
But this is way far from the reality. The most common one is 16:9 but some phones like "Samsung Galaxy S8" have 18,5:9 and there are a lot more aspect ratios: https://material.io/tools/devices/. If you work with %, the time you see your design in a different aspect ratio, your items will look stretched. And this is not the desired.
Size does matter
By this time you should be convinced that dp is the best solution, if not, someone pease improve my answer. Buuuuuut, as the screen size vary, the number of dp also does. So for a phone of bigger dimensions (even for same aspect ratio) we have more dp. Then you should work knowing that some parts are going to be stretched (it should be the spaces between items and margins).
Ideally (Android Studio should do all this work for you) working with same aspect ratio , % of dp should be the mesure and when changing the aspect ratio
this changes must be reflected in spaces between views. But this is a hard work.
TL;DR
Select a standard device that designers are going to use to design (use a common one).
Tell them the design is not going to look exactly the same for every device (unless you design a different layout for each).
They need to decide which parts of the design are going to be the
stretched (stretch spaces and margins please, not buttons or images).
Let them work with px, they may feel more comfortable (meanwhile you must convert it to dp and work with dp). Also if you choose an 'mdpi' device dp = px.
Look at the layouts that allows you work better with this kind of the
designs ( I feel comfortable with ConstraintLayouts, but by working you will notice that this doesn't fit for everything ), but this is up to you.
Extra Information
https://developer.android.com/training/multiscreen/screensizes
I understand there is plenty of documentation about designing for multiple screen support in Android. and I have read the Android guide here as well as a number of similar questions such as this
However I'm still a little confused as to how I should implement it for my application. I plan to target the following device configurations
Am I correct in thinking I will need to structure the project layouts as follows:
Medium density Normal screens HVGA 320x480 (160dpi):
res/layout-mdpi (320 x 480 )
res/layout-land-mdpi (480 x 320 )
High density Normal screens WVGA800 480x800 (x854) (240 dpi)
res/layout-hdpi (480 x 800)
res/layout-land-hdpi (800 x 480)
But what about the Medium density, large screen devices?
I plan to use sets of both high and medium density drawables too. My primary concern at this early stage is using suitable background images for each layout. For example, to support both the 480x800 and 480x854 sizes, I plan to simply use an ImageView as the background such as:
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bg"
android:scaleType="center"/>
The 'bg' drawable will always be 480x854 and by using:
android:scaleType="center"
I'm hoping this will take care of those two screen sizes. Whereby the image keeps its original appearance but is centred on the 480x800 screens. I will lose some pixels off the image but as long as the image isn't scaled then that suits my needs.
I plan to have a set of 320x480 assets for the normal screens.
I'm just hoping I'm following the correct procedure here so I appreciate any info/tips from you guys. Thanks in advance
In my experience you don't really need to customize your layout for the small/medium/large/etc screens, as long as you have your drawables for the different densities. Like the documentation says, Android will attempt to render your layout properly on different screen sizes.
By default, Android resizes your application layout to fit the current device screen. In most cases, this works fine. In other cases, your UI might not look as good and might need adjustments for different screen sizes.
The 'other cases' applies only if you really want to change your layout on larger screens.
Using android:scaleType="center" works for me, but it will, like you said, leave empty space around your layout on larger screens if it should fit on smaller screens as well. If you have a fully customized view with 'widgets' that should be placed exactly right, and you don't want to be programmatically determining the scaling and applying the same scaling to your widgets, this is definitely the way to go.
Designer has given me a PSD file, He has created it for 1080X1920 resolution
In PSD he defines that the header height should be 52px, Slider height should be 350px and so on..
In layout when i write layout_height=350dp its taking a lot of height and covering more than half of screen.
I am using default layout to accomplish this task.
Kindly guide me how to define Height in layout in DP with respect to PX
Looks like there's a lack of designer-developer flow. The designs you were given are not mobile friendly (Android neither iOS). I recommend you to take a look to a couple of tools for a nice workflow.
Sketch
Zeplin
And please read this article you both:
Designer's guide to DPI
In Android you need to work in dps and you need the designs to be given in dps. In case you are given the designs in pixels you have to have the agreement with the designer that 1px is equals to 1dp, in other words, the designer is working on MDPI basis where 1dp is equals to 1dp.
So the easiest way to go is your designer needs to work in a screen that is 360x640 pixels instead of 1080x1920. Now you can forget about translating pixels to dps and the other way around because 1px would be 1dp for you. For your designer as well will be easier because he needs to go from guidelines to the design tool, and he doesn't need to translate dps into pixels anymore. Everytime he reads 48 dps in the guidelines (which is everywhere) he knows he has to read it as 48 pixels in his 360x640 canvas in the design tool.
Notes
360x640 is a common screen size in dps (Galaxy S5, Nexus 5 and many others) and because of that is taken as a reference now a days. Please realize your designer can not give you the exact sizes for every component in every layout size for every device. So things like the toolbar height (usually 56dp) is easy to translate to every device, but the toolbar width that you'll size in his designs (360 if you follow my recommendation) is completely useless for you, because that depends on the real device. The Galaxy S5 and the Nexus 5 are 360, but the Nexus 4 is 384, and the nexus 6, 6P and 5X is around 413.... and actually there's much more!!
Designing just for one device or one screen size is too simplistic and problematic. Be aware you have to develop responsive layouts ready for a multiwindow.
I'd like to ask about one of the hardest thing for me (as a programmer) in android. As I make software mostly without designer (to be honest - totally without a designer) I can't figure out the following:
When I draw a png I use px (not dp) as image width.
I drew a button image with the following sizes:
hdpi: 318x45
mdpi: 212x30
(6 to 4 ratio)
and I would like my button be 80% width of Galaxy s2 which is
Screen Size in Pixels: 480 Pixel x 800 Pixel Screen Size in dp: 352dp
x 587dp
But also I would like to have the same width (80%) for hdpi 10' tablet. Is it possible or I'm missing something?
And is it possible to make 80% but not more than XXX pixel width?
You just need to provide different size images for different screen sizes and densities. When you think about it there's only a few different formats you need to worry about. You will then just create an "80%" size image for each of those formats, place them in the seperate drawable folders, and use them accordingly.
The android docs on supporting multiplce screen size and providing alternative resources are actually pretty comprehensive on how to do this.
Otherwise I'm sorry you don't have a designer. My tip - make your icons originally in Adobe Illustrator if you have it that way you can easily scale them to whatever size you need. As vector images they won't lose quality so you can change the size all you want. When you're ready, just export for web and devices at the size break points and you should be fine.
You have to use the android:layout_weight attribute.
Details outlined in a similar question here
I'm trying to support mdpi, hdpi and xhdpi on my current App. The problem is that I'm fetching images from the web (profile pics). I'm using an imageview with height = 200dp the thing is that even tho I have read tons of tutorials and documentation about dp and dpi, I still don't get them.
So my problem is that on an hdpi phone (atrix 2) the image takes about 1/3 of the screen, which is perfect for me. but on mdpi (galaxy ace) it takes almost 2/3.
What's the best way to set a height for an imageview (from the web, not resources) to support mdpi and hdpi.
thanks
<ImageView
android:id="#+id/expositor_image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="#+id/expositor_info_header"
android:layout_centerHorizontal="true"
android:layout_marginTop="-27dp"
android:contentDescription="#string/misc_placeholder"
android:scaleType="centerCrop" />
basically my problem is that the 200dp takes different % of screen on mdpi and hdpi
For starters, you are going to want to set a scaleType (try "center_inside") in your xml definition of the ImageView.
If you provide some code (in particular your layout xml file) I might be able to be of more assistance.
Update
Now, this may not fully be your problem, but it is a piece of it. DP (or DPI, they are the same thing) adjust for the screen density (pixels per inch), not the screen size. That means that an image of 200dp x 200dp will be approximately the same size in inches on both screens, not the same percentage of the screen.
Specs:
Atrix 960 × 540 (https://en.wikipedia.org/wiki/Motorola_Atrix_2#Features)
Galaxy Ace 480 x 320 (https://en.wikipedia.org/wiki/Samsung_Galaxy_Ace)
Since the Atrix is hdpi, and hdpi is a 1.5 multiplier, 200dp will take up 300px in real pixels, or approximately 1/3 (300/960) of the screen as you point out.
On the mdpi Ace, the 200dp translates evenly to 200px, which should be closer to 1/2 the screen. However, with the addition of the actionbar taking up screen real estate, it may seem like more.
The best way to deal with very small screens like the ace... well, my normal solution is to not support them very well, at least not on my first pass, as they are pretty rare. But if you want to, the best way is to provide alternate layouts.
For Example:
Create a folder named layout-large (or similar, see: http://developer.android.com/guide/topics/resources/providing-resources.html#Compatibility).
Make a copy of your existing xml file in that folder. (name must be exactly the same)
Modify the file in layout/ so that it works better on smaller screens.
Essentially, if the device has a "large" screen or above (where large is basically the standard these days), it will use the layout in the layout-large/ folder.
Otherwise, it will use the default layout in the layout/ folder.
If you think this explanation is not what is happening, please provide screen shots to verify that the layout is in fact not behaving like it should.