Weird artifact showing through nine-patch button - android

I have created a simple 9patch to use for my button graphic.
When I view it as part of the layout editor, it appears to look okay.
However, when I run it in an emulator I get this ugly looking artifact/relic around the bottom left/top right corners.
Does anyone know what causes this, and how I might fix it? I'm currently applying the 9patch using the android:background property.

First, I think, you should test it on real device. I had similar problem with AVD. When I connected my LG everything was OK.

Related

9 patch buttons with image android

I have downloaded Google and Facebook 9-patch button files and added them to my app.
It all seemed surprisingly straightforward, as it seemed to work just fine with just setting button background to the 9-patch file and setting some text. Here is the result:
The thing is, when I previewed my app on device with Android 4.0 and 4.4, this is the result:
What can be done, to make the buttons in Android 4 look like the ones in Android 5?
The reason for the buttons displaying wrong could be that the content area in the 9-patch file is wrong. You could try to open the files with the draw9patch tool, that is describe here. Then you can adjust the content area by adding to or removing from the black bars on the right and bottom.
Alternatively you could try adjusting the padding of your buttons
I have actually found a solution.
I used style="?android:attr/borderlessButtonStyle" to get rid of borders. For some reasons, it overriden the padding for buttons in version 4.
Once I changed it to style="#style/Widget.AppCompat.Button.Borderless" everything worked just fine.

Android Preview vs Emulator Layout Size

Folks,
I cant design my android screens and see it on my emulator somehow the resolution, zoom (whatever) in the emulator is big and my layout is messed up.
The whole layout is inside a FrameLayout, the paragraph text in the emulator pic is inside a RelativeLayout, which is set to GONE after users upload rating, then LinearLayout shows up with the overall rating bar in the some place where the RelativeLayout was.
My question is why is this happening since in the preview it seems perfect and on the emulator it seems all messed.
Please see the screenshots:
Android Studio Preview:
Genymotion Emulator
It is really hard to determine what exactly is wrong without seeing your xml markup.
Possible Reasons
You gave your layouts some sort of fixed size, and therefore it appears to be fine on your markup, but whatever you are emulating on Genymotion is using a different ratio.
When you do a View.GONE, you say you are replacing a RelativeLayout with a LinearLayout. Well, do you make sure that the layout that is replaced is layoutAbove whatever that frame layout below it is?
Some layout just has some attribute, like an alignment issue, that is causing this.
Trace your steps backwards, removing one thing at a time. Get it to work with that view gone first, then add it and manipulate it after.

ActionBarSherlock leads to icons get stretched

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!

working with android 9 patch file not working

I have been trying to change the color of the gray that surrounds my custom tabs, I have tried looking for the answer on YouTube:
http://www.youtube.com/watch?v=IfrXE2R2nqM
http://www.youtube.com/watch?v=XMWlRXfKgtY
This helped me understand the process of 9-patch files but I must be doing something wrong for this not to work.
What I have tried doing so far:
In my project I see in the "Package Explorer" I see Android 4.1, which is in ...android-sdk/platforms/android-16. I opened that with winrar, went into res/drawable-mdpi and just to see if anything would change I replaced "tab_selected.9.png" and "tab_selected_v4.9.png" with the image of "tab_pressed.9.png". I then tried to compile my project just to see the same gray for the background of my tab buttons.
The current android project I am working on I placed the changed "tab_selected.9.png" and "tab_selected_v4.9.png" inside of my drawables folder and tried running it just to see the same thing.
Does anyone know what I am doing wrong, am I not compiling something or do I need to mess with different .9.png files? Or does anyone have a simple process just to change the gray color of these tabs? I guess the quick answer for me here is what would I have to do to get the image of "tab_pressed.9.png" to replace "tab_selected.9.png"
EDIT:
tab_selected.9.png
tab_pressed.9.png
Make sure the only pixels in the border are the 9-patch ones, either black (#f000 in ARGB) or fully transparent (#0000).
It's a normal to left some pixels with some transparency on those pixels that gets unnoticed at simple view.
This is a little tricky. Sometimes the stuff like the grey can creep in from the underlying Android layer. Sometimes things like tabhost have views that have to be overridden. I remember having to maek a selector drawable in XML to get the tabhost to work with custom items.

Android nine-patch not being recognized on device

I just made a nine-patch
it is saved like border.9.png from the draw 9 patch tool.
in my android layout editor, it shows up like it is going to be a proper 9 patch graphic, stretched out yet not pixelated.
yet on a real device, it just shows a giant stretched image, with the 9patch guides seen, it looks really bad
whats going on??? and how do I fix it
my xml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/border"
android:orientation="vertical"
android:padding="35dip" >
I just had the same issue : everything worked fine in Eclipse but all where streched on the device.
I solved it by opening the PNG in the Draw 9-patch tool.
Just open the png and save it et voila !
You can find all the necessary information how to create a 9.patch here
Your background should be like this
Note: the markers to the bottom and right need to be drawn as complete lines, not single dots.
Edit
Seems that uploading the 9.patch here becomes altered, and cannot be used as a 9.patch anymore. You can download the functional version from here
This looks like invalid 9.ptach file to me. There should be solid regions at the bottom and on the right side.
As a last resort, whenever you're having a tough time getting a 9 patch to be recognized as such, I find it's always best to just make a BRAND NEW image file in your imaging software, copy all except the 4 1-pixel borders of your original image, then paste into your new image file. Sometimes no matter how much you delete away the 4 edges, the device/emulator still can't recognize it as a 9-patch, even though (and this should probably be of concern to the Android SDK dev team) it's a perfectly fine 9-patch in Eclipse's Graphical Layout.
Also note, black lines on the right and bottom edges are optional. They specify "padding", in particular the region where the content (the child of the parent with the 9-patch background) fits.
It took me some hours to figure out, why my nine patch didn't render right.
The reason was quite simple. My nine patch image was stored under:
/res/drawable
instead of
/res/drawable-xxx

Categories

Resources