Lets say I have a big image, something like 2000x3000px, and want to cut out an 1080x1920px image and put it as the background of my app. What I figured out is that every device with a viewport of 412x732 will display this image correct (no different factor for stretching in height and width). The aspect ratio will be the same and therefore an object of the 1080x1920 image wont look stretched in height while maintaining the same width on an 1440x2560px (viewport 412x732) device. However when displaying this image on an 1080x2280px device (viewport 412x869) the image will look stretched (like you can see in the right image). Now I wonder how I can implement background images for different aspect ratios so that such stretching wont occur on any device. Instead I want that more parts of the original big image are displayed on screens with larger (or less image on smaller) aspect ratio devices.
Imagine the black border of the image is the original 2000x3000px, the blue border would be the image on an 1080x1920 device and the green border would be an 1080x2280 device. I hope you get the idea what I mean.
After some research I found the option to use an ImageView with android:scaleType="centerCrop" rather than putting the image as background. However I don't know if this will solve my problem. What do you guys think would be the best way to solve this?
With the android:scaleType="centerCrop" you should additionally put ImageView on every your screen. This would be fine if you have only 1 screen, otherwise you will need to duplicate same trick.
If you need the same background of windows to be set as theme property so you could wrap your image with drawable resource. Something like:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#color/bg_image"/>
<item>
<bitmap
android:gravity="center|bottom|clip_vertical"
android:src="#drawable/your_image" />
</item>
</layer-list>
Playing with gravity you'll be able to receive preferred result with scaling/positioning.
To set image as a theme property you need to add it in styles AppTheme:
<item name="android:windowBackground">#drawable/you_image_as_a_layer_list</item>
Related
I'm using a potrait photo as the background image of my application. but when the orientation changes, the background image is streched and ugly. I dont want the image to fit XY .. instead of that, I want it to be centerCropped .. remember , its not a background image of any linear layout. its the background of application(theme) .
I think this is possible, I've seen contact+ to do this in their app.. But I don't know how do they do it. Can anybody help me out please?
NOTE: I have used and gravity but it doesn't help.. The image is still fitting XY.not getting cropped to keep its aspect ratio with filling the window as well .
Is the background image of your app being set either by android:background="..." in your layout xml,
or programmatically by calling setBackgroundResource()?
If so, this sets the background resource of a View.
A View's background always stretches to fill up all of the View
width and height, losing its aspect ratio when layout dimensions change
such as when device orientation moves or
when the application runs in devices
with other screen aspect ratios. There is no way of configuring this
to happen otherwise.
Workarounds:
Convert your background to a Nine-Patch file, in order to the
stretching is
applied in selected areas of the image only. This may or may not fit well
to the design of your app.
Make your application detect changes in your layout. When it happens,
build a new background image on-the-fly keeping the aspect ratio of the original image, and set the View's background to the new image.
I've posted
a description on how to keep aspect ratio of View background image
using this technique; hopefully it can serve as a starting point.
I need to create a seekbar that has custom background and custom thumb image. The problem is that background is kind of complex and i can't really create nice 9patch out of it.
Seekbar should have 3 values (0,1,2) and each value is represented by an image. Thumb should be centered around image of current value. Picture shows the seekbar with value "1" selected:
Problems I had were:
to create a 9patch from background and keep edge and central image from moving / scaling.
create a thumb that will always be in right scale compared to images representing different values.
How can I do this?
Edit
In short: I'm having troubles to make sure seekbar fills entire width of the screen (regardless of screen size), but again to make sure "ring" (thumb) will always fit perfectly around each "value" image.
I am not quite sure I understand your problem, but you can create a bitmap xml to avoid resizing on your background pictures:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/mydrawable"
android:tileMode="disabled"
android:gravity="top" >
</bitmap>
If you are having troubles with arranging the items/pictures, you can always play with a relative layout's diferent params.
I am having trouble removing anti-aliasing on a 9-patch png and a normal drawable that is tiled to make a background. I am using the 9-patch as a background for my EditText controls and the tiled drawable is used as a background for an ImageView to create the 'divider'.
Here is some enlarged versions of my 9 patch png (it's hard to show white graphics so I filled in the transparent areas in blue):
And my tiled background image along with the xml that defines the tiled pattern:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/border_diagonal_lines"
android:tileMode="repeat"
/>
Here is the whole thing put together:
The screenshot on the left is what I currently get and the screenshot on the right is what I want it to look like. What could I do to achieve the desired effect?
I also would like the imageview with the tiled background to always be 3 pixels tall regardless of screen resolution but using 'pixels' as units is generally a bad idea. Is there a way round this?
It isn't anti-aliasing your graphics, it's probably scaling them (which, granted, may also perform anti-aliasing, but it's not the cause). Are you placing them in the correct density-specific folder? (e.g. drawable-hdpi, drawable-xhdpi, etc.) If you are doing that, also make sure you are not using the android:anyDensity="true" tag in your manifest.
I also would like the imageview with the tiled background to always be
3 pixels tall regardless of screen resolution but using 'pixels' as
units is generally a bad idea. Is there a way round this?
It's discouraged in general cases, when the system should be handling scaling for multiple densities (using DP instead), but if you specifically need something 3 pixels tall, then there's nothing "bad" about specifying a pixel height.
I'm trying to make a custom radio button. I have a <selector> configured as follows:
<selector xmlns...>
<item android:drawable="#drawable/image" android:state_checked="true" />
<item android:drawable="#drawable/image" android:state_checked="false" />
</selector>
This is just a sample right now, so I'm using the same image for simplicity, but I plan on using a compound image that consists of #drawable/image and a slightly bigger rectangle later on. The image is larger than my desired radio button size, so my problem is rather than scaling the image down so that the image retains its aspect ratio in the <RadioButton />, the image is just getting cropped (in half, to be precise). Since this isn't an image view, I've no idea how to make it scale properly.
I've set layout_width & layout_height to wrap_content. I plan on encoding absolute dp values later on in the resource files, but I'd like to figure out how to get the image to scale properly to fit the specified dimensions first. One alternative I see see is to use GIMP to resize my image before-hand, but that doesn't seem too adaptable in the long run, especially if I need to make this work properly on multiple screen densities.
Just now, I tried using an <inset />, hoping that would make it resize, but that didn't work out.
Any suggestions?
Creating a dummy background worked for me [tested on API8 and 16]:
<RadioButton
android:id="#+id/stKayaBkRad"
android:background="#drawable/goban_rad_bkg"
android:button="#drawable/rad_goban_kaya_sel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Apparently wrap_content does wrap the background, which is just a completely transparent png with the same size as the drawable.
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.