I'm creating a Dialog, setting a content view with two Buttons, and displaying it. Oddly enough, even though I properly centered it vertically and horizontally, on the Droid X extra blank space appears at the top and on the right side.
I discovered the top is reserved for the Dialog title; even when that title is blank, the space is kept empty. The workaround there is easy enough--I set a title.
The right side, however, baffles me. When I test the same app on other devices it works beautifully; the Droid X, however, keeps the right side of the screen empty. When the root layout of my Dialog's layout has a width of match_parent or fill_parent, it does not extend to that empty area. However, if I manually set a fixed large width, it does extend as far as it needs to--no more empty space on the right side. That's hardly an ideal solution though.
Does anyone know how to get around this Droid X layout quirk so Dialogs do not have that empty space on the right side?
After some experimenting, I found that if I change the margin and/or padding sizes, suddenly the Dialog becomes centered! For example: margins of 4dp creates an offset. But making the top, bottom, left, and right margins all larger and different makes the problem go away.
This sort of behavior generally means one of two things: There's a bug in how the layout is drawn, or I have a gross misunderstanding of how these things work. Both seem equally likely.
So my answer is: play with the margin (and padding) numbers. It's possible that you can find something that both works and is aesthetically pleasing.
Sorry, I know this answer sucks. So it goes.
Related
I may have a stupid question. But this problem always annoy me.
I always design some View (TextView, ImageView, Layout)
and give them a fixed size, like 300px x 300px.
But when they move out of screen, they always get resized, instead of just being cut.
I have designed websites and programmed in C++ before.
I always paste Image or Text with negative coord, so only part of them can be shown.
But In android, I tried different scale mode, and they only fit for some situation.
I wonder is there any perfect solution?
Here is the example:
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.
The Android Toast class provides methods to get and set margins. I'm pretty sure they refer to the outside margins for the whole toast message. Since Toast messages float over the UI, why exactly are these Margins necessary?
I tried looking over the SDK reference as well as searching the Internet. The closest thing to a solution I found was a one line suggestion that both margins and offsets allowed control over the positioning of a Toast. Why would I need two methods (albeit conceptually different, since margins allow specification in terms of percentage container width), to control the positioning of the Toast?
Just to be sure, these margins don't work like padding for other layouts does it? That would not make sense, but I'd like to be clear.
In sum, I want to know why margins are needed, what margins do, and the use-cases for margins versus offsets, that is, when should I use margins, when should I use offsets, and why?
Update:
I haven't managed to find any answers yet. I've tried using margins versus using offsets in code and found that they seem to offer two different paradigms of positioning the Toast. The design intent (why two methods), when I should use one method versus the other (or at least examples of when one was found more useful than the other by other programmers/UI designers), and even the exact operation (do margins "center" the toast inside them? are margins applied against the closest container edges?) of these methods remain unclear.
Update 2:
I looked at the docs closely, and also at some code for Toast.java that Google pointed me to. What became apparent is that the Toast is contained within a Window (Activity window?) and that it might be an overlay. The WindowManager.LayoutParams class has also provided further clues. I've decided to play a bit more with using Toasts, offsets and margins, as well as look at the code from the AOSP to get a clearer understanding.
I'll update here as I discover more.
I believe the margins determine how far the toast appears from the screen edge. You can also call setGravity() to change which side of the screen it appears on, and then use the margins to control how far away it is from the side of the screen. So for example:
myToast.setMargin(10, 20);
Will create a toast that has 10% of the containers width between the edge and the container, and 20% of the containers height between the toast and the containers edge
To create a toast that is in the top left corner of the container, with a 10 pixel margin on the left and 20 pixel margin from the top:
myToast.setGravity(Gravity.LEFT| Gravity.TOP, 10, 20)
I have a fullscreen view which I partially move in and out from the phone screen, let's say to the half of the screen.
To do this I am using MarginLayoutParameters to set the top margin to half of the screen, or to 0 in case I want it to be fully visible.
Everything works perfect but now that I am testing on other phones, which seem to be the ones of low resolution, the view is correctly cut by half but is always aligned to the top.
Trying left and right margins also always aligns it to the left.
Am I missing something that newer phones/ Android OS already does for me?.
This view is inside a FrameLayout.
Thanks in advance.
Well I just used setPadding with the same results I wanted to achieve, but my question still remains.
The image is what i'm trying to achieve. I tried using tab layout, relativelayout and linearlayout (and even a combination), but in no scenario i got it exactly right.
The requirements:
no overlapping of any component
no clipping of the image in the button (the green one)
the red bar is always at the bottom
in landscape, the components should still be in their same place, but you can scroll down
If required I can paste my current variations of the different layouts, but they are all rather big and messy.
Professional insights on which layout approach you would use is also appreciated, at least i can keep trying using the right things then.
At the moment, the orange things are normal buttons, defined like so:
<Button
android:id="#+id/btn_web"
style="#style/NewButton2"
android:onClick="webClick"
android:text="#string/Text_Web"
android:drawableTop="#drawable/jc_menu_web"
android:layout_weight="0.3"
/>
This is a problem on its own,because if you stretch the buttons using fill_parent, the result is that the image will be high at the top, whereas the text will be entirely at the bottom.Would be nicer if it were a centered image in the button.