This is rather a funny problem I have ever come across,
I have a table layout with 9 image buttons, 3 per row. Every ImageButton has a different image associated with it. I have set the background of the image button to transparent (#00000000). Now here is where the funny stuff happens, One of the images doesn't show up on the emulator (Gingerbread) as well as a device running Froyo. The layout editor shows all the images in place.
Here are some more stuff:
I used a RelativeLayout instead of a TableLayout, the same issue persists.
I changed the position of the image (used it on different buttons) and still it doesn't show up.
When I use a different image they show up, but when I use this particular image it won't.
All images have the same resolution (90x72) and density (72ppi)
All the images are in the the drawable-mdpi folder.
Any pointers?
EDIT
Turned out to be a bug and this issue has been resolved. Please check this link.
Do you still have the problem. I had a similar bug - a particular drawable was not being displayed, no matter in what `ImageView`.
Is it the case that your image is the first (alphabetically) in the drawable folder? For some strange reason there is a problem with the first drawable, I've solved my problem by adding a dummy drawable in first place. Still I'm very curious where the actual problem is.
Hope that helps! And I'm looking forward for any further explanations :)
I can confirm adding a dummy image which displays first alphabetically is a fix.
I had an image (titled about.png so of course near the top of the drawable folder) which was not displaying when the test device used was mdpi.
In my case, though, the image was not the first in the directory. I actually had an image which alphabetically displayed first called about_icon.png - which oddly was displaying fine. Additionally, the hdpi version of the image was displaying fine within an hdpi device.
I added a dummy placeholder image called "aaaa.png" and now the mdpi about image displays fine in device.
Very strange, and honestly a pretty lousy bug.
Try to use android:src="#drawable/my_resource", instead of app:srcCompat="#drawable/my_resource".
This post is fairly old however I was experiencing a similar issue. Running 4.4.2 my imagebutton's would show some images correctly however others it would change. For example my white "ic_camera.png" would look like this....
What appeared to randomly turn images into their dark counter part.(I double and tripple checked that I put the right color in) All images came from the Android Icon pack. I tried deleting and copying back all images multiple times to no avail. Finally I just changed the naming convention, dropping all of the "ic" and "_" so that the images where all simple words and lower case. ie... "camera.png", "upload.png", and "newimage.png"
BINGO!
Very strange but a simple fix. Hope this helps someone else!
Cheers!
For anyone coming to this question and the answer does not work, your image size might not cater to the devices target size... click here to get the right sizes.
For me it was a different issue. The images did show on nexus4 and nexus5 but not nexus3. I scaled down the images from 2000px width to 1000px width and worked like a charm.
When you do it in DESIGN PANEL you get something like this:
<ImageButton
android:id="#+id/translate_button"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:srcCompat="#drawable/translate_button"/>
Change the last line manually into:
<ImageButton
android:id="#+id/translate_button"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/translate_button"/>
It worked for me.
Related
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!
I would like to improve my androids app design with background image but its resizing/spreading it on screens and make the app uglier as you can imagine,
I googled the issue and the only thing I found is putting many images for smartphone, tablet etc... to get always the best sized image but I m finding a way to put a huge image cut edges when screen is too small without spreading all the image because I don't need to see the whole image
Someone know is it possible and how?
I found it:
create a new xml in res/drawable
<bitmap xmlns:android="schemas.android.com/apk/res/android"
android:src="#drawable/mybackgroundimage"
android:gravity="center" />
As you can see in the photo I have a scaling problem with my design. Actually there is two problems. One involving a textview and one about scaling. I found out that the easiest solution for layout was to implement a background image to my RelativeLayout. (This may be a stupid approach i don't know.)
As you can see in the images, the text changes position on textview.setText("blabla"). And is creating visual problem. How would I go about fixing this?
Secondly, how would I solve the scaling issue on different devices? My initial plan was to make one background for each size. Like mdpi, hdpi and so on.. But how do I tell the app to choose between background? And is this even possible?
Am I doing it all wrong? :)
Positioning problem http://chk.no/bue/stackoverflow.png
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
My activity's background is showing up with some horizontal lines on both emulator and actual device that don't show up in the orginal image on my computer.
I am using GIMP to edit my background images. I have tried both .jpg and .png format.
Does anyone know why these horizontal lines are showing up?
The lines are hard to see from this emulator screen, but appear much more prominently on the actual device. Any help is appreciated.
It is really hard to see the problem on the screenshot you posted, but it looks like it is compression related. You should check out my answer to this question.
Not sure of my answer but you should try to have a multiple of 2 for image's height and width.