I've been working on an android application on Titanium lately and i've come upon an issue.
What i'm struggling with is making a specific view responsive.
I want to show like 15-20 buttons on a view but i don't want it to be scrollable.
Now if i use around 50dpi which is the recommended for buttons on some smaller screens i miss some of them.
How should i approach this? Should i use % of the device width and height which i get like
function PixelsToDPUnits(ThePixels) {
if ( Titanium.Platform.displayCaps.dpi > 160 )
return (ThePixels / (Titanium.Platform.displayCaps.dpi / 160));
else
return ThePixels;
}
Ti.App.deviceWidth = PixelsToDPUnits(Ti.Platform.displayCaps.platformWidth);
Ti.App.deviceHeight = PixelsToDPUnits(Ti.Platform.displayCaps.platformHeight);
Should i create say 4-5 different views and load the right one according to the user's DPI?
What's the most correct way to approach this.
THanks
I don't know if it is what you want to archive but you can work with android:layout_weight.
If you got 2 Buttons and both have a weight of 1 each of them will always cover 50% of the screen. Weather or not my answer helps please post your xml so we can be more specific about your Problem.
This is what I follow:
Get the aspect ratio(width/height) of the button so that it is not squished or stretched.
Divide the available height by the no of buttons. Add some top and/or bottom padding. This is the height of each button
Width of button=height*aspect_ratio
This way you can fit buttons on any screens including tablets
Related
I'm writing my first Android-App. The App should solve Sudokus for the user.
So the interface should look like the typical Sudoku-Layout with some Buttons down below. For the number-fields i just used EditTexts.
At first i used a ContrainsLayout. That worked fine so far but the problem is that the editTexts on the right are not visible anymore if the screen of the user is too small.
I use a fixed height and width of 40dp for the editTexts and a constraint of 1dp between the editTexts.
But i cant get it to work that way on different screen sizes.
So i used the GridLayout. There problem here is that i cant get the whole thing to be in the center. And besides that i dont know if its possible to stretch a TEXTview over multiple rows?! I would need this to show the errorText in case the sudoku isnt solvable.
I hope someone can help me out or at least give me some ideas :)
Thanks in advance
If you want the same result for different screen sizes the recommendation is constraint layout but the reason you don't have the same result is that you used hard coded width and height and on different sizes you need to change the size that you hard coded.
The best thing to do is to make separate xml files for screen sizes
for more info you can see here: how to have different sizes supported
One of challenges in developing android applications is compatible app's UI with different screen sizes, Now i'm using smallest width in dimens and specifying sizes in DPand SPfor multiple devices for make my app UI compatible with diffrent screen sizes which solution is better than using smallest width to compatible app's UI or what is you solution for that?
I think, there are many ways to achieve this what i have learned in two years I can summarize here,
Use in-bulit width height - i.e. Match_parent and Wrap_content
For fixed width height - One can you Linear layout and divide it in screen %
If there are shape which need to be shown like circle or anything create layout, or instead of using images for gradient create them
Try to minimize use of images and incase use
them, put all vectored images in respective folders.
For some layouts - Like showing circles overlapping as per width , try to do
that programmatically where need to get height and width of screen and
then need to lill bit of math to make it dynamic
Use dp for widgets and views height width parameter Use sp for fonts
Put all in style,dimen respective pages and use from there
There are many standard things which need to keep in mind while creating UI like heard size is 44dp etc. https://developer.android.com/guide/topics/ui/look-and-feel/
So its just matter of experience just avoid fix values and for even for simplest things google how other ppl have done it try to get their views and you're good to go.
I am migrating from Android to iOS (Swift). In Android UI elements are scaled up or down (height and width using "dp", layout_weight e.t.c) according to device size.
However I find this VERY difficult to achieve with Auto Layout's constraints, I want the elements in my UI to scale according to device size.
For example, in the shared image below, asides the compression of images to fit the screen width, every UI element has the same size, only looks like UI elements have been duplicated with same specs on all screens
This might help others in their migration from Android to Swift
(I only pinned the width of the 2 ugly ImageViews below)
P.S: This is what I'm trying to replicate guys, this view to fit properly on all screens. Sorry for the blur, I'm not in charge of this project
There's a zen to the AutoLayout. Let me see if I can give you some direction.
You'll want to test every UI on the smallest simulator available (iPhone 4S). This will let you know if you need to adjust your elements' minimum size.
Now for a top-to-bottom review of your UI posted:
"Profile" looks fine
To make the top-left and top-right boxes resize with screen size, you'll
want to give a constraint to the superview on left and right sides respectively. Then you'll want to make a horizontal constraint between the two (to maintain a space between them. Then you'll want to set them to equal widths. You can also set aspect ratio constraints for each one.
Your forms look fine. I can give more guidance here if the look you're after doesn't match the image you posted.
For the views below the form, you'll probably want to follow #2 above.
As for the height issue, set a constraint from your bottom view to the superview's bottom. There might be crowding, interface builder might yell. Chances are, you'll need to set the horizontal spacing constraints from = to >=.
I have a design that I need to follow in my app. In it there are several buttons, images and textviews placed all over the screen (some are aligned to the left, some to the right, some are centered etc). What I need to do is make all those elements appear EXACTLY as they are in the design image. The problem is, if I try to do this using dp, it can be wider or narrower than the design image specifies, and it depends on the properties of the screen. (I've had an app where I did it all in dp, and on my high-res phone it works perfectly, but on my friend's older phone it cuts away the edges of the activity)
My question is, what elements do I use for this? I've heard of using weight in Linear Layouts, but how to make items different width and height and position them all across the screen how I see fit? How to make sure it looks exactly the same on all screen sizes?
Thanks in advance! :)
Edit:
The point is, I need the buttons to be just as they are on the screen (this will be a listview element, I'm trying to make an xml for it). The distance, proportion, everything, it needs to scale to the width of the screen and be this size and distribution. And, I'm not just looking for a solution to THIS particular problem, I want to learn how to do it in general...
You don't. For very large and very small screens, you use separate layouts that scale the sizes, completely drop parts of the UI, or lays it out in a different manner. It's absolutely silly to think you can fit all the stuff on a 10 inch tablet and a 3.5 inch phone. If your designer expects that, tell him he's an idiot and he needs to get back to work.
For a more general answer on the best way of laying things out- it depends on the effect you're trying to get. You should never use pixel counts, and dp should only be used for small things- a bit of padding between 2 fields. Most things should be done via layout, either by using a linear layout and getting things in rows/columns, or a RelativeLayout and describing how to layout views relative to their siblings. But even with these tools you will not be able to fit on all screens and look good.
Is it a bad habit to get the width and hight of the device and set images/button sizes programmatically accordingly.
I find it inaccurate to use different folders for layouts and densities as it gives me wierd results on some devices (on top of the inacurancies)
Your experience is appreciated.
Thank you
Yes it is very wired thing to make the layout for the all supported screen of android. And there are lots of screen resolution available in market.
Once i have made a Demo and it Works for me. I have made one Button which height and Width is same. Now i have set its required height and width as per the one Screen in which it is looking perfect.
After that i have calculated the pixel that it required to make it Possible in that screen and based on that i have applied it to all screen.
Now it works great in all device with any density and resolution.
So if there is any view that generate at run time and you want to set its height and width then the best way is to calculate its height-width ratio and use it.
hope it will helps you.
Enjoy Coding. . . .
:)
Well, most of cases you will have layouts which are, or will become, complex, and it will be difficult to calculate the positions programmatically.
And it will be also a disadvantage mantaining it, because you will not be able to use the interface stuff (grafic layout and so on), and other people, or yourself, will not understand the calculations the same way they would if they see the views in XML. Reorganizing, changing somewhere a position could be painful.
You also will be working frequently with bitmaps, which have a fixed size, if you calculate the dimensions programmatically and stretch they will not look good. At least you would need different set of bitmaps and load accordingly.
It helps if you for example use relative layouts with rules (like above of / align at the bottom of the parent, etc), linear layouts with weights, and dip (density independent pixels). You should do programmatic layout only when it's not possible in other way. Or in some certain cases where it really-really makes things easier.