I've created an android app and have started testing it on different devices, but I've come across a problem.
My app has numerous dimens.xml for each density qualifier, but a couple of phones I'm using (Huawei P20 pro and P9) both use the dimens.xml from the xxhdpi folder, but these phones are very different in physical size/resolution. This has meant that on the smaller phone I'm getting couple of text views overlapping which doesn't look good.
The text strings are defined in sp, and all margins using dp. The textviews themselves are centred on guidelines which are defined as a percentage of the screen.
Here's a rough sketch of my layout. The textviews are in red and green, and the thin blue line represents the guidelines.
Are there any sneaky tricks I can do to get around this? The only thing I can think of is to reduce the text size and margins in the dimens.xml, but then that makes it looks worse on the larger screens (which is likely the majority).
Ideally I'd need some kind of logic in there that says if these two views overlap, reduce a margin to Xdp, or change this guideline percentage to X% etc.
EDIT I'm using a constraint layout, and there's currently no constraint between the green textview and the bottom red textview. I can constrain the bottom of the red textview to the top of the green textview; this solves the overlap but then it drags the red textview down on the larger screens which looks rubbish
I can constrain the bottom of the red textview to the top of the green textview; this solves the overlap but then it drags the red textview down on the larger screens which looks rubbish
Set the bias on that constraint to 0.
you should use layout_constraintBottom_toBottomOf
reference https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout
Related
I have a problem with layout being cropped when displaying on screens with curved edges. I have a simple layout with some edittexts and a button. The edittexts are cut off on the left side and it only happens on Samsung Edge devices. Can someone know how to deal with these curved edges screen, because adding larger margins seems like a workaround and on flat screens wouldn't look well .Couldn't find anything useful about the issue,.
Thanks in advance.
I believe there are 2 possible solutions to your problem.
WindowInsets: They describe a set of insets for window content. They make it easier to display your UI while taking in to account the system UI and factors of your display.
Guideline: If you are using a ConstraintLayout as your base layout, using guidelines as your horizontal bounds make it easier to design a responsive UI. For example you could set a horizontal guideline at 0.05 percent and another at 0.95 percent, which would keep you content away from the edges, while also keeping your UI responsive at various screen sizes and densities.
Many app's, including the swipe left Google Now screen have a colored background and very large margins to compensate for the small amount of data on tablets, particularly in landscape.
Are there any standard dp dimensions for these margins on particular devices?
I'm aware of the activity_horizontal_margin but it's far bigger than that.
There are Design Guidelines available for Android Application.
Baseline grids : All components align to an 8dp square baseline grid for mobile, tablet, and desktop. Iconography in toolbars align to a 4dp square baseline grid
List : A two-column, left-aligned list with a 56dp floating action button.
Detail view : A detail card with a 56dp floating action button.
For e.g.
Above link contains all information regarding your question.
Better go through it.
Thanks.
I have a custom button with a state list drawable that has a tight layout with very little padding. This button looks great on MDPI and HDPI devices, but padding is all wrong on my Motorola Xoom (ICS, MDPI device). Modifying the 'padding' and 'margin' attributes does nothing.
Anyone have any suggestions on what may be causing the unnecessary padding? I'm fairly confident that both the state list drawable and the 9patch drawables are fine (they render perfectly on other MDPI devices).
Attached is an example of what the final product looks like - green border denotes its ideal appearance (and the way the button looks on other devices); magenta border denotes the appearance on the Xoom.
I encountered some situation when developing a appwidget. I added a button and try to trim all paddings of it to make it small but failed, there are always a top padding and a bottom padding. I believe it's a constraint of Android system, so that all buttons in appwidget are large enough for end users to tap. However sometimes we insist small buttons due to boss... As the workaround Melllvar indicated, I used a focusable, clickable TextView instead of a Button, it works as expected.
Basically I'm developing a user interface similar to this:
http://ivitto.files.wordpress.com/2008/09/tap-tap-home.jpg?w=160&h=240
Where there are a series of buttons stored in a linear layout. My problem is at the moment they are centered along the x axis and the y axis so they are in the middle of the screen rather than in the lower half of the screen as in the image. The only way I can get what I want to work is by adding 100px or so "top padding" but of course the amount of pixels required is entirely variable on the screen resolution. Whilst this 100px is fine for a 480x320 screen it is far too small for a 1024x600 screen. So basically I'm asking how can I align my linear layout at the bottom of its parent (another linear layout)
Have you tried setting the gravity parameter of the linearlayout to bottom ?
Yes, try gravity bottom.
And by the way. You can use "dip" (density independent pixel ( http://developer.android.com/guide/practices/screens_support.html#density-independence ))instead of px for the padding. Although setting the gravity is surely the nicer way in this case...
I'm trying to create some 9patch images that have some text as their content. I define the stretchable area with a black pixel line top and left. And I define the content area with a black pixel line right and bottom.
However, it seems as though Droid is adding padding to the top and bottom of the content area, messing my layouts up. Has anyone else experienced this?
You say you're putting a black pixel line for the top and left? For the top, you should place just a single pixel for the stretch point. For the left, you can place either one or two pixels (two if there are two separate places you would like to stretch). Let me know if I am misunderstanding you though.