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.
Related
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
so I'm making a really simple app that just shows some buttons and images,
it looks great on the simulator (because I guess that's the resolution I've been working on ...)
but when I try to build it to my phone it looks differently (the buttons are more stretched out and there is allot more background space in between the buttons and the end of the screen,
I guess it's something that's suppose to be simple but how to I make my app "zoom stretch" to the phone content it's going to be on, meaning it will look the same on any phone and if necessary will stretch the image a bit to fit the screen ?
Thx
In your XML, its important to not use specific(dp,px,etc.) sizes for laying buttons/text boxes/etc. out. For example, for a button thats on the page, use a "layout_width" of "match_parent" and add padding (if necessary from there). This will allow your button to stretch properly without having that extra whitespace.
I'm developing a game, my background has 1920x1080 resolution.
It looks fine when on a device with hardware buttons (Galaxy 5), but on Nexus 5 (with software buttons) the background is visibly shortened (square looks like a rectangle now), because the softwarte buttons take some of this resolution.
How can I handle this situation? Can I make soft buttons "overlap" my activity and have some gradient instead of black background?
As an option can use notlong qualifiers for layout and resource folders.
e.g. devices with software buttons will use the resources from layout-notlong folder if exists.
This is a possible duplicate of this. I think what you need to do is to set your main container's bottom margin to whatever value you get from the virtual buttons' height. Good luck, I did it this way and it works fine for me.
We have started integrating ActionBarSherlock into our app. Everything looks great, it's a really great lib, that gets in easily. But, there's one issue we don't know how to solve:
Some of the icons on some pages for larger screens get stretched. Has anybody had such problem?
Upd. 1.: Device that has icons stretched is running on Android 4.2.2 (it's Nexus 7 actually). All ok on a smaller screen like HTC Desire (2.3.3).
Upd. 2.: As the example of what is happening: there's an icon of a size of 48x52 pixels. It is in the "drawable" folder. It is used as the background for a Button widget. Before the update the app used this icon as is, i.e., it looked like 48x52. Now, looking at the element borders it looks as if the app is stretching the widget's width to be 52x52 or even wider, keeping the height same. layout_width, layout_height are set to "wrap_content"
Ok, using this answer I managed to fix -
changed all the Buttons to ImageButtons
all the android:background-s to android:src-es
android:background-s set to 'transparent'
But! I don't know why it happened and why it worked! Any clues? Thank you!
NinePatch:
Screenshot:
Layout XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#ffffff">
<LinearLayout
android:id="#+id/edit_tray"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<View
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/trash"/>
</LinearLayout>
</RelativeLayout>
Desired Results:
The "edit_tray" represents a UI element that will be toggleable. When edit mode is off, the "edit_tray" (and therefore the trash can icon) are "gone". When edit mode is on the "edit_tray" is visible and overlaid over the ScrollView contents.
There are two elements to the trash can icon: The icon itself and the linear gradient behind it. The NinePatch image contains three stretchable areas and one static area to accommodate these elements. The trash can icon in the middle of the graphic is static and should appear directly in the horizontal center and on the bottom of the screen. The gradient should stretch across the bottom of the screen from one side to the other.
The Bug?
The NinePatch image contains only one pixel of stretchable area on either side of the image horizontally. The effect of which should be that the trash can icon appears directly in the center (1 pixel on left side == 1 pixel on right side). However, as you can see in the screenshot above that is not the case. Note: this screenshot was taken from my test phone, a T-Mobile G2. The same effect can be seen in the emulator. However, in the draw9patch preview and the eclipse Graphical Layout view the image is perfectly distributed.
I've tried several different methods to try to find out where the bug is and to try to fix it or work around it. Including: using ImageViews instead of Views (same effect), using android:scaleType="fitXY" (same issue), checking at runtime that the width of the screen and the width of the "edit_tray" are the same (they are), using two different images for gradient (as edit_tray background) and icon (as ImageView src) (create another problem where the two images were not overlayed on each other. Fixed by setting an absolute height on both), etc.
The Answer, the Workaround, and the Real Question
I did some testing using some simple NinePatch images with up to six stretchable areas per side. I noticed there were some issues displaying them in at least one of the testing cases (phone, emulator, draw9patch, Graphical Layout in eclipse).
I decided to try to expand the image horizontally so that there was more of the linear gradient showing on the edges of the trash can icon. I made the image 128x64 (previously 64x64). I made more of the edges part of the stretchable part to try to curb any bad math (?) that was happening to the image. Draw9patch reported bad sections so I put it back to just the two pixels, one on either side. It worked! The icon is directly in the center of the screen now! I don't know why, but without changing the actual stretchable portion of the image, only changing the width of the image to 128, it works now.
I tried resizing the image back down to around 100px wide to remove some of the redundant pixels and the error came back! Not only did it come back, but the icon was placed at exactly the same spot offset from the center of the screen. I can't figure out why this would happen this way.
Anyone have any ideas? Is this a bug?
I currently have this working given the workarounds I described above, but if anyone has any suggestions I'm listening.
Make your 9 Patch image with using 4 points as I have done in this..and it will work.
Tips for Creating 9 Patch Image.(not a designer,telling you my funda)
Put points on Left and Top
If you have some text or image in between ..then put point on left
and right of image and top and bottom of that image or text.
Always see the no of space left and no of points on both sides(left-right and top-bottom) are equal.
Always check once the preview or right side before using check in 2x
to 6x
From my experience with the draw 9-patch tool there is an automatic 1px offset on each side of the image. Given this information if you were using just this one pixel offset your image was actually not being stretch the way you would imagine.
This can be seen by the fact that when you used a 2px offset it worked perfect.
Also the 9-patch images have a tendency of showing up in eclipse exactly how you would think... but then appearing different on the phone/emulator.
Learning the 9-patch tool is def a great thing as it allows greater customization. Another tip, if you want to do something like replace any android 9-patch with your own alterations - then just copy the 9patch that exists in the SDK and alter it. For some reason 9patch images in the SDK have weird offsets. Doing this will guarantee you don't get weird responses from your 9-patches. An example of this - I outline an editText in red when bad input is given.
The SDK images can be found in SDK->platforms->[plateform-you-want]->data->res-drawable-[you-choice]
You can also look at the SDK 9-patch images to help understand how the 9-patch-tool works.
Hope this give a little more insight.
Here are some good links:
http://developer.android.com/guide/developing/tools/draw9patch.html
http://android10.org/index.php/articlesother/279-draw-9-patch-tutorial
http://jaanus.com/post/7878186745/how-does-androids-nine-patch-tool-work-from-a
Maybe it's bug in nine-patch drawing, or just error resulting from rounding.
However, I don't like your approach of drawing this icon. You try to position your screen element using something that is not designed for this task.
You should draw it other way: create some container view (FrameLayout) with gradiend background. Then on top of that position ImageView with trash can. Neither of these 2 images need to be nine-patch, gradiend would fill entire view, trash can would be drawn without scaling.
Although there's overdraw in area of trash view, CPU time is not wasted in nine-patch areas computations.
You would use layout system for exact positioning of your trash icon. Certainly you would get expected result, since UI layouts are well tuned, and made for purpose of positioning screen elements. Nine-patch images are used for other purpose (where pixels shifted here or there a bit should not matter).
As #jjNford said - it's bad practice to work with images in this way.
For this task the best solution is to create "trash" icon with transparent background, and create shape drawable with gradient. So, you can remove unnecessary LinearLayout and use only ImageView:
<ImageView
android:id="#+id/edit_tray"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:src="#drawable/trash"
android:background="#drawable/gradient_background"/>
Docs for shape drawable.
EDIT
Just check your image - it starches fine on SE Xperia 2.3.3