How can I squeeze a popped button?

Question

how can i make drawable on button less? The icon is too big, actually higher than the button. This is the code I'm using:

<Button android:background="@drawable/red_button" android:drawableLeft="@drawable/s_vit" android:id="@+id/ButtonTest" android:gravity="left|center_vertical" android:text="S-SERIES CALCULATOR" android:textColor="@android:color/white" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginLeft="25dp" android:layout_marginRight="25dp" android:drawablePadding="10dp"> </Button> 

Upper - how it should look, the lower it looks like right now.

I tried this, but the image is not showing .: - (

  Resources res = getResources(); ScaleDrawable sd = new ScaleDrawable(res.getDrawable(R.drawable.s_vit), 0, 10f, 10f); Button btn = (Button) findViewById(R.id.ButtonTest); btn.setCompoundDrawables(sd.getDrawable(), null, null, null); 

Answer 1

You should use ImageButton and specify the image in android:src and set android:scaletype to fitXY

---

Configuring scalable code in code

 Drawable drawable = getResources().getDrawable(R.drawable.s_vit); drawable.setBounds(0, 0, (int)(drawable.getIntrinsicWidth()*0.5), (int)(drawable.getIntrinsicHeight()*0.5)); ScaleDrawable sd = new ScaleDrawable(drawable, 0, scaleWidth, scaleHeight); Button btn = findViewbyId(R.id.yourbtnID); btn.setCompoundDrawables(sd.getDrawable(), null, null, null); //set drawableLeft for example 

Answer 2

I found a very simple and efficient XML solution that does not require ImageButton

Create a graphic file for your image as shown below and use it for android:drawableLeft

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/half_overlay" android:drawable="@drawable/myDrawable" android:width="40dp" android:height="40dp" /> </layer-list> 

You can set the image size using the android:width and android:height properties.

That way you could at least get the same size for different screens.

The disadvantage is that it is not exactly like fitXY, which would scale the image width to fit X and scale the image height accordingly.

Answer 3

Buttons do not resize internal images.

My solution does not require code manipulation.

It uses layout with TextView and ImageView.

The layout background should have a red 3D drawing.

You may need to define the android: scaleType xml attribute.

Example:

 <LinearLayout android:id="@+id/list_item" android:layout_width="fill_parent" android:layout_height="50dp" android:padding="2dp" > <ImageView android:layout_width="50dp" android:layout_height="fill_parent" android:src="@drawable/camera" /> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:lines="1" android:gravity="center_vertical" android:text="Hello - primary" /> </LinearLayout> 

BTW:

• Counting different resolution icons can lead to an unpredictable user interface (the icon is too big or too small)
• Text in text form (including buttons) does not fill the component. This is a problem with Android, and I do not know how to solve it.
• You can use it as an include.

Good luck.

Answer 4

Use ScaleDrawable as Abhinav .

The problem is that drawable does not show then - this is some kind of error in ScaleDrawables. you will need to change the "level" programmatically. This should work for each button:

 // Fix level of existing drawables Drawable[] drawables = myButton.getCompoundDrawables(); for (Drawable d : drawables) if (d != null && d instanceof ScaleDrawable) d.setLevel(1); myButton.setCompoundDrawables(drawables[0], drawables[1], drawables[2], drawables[3]); 

Answer 5

My DiplayScaleHelper, which works great:

 import android.content.Context; import android.graphics.Rect; import android.graphics.drawable.Drawable; import android.graphics.drawable.ScaleDrawable; import android.widget.Button; public class DisplayHelper { public static void scaleButtonDrawables(Button btn, double fitFactor) { Drawable[] drawables = btn.getCompoundDrawables(); for (int i = 0; i < drawables.length; i++) { if (drawables[i] != null) { if (drawables[i] instanceof ScaleDrawable) { drawables[i].setLevel(1); } drawables[i].setBounds(0, 0, (int) (drawables[i].getIntrinsicWidth() * fitFactor), (int) (drawables[i].getIntrinsicHeight() * fitFactor)); ScaleDrawable sd = new ScaleDrawable(drawables[i], 0, drawables[i].getIntrinsicWidth(), drawables[i].getIntrinsicHeight()); if(i == 0) { btn.setCompoundDrawables(sd.getDrawable(), drawables[1], drawables[2], drawables[3]); } else if(i == 1) { btn.setCompoundDrawables(drawables[0], sd.getDrawable(), drawables[2], drawables[3]); } else if(i == 2) { btn.setCompoundDrawables(drawables[0], drawables[1], sd.getDrawable(), drawables[3]); } else { btn.setCompoundDrawables(drawables[0], drawables[1], drawables[2], sd.getDrawable()); } } } } } 

Answer 6

You can call setBounds in "composite" drawings to resize the image.

Try this code to authorize the push button:

 DroidUtils.scaleButtonDrawables((Button) findViewById(R.id.ButtonTest), 1.0); 

defined by this function:

 public final class DroidUtils { /** scale the Drawables of a button to "fit" * For left and right drawables: height is scaled * eg. with fitFactor 1 the image has max. the height of the button. * For top and bottom drawables: width is scaled: * With fitFactor 0.9 the image has max. 90% of the width of the button * */ public static void scaleButtonDrawables(Button btn, double fitFactor) { Drawable[] drawables = btn.getCompoundDrawables(); for (int i = 0; i < drawables.length; i++) { if (drawables[i] != null) { int imgWidth = drawables[i].getIntrinsicWidth(); int imgHeight = drawables[i].getIntrinsicHeight(); if ((imgHeight > 0) && (imgWidth > 0)) { //might be -1 float scale; if ((i == 0) || (i == 2)) { //left or right -> scale height scale = (float) (btn.getHeight() * fitFactor) / imgHeight; } else { //top or bottom -> scale width scale = (float) (btn.getWidth() * fitFactor) / imgWidth; } if (scale < 1.0) { Rect rect = drawables[i].getBounds(); int newWidth = (int)(imgWidth * scale); int newHeight = (int)(imgHeight * scale); rect.left = rect.left + (int)(0.5 * (imgWidth - newWidth)); rect.top = rect.top + (int)(0.5 * (imgHeight - newHeight)); rect.right = rect.left + newWidth; rect.bottom = rect.top + newHeight; drawables[i].setBounds(rect); } } } } } } 

Keep in mind that this cannot be called in onCreate() activity, because the height and width of the button are not yet available. Call it on onWindowFocusChanged() or use this solution to call the function.

Edited by:

The first incarnation of this feature did not work correctly. He used userSeven7s code to scale the image, but returning ScaleDrawable.getDrawable() does not work (also does not return ScaleDrawable ) for me.

The modified code uses setBounds to provide borders for the image. Android matches the image within these boundaries.

Answer 7

If you want to use 1 image and display it in different sizes, you can use a scalable scale ( http://developer.android.com/guide/topics/resources/drawable-resource.html#Scale ).

Answer 8

You can use images of different sizes, which are used with different screen sizes / sizes, etc., so that your image looks right on all devices.

See here: http://developer.android.com/guide/practices/screens_support.html#support

Answer 9

Did you try to wrap the image in ScaleDrawable and then use it in your button?

Answer 10

Here is the function that I created for scaling vector drawings. I used it to install drawView TextView.

 /** * Used to load vector drawable and set it size to intrinsic values * * @param context Reference to {@link Context} * @param resId Vector image resource id * @param tint If not 0 - colour resource to tint the drawable with. * @param newWidth If not 0 then set the drawable width to this value and scale * height accordingly. * @return On success a reference to a vector drawable */ @Nullable public static Drawable getVectorDrawable(@NonNull Context context, @DrawableRes int resId, @ColorRes int tint, float newWidth) { VectorDrawableCompat drawableCompat = VectorDrawableCompat.create(context.getResources(), resId, context.getTheme()); if (drawableCompat != null) { if (tint != 0) { drawableCompat.setTint(ResourcesCompat.getColor(context.getResources(), tint, context.getTheme())); } drawableCompat.setBounds(0, 0, drawableCompat.getIntrinsicWidth(), drawableCompat.getIntrinsicHeight()); if (newWidth != 0.0) { float scale = newWidth / drawableCompat.getIntrinsicWidth(); float height = scale * drawableCompat.getIntrinsicHeight(); ScaleDrawable scaledDrawable = new ScaleDrawable(drawableCompat, Gravity.CENTER, 1.0f, 1.0f); scaledDrawable.setBounds(0,0, (int) newWidth, (int) height); scaledDrawable.setLevel(10000); return scaledDrawable; } } return drawableCompat; } 

Answer 11

• Using the "BATCH DRAWABLE IMPORT" function, you can import your own size depending on your example 20dp * 20dp

  • Now after import use the imported drawable_image as drawable_source for your button

  • It is easier

Answer 12

This is because you are not setLevel . after you setLevel(1) , it will be displayed as you want

Answer 13

I made a custom button class to achieve this.

CustomButton.java

 public class CustomButton extends android.support.v7.widget.AppCompatButton { private Drawable mDrawable; public CustomButton(Context context, AttributeSet attrs) { super(context, attrs); TypedArray a = context.getTheme().obtainStyledAttributes( attrs, R.styleable.CustomButton, 0, 0); try { float mWidth = a.getDimension(R.styleable.CustomButton_drawable_width, 0); float mHeight = a.getDimension(R.styleable.CustomButton_drawable_width, 0); Drawable[] drawables = this.getCompoundDrawables(); Drawable[] resizedDrawable = new Drawable[4]; for (int i = 0; i < drawables.length; i++) { if (drawables[i] != null) { mDrawable = drawables[i]; } resizedDrawable[i] = getResizedDrawable(drawables[i], mWidth, mHeight); } this.setCompoundDrawables(resizedDrawable[0], resizedDrawable[1], resizedDrawable[2], resizedDrawable[3]); } finally { a.recycle(); } } public Drawable getmDrawable() { return mDrawable; } private Drawable getResizedDrawable(Drawable drawable, float mWidth, float mHeight) { if (drawable == null) { return null; } try { Bitmap bitmap; bitmap = Bitmap.createBitmap((int)mWidth, (int)mHeight, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight()); drawable.draw(canvas); return drawable; } catch (OutOfMemoryError e) { // Handle the error return null; } } } 

attrs.xml

 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CustomButton"> <attr name="drawable_width" format="dimension" /> <attr name="drawable_height" format="dimension" /> </declare-styleable> </resources> 

Usage in XML

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.MainActivity"> <com.example.CustomButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/ic_hero" android:text="Avenger" custom:drawable_height="10dp" custom:drawable_width="10dp" /> </RelativeLayout> 

Answer 14

I do this as shown below. This creates a 100x100 image in the button regardless of the input image.

 drawable.bounds = Rect(0,0,100,100) button.setCompoundDrawables(drawable, null, null, null) 

Also not used ScaleDrawable . The lack of using button.setCompoundDrawablesRelativeWithIntrinsicBounds() solved my problem, because it seems that instead of the inner borders that you just set, the inner borders are used (the size of the original image).

Answer 15

I tried the methods of this post, but did not find them attractive. My solution was to use the image and text representation and align the image at the top and bottom with the text. Thus, I got the desired result. Here is the code:

 <RelativeLayout android:id="@+id/relativeLayout1" android:layout_width="match_parent" android:layout_height="48dp" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignTop="@+id/textViewTitle" android:layout_alignBottom="@+id/textViewTitle" android:src="@drawable/ic_back" /> <TextView android:id="@+id/textViewBack" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/textViewTitle" android:layout_alignBottom="@+id/textViewTitle" android:layout_toRightOf="@+id/imageView1" android:text="Back" android:textColor="@color/app_red" android:textSize="@dimen/title_size" /> </RelativeLayout>