Android: Scale a Drawable or Background Image

Scale image keeping its aspect ratio in background drawable

It is impossible to achieve manipulating background attribute within xml-files only. There are two options:

  1. You cut/scale the bitmap programmatically with
    Bitmap.createScaledBitmap(Bitmap src, int dstWidth, int dstHeight,
    boolean filter)
    and set it as some View's background.

  2. You use ImageView instead of background placing it as the first layout's element and specify android:scaleType attribute for it:

    <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:src="@drawable/backgrnd"
    android:scaleType="centerCrop" />

    ...

    rest layout components here

    ...

    </RelativeLayout>

How to set the ScaleType on a LinearLayout's background image

View's background is stretched depending on the size of the View.

Image scaling is supported by ImageView, and to use it together with the LinearLayout you need an additional container, that will overlay the 2 children (e.g. a FrameLayout):

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/bgapp"
android:scaleType="centerCrop"/>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal">
...
</LinearLayout>
</FrameLayout>

How to scale an Image in ImageView to keep the aspect ratio

  1. Yes, by default Android will scale your image down to fit the ImageView, maintaining the aspect ratio. However, make sure you're setting the image to the ImageView using android:src="..." rather than android:background="...". src= makes it scale the image maintaining aspect ratio, but background= makes it scale and distort the image to make it fit exactly to the size of the ImageView. (You can use a background and a source at the same time though, which can be useful for things like displaying a frame around the main image, using just one ImageView.)

  2. You should also see android:adjustViewBounds to make the ImageView resize itself to fit the rescaled image. For example, if you have a rectangular image in what would normally be a square ImageView, adjustViewBounds=true will make it resize the ImageView to be rectangular as well. This then affects how other Views are laid out around the ImageView.

    Then as Samuh wrote, you can change the way it default scales images using the android:scaleType parameter. By the way, the easiest way to discover how this works would simply have been to experiment a bit yourself! Just remember to look at the layouts in the emulator itself (or an actual phone) as the preview in Eclipse is usually wrong.

How do I get a background image to scale in android studio?

Set ScaleType fitXY and add android:adjustViewBounds ="true"
Please use android:src="@drawable/ instead background .I hope it will helps you.

Android - Scaling of Button with background image

The buttons get stretched horizontally because the LinearLayout is set to fill parent, and each button have weights that make them stretch. The heights are set to wrap_content, and there isn't any content. The image is set as a background, which won't have any effect on how big the button is.

It's probably best you change the Buttons to ImageButtons and use android:src instead of android:background. For example :

<ImageButton
android:id="@+id/notificationform_btn_Approve"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="@drawable/btn_approve"
android:onClick="btnApprove_Click" />

Set button's background to image, scaling as needed

The button width and height are set to wrap_content. In this case, the background Image is a content, too.
Simply change width and height to the value you want:

    <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<Button
android:id="@+id/button5"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_weight="1"
android:background="@drawable/button_background"
android:text="Button"
android:gravity="center"
android:textColor="#FFFFFF" />

<Button
android:id="@+id/button6"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>

If you want all buttons to have the same size, consider creating a dimen value:

Dimen

    <resources>
<dimen name="button_width">100dp</dimen>
<dimen name="button_height">50dp</dimen>
</resources>

Layout

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<Button
android:id="@+id/button5"
android:layout_width="@dimen/button_with"
android:layout_height="@dimen/button_height"
android:layout_weight="1"
android:background="@drawable/button_background"
android:text="Button"
android:gravity="center"
android:textColor="#FFFFFF" />

<Button
android:id="@+id/button6"
android:layout_width="@dimen/button_with"
android:layout_height="@dimen/button_height"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>

Also, consider using a ImageButton for your purpose.

ImageButton

EDIT

Try this out:

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/your_background"
android:layout_alignStart="@+id/buttonId"
android:layout_alignEnd="@+id/buttonId"
android:layout_alignTop="@+id/buttonId"
android:layout_alignBottom="@+id/buttonId"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/buttonId"/>

</RelativeLayout>

Additionally, add a scaleType to the ImageView to make it centered, streched, whatever...

android:scaleType="center"

EDIT 2

adding padding to the button works for me:

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon_settings"
android:layout_alignStart="@+id/buttonId"
android:layout_alignEnd="@+id/buttonId"
android:layout_alignTop="@+id/buttonId"
android:layout_alignBottom="@+id/buttonId"
android:scaleType="center"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:text="This is a button with a very long text that may take up multiple lines and stuff"
android:id="@+id/buttonId"/>

</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon_settings"
android:layout_alignStart="@+id/buttonId2"
android:layout_alignEnd="@+id/buttonId2"
android:layout_alignTop="@+id/buttonId2"
android:layout_alignBottom="@+id/buttonId2"
android:scaleType="center"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a button with a very long text that may take up multiple lines and stuff"
android:id="@+id/buttonId2"/>

</RelativeLayout>

Screenshot two buttons

Note: You can't really see the paddingStart and paddingEnd in the screenshot, but it works just fine.



Related Topics



Leave a reply



Submit