How to implement android: a background that does not stretch?

Question

I found this great thread describing how to "eat a cake and it too," i.e. use an image for Button instead of ImageButton (which does not allow SetText() , resizing, etc.).

This is achieved using the View attribute:

 android:background="@drawable/bgimage" 

The only problem is that it stretches the image to fit the size of the button.

With the exception of hardcoding a fixed button size (in pixels!), Is there a way to tell Android not to stretch the background image at all and either crop or skip it?

Answer 1

You should use ImageView if you do not want it to stretch. Background images will always be stretched to fit the view. You must set it as Drawable to force the aspect of the image to the object.

Otherwise, if you stick to the idea of ​​Button, you will need to force the button to scale so that the image does not stretch.

For example, in

 OnCreate(Bundle bundle) { //set content layout, etc up here //now adjust button sizes Button B = (Button) findViewById(R.id.somebutton); int someDimension = 50; //50pixels B.setWidth(someDimension); B.setHeight(someDimension); } 

Answer 2

You can create an xml bitmap and use it as a background for presentation. To prevent stretching, you can specify the android:gravity attribute.

eg:

 <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/dvdr" android:tileMode="disabled" android:gravity="top" > </bitmap> 

There are many options you can use to customize image rendering.

http://developer.android.com/guide/topics/resources/drawable-resource.html#Bitmap

Answer 3

Just using ImageButton instead of Button fixes the problem.

 <ImageButton android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/bgimage" /> 

and you can set

 android:background="@null" 

to remove the button background if you want.

Quick fix !! :-)

Answer 4

I am using ImageView in RelativeLayout, which is superimposed on my regular layout. No code required. It resizes the image to the full height of the screen (or any other layout you use), and then crop the image left and right to fit the width. In my case, if the user rotates the screen, the image may be too small. Therefore, I use match_parent, which will make the image stretched in width if it is too small.

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/main_backgroundImage" android:layout_width="match_parent" //comment: Stretches picture in the width if too small. Use "wrap_content" does not stretch, but leaves space android:layout_height="match_parent" //in my case I always want the height filled android:layout_alignParentTop="true" android:scaleType="centerCrop" //will crop picture left and right, so it fits in height and keeps aspect ratio android:contentDescription="@string/image" android:src="@drawable/your_image" /> <LinearLayout android:id="@+id/main_root" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > </LinearLayout> </RelativeLayout> 

Answer 5

I had the same problem: you should only use a 9-patch image (.9.png) instead of the original image.

Serge

Answer 6

Use draw9patch ... included in the Android Studio SDK tools. You can define stretchable areas of your image. Important details are limited and the image does not look distorted. Nice demo on dra9patch HERE

Use draw9patch to change the existing splash.png to new_splash.9.png, drag new_splash.9.png to the drawable-hdpi project folder, make sure that AndroidManifest and styles.xml are correct, as shown below:

AndroidManifest.xml:

 <application ... android:theme="@style/splashScreenStyle" > 

styles.xml:

 <style name="splashScreenStyle" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="android:windowBackground">@drawable/new_splash</item> </style> 

Answer 7

Here's the version of Santosh's answer for programmatically created buttons, without the need for a separate XML configuration:

 Button button = new Button(getContext()); Bitmap backgroundBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.my_button); BitmapDrawable backgroundDrawable = new BitmapDrawable(getResources(), backgroundBitmap); backgroundDrawable.setGravity(Gravity.CENTER); // also LEFT, CENTER_VERTICAL, etc. backgroundDrawable.setColorFilter(new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP)); button.setBackground(backgroundDrawable); 

I included the ColorFilter line, as this works a little differently than buttons with a normal background image.

Answer 8

I had a background image, it was not large, but with strange sizes - so stretching and poor performance. I made a method with the Context, View and drawable ID (int) parameters, which will correspond to the screen size of the device. Use this, for example, in Fragments onCreateView to set the background.

 public void setBackground(Context context, View view, int drawableId){ Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), drawableId); bitmap = Bitmap.createScaledBitmap(bitmap, Resources.getSystem().getDisplayMetrics() .widthPixels, Resources.getSystem().getDisplayMetrics().heightPixels, true); BitmapDrawable bitmapDrawable = new BitmapDrawable(context.getResources(), bitmap); view.setBackground(bitmapDrawable); } 

Answer 9

The key is to set the popped out as the image of the button, and not as the background. Like this:

 rb.setButtonDrawable(R.drawable.whatever_drawable); 

Answer 10

Can I use a simple ImageView in my xml and make it interactive (Android: clickable = "true")? You should use only as an src image that was shaped like a button in the round corners.

Answer 11

You can use FrameLayout with ImageView as the first child, and then your normal layout as a second child:

 <?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:id="@+id/background_image_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/your_drawable"/> <LinearLayout android:id="@+id/your_actual_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> </LinearLayout> </FrameLayout>