Android Bitmap Drawable adjustable width - android

I have an android activity that has an image overlaying a background image.
The 2 images must line up(height only), so the height of the background image must not be scaled.
However, on wide displays, i need to stretch the width of this background to fit the screen.
Currently I have set the Activity background like this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layRoot"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/meditation_bg">
meditation_bg is a drawable resource. the code is
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/morn_blur_bg"
android:gravity="top|center"
android:scaleType="centerCrop"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
The bitmap drawable resource is required to prevent the OS from scaling the image for me.
How can I control the width, without affecting the height of the image.
cheers,

I'd highly recommend taking a look into Picasso, They provide image caching, adjusting much much more easier.

Related

Image distorted on different resolution devices when using scaleType="fitXY"

I have a carousel banner and I have the requirement the images to cover all the layout and be displayed the same irrespective of device resolution. Below is the original image, device screenshot of correct use and lastly, device screenshot of wrong use
As you can see in the last image, the circle on the right upper part of the image becomes oval shaped, which is not the case.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#232323">
<ImageView
android:id="#+id/advert_carousel_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
</androidx.constraintlayout.widget.ConstraintLayout>
Image is set using Glide
Glide
.with(mContext)
.load(img)
.into(advertCarouselBackground);
Any ideas on how the original image can be displayed without distortion independently of device resolution? I have tried some solutions, like converting the image to bitmap, setting width and height programmatically, calculating aspect ratio, etc, but nothing worked so far.

Scale a repeatable bitmap in ImageView

I have a drawable repeatable_stencil.xml with the following code:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/stencil"
android:tileMode="repeat"/>
Then I use it in an ImageView like this:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/repeatable_stencil"
/>
The way my imageview is setup, it is supposed to fill its parent with the repeatable_stencil. It does the job, but incorrectly.
The stencil image is about 2500 x 4000 in pixels. But, when it is used like how I did above, the bitmap is automatically scaled, and the stencil image is super zoomed.
I want to scale it down to custom dimensions.

Set Activity background without stretching

I'm trying to set a background image in my Android application.
I have a JPEG image and I want to fill the screen with the height of the image, maintaining the same aspect ratio.
I tried by creating an XML bitmap file in drawable and setting it as:
android:background="#drawable/background_image"
This is the XML
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/wallpaper1_1920x1200"
android:tileMode="disabled"
android:gravity="center" >
</bitmap>
With the 'center' tag it doesn't stretch the image and it doesn't resize it.
Is there any way to show the full height of the image (and cropping sides) maintaining the original aspect ratio?
You can wrap your bitmap with Scale Drawable (http://developer.android.com/guide/topics/resources/drawable-resource.html#Scale)
And then use that drawable as a background for your layout.
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/wallpaper1_1920x1200"
android:scaleGravity="clip_horizontal"
android:scaleHeight="100%"
android:scaleWidth="100%" />
One solution might be to turn it into a 9 patch png file, allowing you to define where it can and can't stretch. See http://developer.android.com/guide/topics/graphics/2d-graphics.html, the section near the end on 9 patch images.

Displaying a small png (drawable) in a larger ImageView

I am displaying a tiny png drawable resource in an ImageView of larger dimensions than the original image. This is normal and what I want by the way :)
When the ImageView is displayed, the image is blurry, because of the scaling method used I suppose.
I would like to achieve an effect similar to :
http://www.41post.com/4241/programming/android-disabling-anti-aliasing-for-pixel-art
where the original image is upscaled without antialiasing.
Is there a way to achieve that directly with an ImageView of certain width and height (in dips) and a drawable, without having to use an intermediate Bitmap?
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/image"
android:antialias="false" />
You need to create an drawable, copy the code above on an xml in the drawable folder, then on your layout instead of using your image as source use this xml. This way you disable the antialias for the image.
Edit: doing this in code.
BitmapDrawable draw = new BitmapDrawable(R.drawable.image);
draw.setAntiAlias(false);
imageView.setImageDrawable(draw);
Did you try turning off antialiasing in the layout?
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:antialias="false" />

Android tiling a background image: using a Bitmap resizes the image?

I'd like to have a tiled background in a layout I've created, in the x-direction. I've followed some good instructions found online to tile correctly, but the source image is now stretched vertically a good bit. I think it has to do with the nature of bitmap filetypes.
Example picture:
The first image is the background image before tiling. The second image is after tiling. As you can see, the image is stretched vertically a good bit, and also appears a bit blurry due to the resizing.
I've tried placing the images in both the drawable-hdpi and drawable folder. I've tried placing the XML file in both folders. None of that seemed to matter.
Here is the code for the layout that generated those two images:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:background="#drawable/bg" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:background="#drawable/bg_repeat" />
</LinearLayout>
"#drawable/bg" is the actual image itself, bg.png. "#drawable/bg_repeat" is the following bitmap XML file:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/cdetail_bg_unclaimed_details"
android:antialias="false"
android:dither="false"
android:filter="false"
android:gravity="center|center_vertical"
android:tileMode="repeat" />
Is there an alternative to this for x-repeat tiling? Or is there some workaround that I haven't examined yet? I've changed all of the options for antialias, dither, filter, etc. Nothing seemed to change anything.
Thanks for the help!
EDIT: This appears to be a bug using the Graphical Layout tool. It looks OK on my phone.
This appears to be a bug using the Graphical Layout tool. It looks OK on my phone.
You can't repeat a bitmap background in one-direction using xml but Java code surely can do that.
BitmapDrawable bitmap = (BitmapDrawable) getResources().getDrawable(R.drawable.image);
bitmap.setTileModeX(TileMode.REPEAT);
So now if you set this "bitmap" to any view's background
For example: If we have a TextView "text" then
text.setBackgroundDrawable(bitmap) will set the background of this text-view
to "bitmap".
It will repeat in x-direction but will preserve its height in y-direction
Hope this helps.

Categories

Resources