Android Scale a Drawable or background image

Question

On a layout I want to scale the background image  keeping its aspect ratio  to the space allocated when the page gets created  Does anyone have an idea how to do this   I am using layout setBackgroundDrawable   and a BitmapDrawable   to set gravity for clipping and filling  but don t see any option for scaling

User · Answer

There is an easy way to do this from the drawable:

your_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:drawable="@color/bg_color"/>
    <item>
        <bitmap
            android:gravity="center|bottom|clip_vertical"
            android:src="@drawable/your_image" />
    </item>

</layer-list>

The only downside is that if there is not enough space, your image won't be fully shown, but it will be clipped, I couldn't find an way to do this directly from a drawable. But from the tests I did it works pretty well, and it doesn't clip that much of the image. You could play more with the gravity options.

Another way will be to just create an layout, where you will use an ImageView and set the scaleType to fitCenter.

User · Answer

When you set the Drawable of an ImageView by using the setBackgroundDrawable method  the image will always be scaled  Parameters as adjustViewBounds or different ScaleTypes will just be ignored  The only solution to keep the aspect ratio I found  is to resize the ImageView after loading your drawable  Here is the code snippet I used      bmp is your Bitmap object int imgHeight   bmp getHeight    int imgWidth   bmp getWidth    int containerHeight   imageView getHeight    int containerWidth   imageView getWidth    boolean ch2cw   containerHeight  gt  containerWidth  float h2w    float  imgHeight    float  imgWidth  float newContainerHeight  newContainerWidth   if  h2w  gt  1           height is greater than width     if  ch2cw            newContainerWidth    float  containerWidth          newContainerHeight   newContainerWidth   h2w        else           newContainerHeight    float  containerHeight          newContainerWidth   newContainerHeight   h2w          else          width is greater than height     if  ch2cw            newContainerWidth    float  containerWidth          newContainerHeight   newContainerWidth   h2w         else           newContainerWidth    float  containerHeight          newContainerHeight   newContainerWidth   h2w                 Bitmap copy   Bitmap createScaledBitmap bmp   int  newContainerWidth   int  newContainerHeight  false   imageView setBackgroundDrawable new BitmapDrawable copy    LayoutParams params   new LayoutParams LayoutParams WRAP CONTENT  LayoutParams WRAP CONTENT   imageView setLayoutParams params   imageView setMaxHeight  int  newContainerHeight   imageView setMaxWidth  int  newContainerWidth     In the code snippet above is bmp the Bitmap object that is to be shown and imageView is the ImageView object  An important thing to note is the change of the layout parameters  This is necessary because setMaxHeight and setMaxWidth will only make a difference if the width and height are defined to wrap the content  not to fill the parent  Fill parent on the other hand is the desired setting at the beginning  because otherwise containerWidth and containerHeight will both have values equal to 0  So  in your layout file you will have something like this for your ImageView        lt ImageView android id    id my image view      android layout width  fill parent      android layout height  fill parent   gt

User · Answer

Use image as background sized to layout    lt  xml version  1 0  encoding  utf-8   gt   lt FrameLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  wrap content   gt        lt ImageView         android id    id imgPlaylistItemBg          android layout width  match parent          android layout height  match parent          android adjustViewBounds  true          android maxHeight  0dp          android scaleType  fitXY          android src   drawable img dsh    gt        lt LinearLayout         android layout width  match parent          android layout height  wrap content          android orientation  vertical   gt         lt  LinearLayout gt    lt  FrameLayout gt

User · Answer

You can use one of following   android gravity  fill horizontal clip vertical   Or  android gravity  fill vertical clip horizontal

User · Answer

To customize background image scaling create a resource like this    lt  xml version  1 0  encoding  utf-8   gt   lt bitmap xmlns android  http   schemas android com apk res android      android gravity  center      android src   drawable list bkgnd    gt    Then it will be centered in the view if used as background  There are also other flags  http   developer android com guide topics resources drawable-resource html

User · Answer

you ll have to pre-scale that drawable before you use it as a background

User · Answer

What Dweebo proposed works  But in my humble opinion it is unnecessary  A background drawable scales well by itself  The view should have fixed width and height  like in the following example     lt  RelativeLayout      android layout width  fill parent      android layout height  fill parent      android background   android color black  gt        lt LinearLayout         android layout width  500dip          android layout height  450dip          android layout centerInParent  true          android background   drawable my drawable          android orientation  vertical          android padding  30dip           gt                    lt  LinearLayout gt    lt    RelativeLayout gt

User · Answer

One option to try is to put the image in the drawable-nodpi folder and set background of a layout to the drawable resource id   This definitely works with scaling down  I haven t tested with scaling up though

User · Answer

This is not the most performant solution  but as somebody suggested instead of background you can create FrameLayout or RelativeLayout and use ImageView as pseudo background - other elements will be position simply above it    lt RelativeLayout xmlns android  http   schemas android com apk res android      android layout height  match parent      android layout width  match parent  gt        lt ImageView         android id    id ivBackground          android layout width  match parent          android layout height  match parent          android layout alignParentLeft  true          android layout alignParentTop  true          android scaleType  fitStart          android src   drawable menu icon exit    gt        lt Button         android id    id bSomeButton          android layout width  wrap content          android layout height  wrap content          android layout alignParentLeft  true          android layout alignParentTop  true          android layout marginLeft  61dp          android layout marginTop  122dp          android text  Button    gt    lt  RelativeLayout gt    The problem with ImageView is that only scaleTypes available are  CENTER  CENTER CROP  CENTER INSIDE  FIT CENTER FIT END  FIT START  FIT XY  MATRIX   http   etcodehome blogspot de 2011 05 android-imageview-scaletype-samples html   and to  scale the background image  keeping its aspect ratio   in some cases  when you want an image to fill the whole screen  for example background image  and aspect ratio of the screen is different than image s  the necessary scaleType is kind of TOP CROP  because   CENTER CROP centers the scaled image instead of aligning the top edge to the top edge of the image view and FIT START fits the screen height and not fill the width  And as user Anke noticed FIT XY doesn t keep aspect ratio   Gladly somebody has extended ImageView to support TOP CROP  public class ImageViewScaleTypeTopCrop extends ImageView       public ImageViewScaleTypeTopCrop Context context            super context           setup               public ImageViewScaleTypeTopCrop Context context  AttributeSet attrs            super context  attrs           setup               public ImageViewScaleTypeTopCrop Context context  AttributeSet attrs  int defStyle            super context  attrs  defStyle           setup               private void setup             setScaleType ScaleType MATRIX               Override     protected boolean setFrame int frameLeft  int frameTop  int frameRight  int frameBottom             float frameWidth   frameRight - frameLeft          float frameHeight   frameBottom - frameTop           if  getDrawable      null                 Matrix matrix   getImageMatrix                float scaleFactor  scaleFactorWidth  scaleFactorHeight               scaleFactorWidth    float  frameWidth    float  getDrawable   getIntrinsicWidth                scaleFactorHeight    float  frameHeight    float  getDrawable   getIntrinsicHeight                 if  scaleFactorHeight  gt  scaleFactorWidth                    scaleFactor   scaleFactorHeight                else                   scaleFactor   scaleFactorWidth                             matrix setScale scaleFactor  scaleFactor  0  0               setImageMatrix matrix                      return super setFrame frameLeft  frameTop  frameRight  frameBottom              https   stackoverflow com a 14815588 2075875  Now IMHO would be perfect if somebody wrote custom Drawable which scales image like that  Then it could be used as background parameter     Reflog suggests to prescale drawable before using it  Here is instruction how to do it  Java  Android   How to scale a drawable without Bitmap  Although it has disadvantage  that upscaled drawable bitmap will use more RAM  while scaling on the fly used by ImageView doesn t require more memory  Advantage could be less processor load

User · Answer

To keep the aspect ratio you have to use android scaleType fitCenter or fitStart etc  Using fitXY will not keep the original aspect ratio of the image   Note this works only for images with a src attribute  not for the background image

User · Answer

Kotlin   If you needed to draw a bitmap in a View  scaled to FIT   You can do the proper calculations to set bm the height equal to the container and adjust width  in the case bm width to height ratio is less than container width to height ratio  or the inverse in the opposite scenario   Images           binding fragPhotoEditDrawCont is the RelativeLayout where is your view    bm is the Bitmap val ch   binding fragPhotoEditDrawCont height val cw   binding fragPhotoEditDrawCont width val bh   bm height val bw   bm width val rc   cw toFloat     ch toFloat   val rb   bw toFloat     bh toFloat    if  rb  lt  rc           Bitmap Width to Height ratio is less than Container ratio        Means  bitmap should pin top and bottom  and have some space on sides                                                container             bm              val bmHeight   ch - 4   4 for container border     val bmWidth   rb   bmHeight   new width is bm ratio   bm height     binding fragPhotoEditDraw layoutParams   RelativeLayout LayoutParams bmWidth toInt    bmHeight    else       val bmWidth   cw - 4   4 for container border     val bmHeight   1f rb   cw     binding fragPhotoEditDraw layoutParams   RelativeLayout LayoutParams bmWidth  bmHeight toInt

User · Answer

Haven t tried to do exactly what you want  but you can scale an ImageView using android scaleType  fitXY  and it will be sized to fit into whatever size you give the ImageView   So you could create a FrameLayout for your layout  put the ImageView inside it  and then whatever other content you need in the FrameLayout as well w  a transparent background    lt FrameLayout   android layout width  fill parent  android layout height  fill parent  gt      lt ImageView  android layout width  fill parent  android layout height  fill parent  android src   drawable back  android scaleType  fitXY    gt      lt LinearLayout gt your views lt  LinearLayout gt   lt  FrameLayout gt

User · Answer

The Below code make the bitmap perfectly with same size of the imageview  Get the bitmap image height and width and then calculate the new height and width with the help of imageview s parameters  That give you required image with best aspect ratio   int bwidth bitMap1 getWidth    int bheight bitMap1 getHeight    int swidth imageView location getWidth    int sheight imageView location getHeight    new width swidth  new height    int  Math floor  double  bheight     double  new width    double  bwidth    Bitmap newbitMap   Bitmap createScaledBitmap bitMap1 new width new height  true   imageView location setImageBitmap newbitMap

[android] Android: Scale a Drawable or background image?

Examples related to android