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" />
Related
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 have a background. In that a component is drawn. Not centrally, suppose a box but not at exact center.I want to place another object may be an imageview. Exact on top of that box drawn in background.
i somehow managed to set it on my tablet device. But its not working on other tablets.any good idea?
I have tried using getting screen width height, but the box drawn is not exact matching..even statically.
You have to make different layouts for different size of devices and resolution.Otherwise it will get distorted for other devices.For more see this LINK
use xml with bitmap:
<bitmap gravity="center_horizontal|top" android:tileMode="disable" android:src="#drawable/YOUR_DRAWABLE" />
http://developer.android.com/guide/topics/resources/drawable-resource.html#Bitmap
My designer has given me the following layout (a little bit changed to protect my business :)
Now, I am facing a lot of doubts as how I can incorporate every element to my android layout.
As you can see, the background has a light noise to it. I tried creating a 9patch from it, but when loading in Android, I completely lost the quality of the imaged. It stretched out weirdly. Should I have one background for the different resolutions (ie. mdpi, hdpi... ) or can this be achieved with 9 patch
What to do with the button? I tried saving the button (which in photoshop it is a group) into a new image and saved it as a PNG. When loading in the layout with a ImageButton and trying on my phone, the button is just too big. How can I guarantee the size of the button on different type of screens? Will I need different sizes of this button for different resolutions (mdpi... ) and if so, how will I know what is the size of this button for a hdpi resolution, or for a mdpi resolution? Or maybe I should force the width and height of the button to a value like 60dp, but that doesn't sound right to me. I understand I can create a shape and apply it to the background of the button but, what about the Facebook button? I imagine that, in that case, I will need a ImageButton with the PNG as background.
I know this is late as hell but hopefully it will help others.
1) Ask your designer for a repeatable image that you can tile for the background. I don't see any reason why it couldn't be tiled. To tile an image make an xml file of type drawable for each of the generalized dpi folders. Put this code in the xml file:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:src="#drawable/piece_of_the_background_that_can_be_repeated"
android:tileMode="repeat" />
Set the background drawable to this xml file.
2) Set a 9patch image as the button background and use this custom textView for the text. Use the innerShadow attribute to get the shadow effect your designer shows.
I read a topic about multiple screen support, but I don't understand why I need a different picture for every screen size if I can stretch image by setting
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bk"
for every screen.
You don't have to have a different image for each screen size. You certainly can just use fill_parent and just use the same image. The only issue is that it usually won't look as good. In fact, in some cases it will look absolutely terrible. Assuming that you're fine with your image being stretched though, you can just use one image.
If your background image is not a plain image, and has a lot of detail, then it renders better if it is the exact size needed. Shrinking a large image to small may make it look grainier than you want.
However, you can still do it. Make sure to make AVDs with different screen sizes, so you can see how it might look.
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