I made a UI with many UI elements such as button and it takes a lot of space vertically.
The UI fits on my phone (it's 16:9 like many), but on phones with a different screen ratio, the buttons on the bottom are cut off of the screen.
I'm using a linear layout. How do I fix this?
Instead of trying to create a UI that is like an image and displays at a fixed aspect ratio, start thinking about designing for resizing. To accomplish this, you need to make decisions about what in your layout must be fixed in size, and what can acceptably resize or scroll.
Importantly (and this is my own stylistic opinion), you should avoid layouts that clutter the screen or fill it with detail. Your layout sounds like an input form of some sort; one solution in your case might be to let the controls in the upper part of the menu scroll, while anchoring the buttons at the bottom of the screen, or to just place the whole layout in a scrolling view. But ask yourself: will this be user friendly? I suspect this solution will look dense and (on really small, resistive displays like that of the LG Vortex) become hard to interact with.
Try to separate your UI into easy to comprehend little "nuggets", omit unnecessary information, and if you must, split the UI into different activities or fragments.
Related
I have a screen in my Android Application that only takes up one screen. Because of this, I thought it would be really quick and easy to just use LinearLayout as my base layout:
I thought this would be good. However, I am thinking, what if someone uses a 2.7 inch screen on their smartphone? Or they do split view. They might not be able to see everything without scrolling. So, is it good practice to do the layout the way I am doing it or is it always good to allow the user to scroll to see everything?
Since many different devices exist, some with very tiny or otherwise abnormal screens, it is a good idea to make the layout scrollable when needed.
This is achieved by encapsulating your layout in a ScrollView.
Other popular methods to tackle this are using ConstraintLayouts, or the legacy Relativelayouts, which are placed relatively to each other, and relative to screen borders.
What if a layout gets partially off-screen? Maybe it is no big deal, but maybe it hides an essential part of the layout (e.g. a 'next' button, or some important information). So yes, your worry is justified.
As I believe it is good practice to make an app work on as many different phones as possible, I do believe it is good practice to make sure a layout does not appear partially off-screen.
With all the various screens sizes (both portrait and landscape) is it best to wrap conventional layouts (RelativeLayout, LinearLinear, etc) with a ScrollView if there is even the possibility of content extending below the screen? Is there a better approach?
Update Question: What about custom inflated Views? Does the same approach apply?
I don't think I would go as far as saying that wrapping every LinearLayout with a ScrollView is a "best practice".
That said, in my own experience, I have often created layouts that use ScrollView + LinearLayout even when I know that my content will fit on most phones. I've done this because (1) I want to support both portrait and landscape orientations (and landscape often does not have enough height to display everything) and (2) because I want to support any device my users might have (and some people do have really tiny phones).
The trick is to differentiate between cases where your LinearLayout is just chopping the screen up into pieces vs cases where your LinearLayout is a parent to some number of views each with their own fixed height. Two Buttons next to each other, each taking 50% of the screen width, obviously don't want a ScrollView around them. But a form of eight EditText fields on top of each other might do well to be wrapped in a ScrollView, even if all eight fit on your personal device's screen just fine.
The downsides to having an "extra" or "useless" ScrollView on larger phones is so tiny that I've never worried about it. A single extra View instance isn't going to hurt performance or use up too much extra memory. The upside of making your app usable on tiny screens, though, is well worth it.
There are few possible cases:
If your layout is a static layout, just buttons, text views etc., then you can just preview different screen sizes within Android studio and verify that the layout works fine for the devices you support.
If your layout is dynamic, like ListView, RecyclerView that gets dynamic data set, it is always a good idea to make ScrollView as the parent.
Does that answer your question? Please reply if further explanation is needed.
I am trying to create an android app where I have a single relatively big button in the middle (the light blue in the picture) and it is surrounded by other smaller buttons as shown in the picture (some of small buttons might be visible or invisible based on some criteria).
I started with the RelativLayout setting the big on in the center and making the rest placed in relation to it, but it is a miss and the central button get shifted and doesn't stay in the center. I tried placing them in FrameLayout and used margin to adjust their locations, that worked the best however, the spacing changes on different screen resolutions.
So what is the best way to achieve such layout that will look consistent on any device?
Android's Percent Support Library allows you to use proportions to lay out your views, which may allow you to get closer to your goal.
http://developer.android.com/tools/support-library/features.html#percent
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.
working on an app and The way I want to set it up is different than what I have ever done before. I want the main activity when launched into the app to exceed past the boundaries of the physical phone screen, and for the user to be able to swipe out to parts of the app that they can't originally see.
I am not sure what the terminology is or what methods or classes etc to use. Any info that could point me in the right direction would be great! Thanks!
Just some clarification:
I think what I'm trying to say is the second thing you talked about. Imagine if you place a iPhone for example in the middle of a piece of computer paper. What I want to achieve is to have the whole view the size of the paper, but only be able to see the size of the iPhone's screen at a time. So you can go up a little bit and see what was above the screen, or left or right
If you want more screens and be able to switch between them, use ViewPager.
If you want one large view bigger than screen, you can either combine ScrollView for vertical scrolling and HorizontalScrollView for horizontal scrolling, or make some custom View, which will be able to scroll (you have to implement it on your own) in both direction.
If you want to have just some views outside of the screen and bring them to visible area on some event, you can use RelativeLayout and set to its views proper margin.
If you want something else, add more information, how it should look and act like.