I have 6 ImageButton in my activity, I set images through my code in them ( not using xml).
I want them to cover 75% of the button area. But where as some images cover less area, some are too big to fit into the imageButton. How to programatically resize and show them? Below is the screen shot
below is the xml-file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginBottom="5sp"
android:layout_marginLeft="2sp"
android:layout_marginRight="5sp"
android:layout_marginTop="0sp" >
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<ImageButton
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:id="@+id/button_topleft"
android:layout_marginBottom="5sp"
android:layout_marginLeft="2sp"
android:layout_marginRight="5sp"
android:layout_marginTop="0sp"
/>
<ImageButton
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:id="@+id/button_topright"
android:layout_marginBottom="5sp"
android:layout_marginLeft="2sp"
android:layout_marginRight="5sp"
android:layout_marginTop="0sp"
/>
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<ImageButton
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:id="@+id/button_repeat"
android:layout_marginBottom="5sp"
android:layout_marginLeft="2sp"
android:layout_marginRight="5sp"
android:layout_marginTop="0sp"
/>
<ImageButton
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:id="@+id/button_next"
android:layout_marginBottom="5sp"
android:layout_marginLeft="2sp"
android:layout_marginRight="5sp"
android:layout_marginTop="0sp"
/>
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<ImageButton
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:id="@+id/button_bottomleft"
android:layout_marginBottom="5sp"
android:layout_marginLeft="2sp"
android:layout_marginRight="5sp"
android:layout_marginTop="0sp"
/>
<ImageButton
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:id="@+id/button_bottomright"
android:layout_marginBottom="5sp"
android:layout_marginLeft="2sp"
android:layout_marginRight="5sp"
android:layout_marginTop="0sp"
/>
</LinearLayout>
</LinearLayout>
and a snippet of myClass.java:
public void addImageButtons()
{
iB_topleft = (ImageButton) findViewById(R.id.button_topleft);
iB_topright = (ImageButton) findViewById(R.id.button_topright);
iB_bottomleft = (ImageButton) findViewById(R.id.button_bottomleft);
iB_bottomright = (ImageButton) findViewById(R.id.button_bottomright);
iB_next = (ImageButton) findViewById(R.id.button_next);
iB_repeat = (ImageButton) findViewById(R.id.button_repeat);
}
public void setImageNextAndRepeat()
{
iB_topleft .setImageResource(R.drawable.aa);
iB_topright.setImageResource(R.drawable.bb);
iB_bottomleft.setImageResource(R.drawable.cc);
iB_bottomright.setImageResource(R.drawable.dd);
iB_next.setImageResource(R.drawable.next);
iB_repeat.setImageResource(R.drawable.repeat);
}
This question is related to
android
image
android-linearlayout
scale
imagebutton
I'm using the following code in xml
android:adjustViewBounds="true"
android:scaleType="centerInside"
It worked well in my case. First, you download an image and rename it as iconimage, locates it in the drawable folder. You can change the size by setting android:layout_width
or android:layout_height
. Finally, we have
<ImageButton
android:id="@+id/answercall"
android:layout_width="120dp"
android:layout_height="80dp"
android:src="@drawable/iconimage"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:scaleType="fitCenter" />
Try to use android:scaleType="fitXY"
in i-Imagebutton xml
You can make your ImageButton widget as I did. In my case, I needed a widget with a fixed icon size. Let's start from custom attributes:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ImageButtonFixedIconSize">
<attr name="imageButton_icon" format="reference" />
<attr name="imageButton_iconWidth" format="dimension" />
<attr name="imageButton_iconHeight" format="dimension" />
</declare-styleable>
</resources>
Widget class is quite simple (the key point is padding calculations in onLayout method):
class ImageButtonFixedIconSize
@JvmOverloads
constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = android.R.attr.imageButtonStyle
) : ImageButton(context, attrs, defStyleAttr) {
private lateinit var icon: Drawable
@Px
private var iconWidth: Int = 0
@Px
private var iconHeight: Int = 0
init {
scaleType = ScaleType.FIT_XY
attrs?.let { retrieveAttributes(it) }
}
/**
*
*/
override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
val width = right - left
val height = bottom - top
val horizontalPadding = if(width > iconWidth) (width - iconWidth) / 2 else 0
val verticalPadding = if(height > iconHeight) (height - iconHeight) / 2 else 0
setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)
setImageDrawable(icon)
super.onLayout(changed, left, top, right, bottom)
}
/**
*
*/
private fun retrieveAttributes(attrs: AttributeSet) {
val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ImageButtonFixedIconSize)
icon = typedArray.getDrawable(R.styleable.ImageButtonFixedIconSize_imageButton_icon)!!
iconWidth = typedArray.getDimension(R.styleable.ImageButtonFixedIconSize_imageButton_iconWidth, 0f).toInt()
iconHeight = typedArray.getDimension(R.styleable.ImageButtonFixedIconSize_imageButton_iconHeight, 0f).toInt()
typedArray.recycle()
}
}
And at last you should use your widget like this:
<com.syleiman.gingermoney.ui.common.controls.ImageButtonFixedIconSize
android:layout_width="90dp"
android:layout_height="63dp"
app:imageButton_icon="@drawable/ic_backspace"
app:imageButton_iconWidth="20dp"
app:imageButton_iconHeight="15dp"
android:id="@+id/backspaceButton"
tools:ignore="ContentDescription"
/>
Refer below link and try to find what you really want:
ImageView.ScaleType CENTER Center the image in the view, but perform no scaling.
ImageView.ScaleType CENTER_CROP Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
ImageView.ScaleType CENTER_INSIDE Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
ImageView.ScaleType FIT_CENTER Scale the image using CENTER.
ImageView.ScaleType FIT_END Scale the image using END.
ImageView.ScaleType FIT_START Scale the image using START.
ImageView.ScaleType FIT_XY Scale the image using FILL.
ImageView.ScaleType MATRIX Scale using the image matrix when drawing.
https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
I'm using android:scaleType="fitCenter"
with satisfaction.
I recently found out by accident that since you have more control on a ImageView that you can set an onclicklistener for an image here is a sample of a dynamically created image button
private int id;
private bitmap bmp;
LinearLayout.LayoutParams familyimagelayout = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT );
final ImageView familyimage = new ImageView(this);
familyimage.setBackground(null);
familyimage.setImageBitmap(bmp);
familyimage.setScaleType(ImageView.ScaleType.FIT_START);
familyimage.setAdjustViewBounds(true);
familyimage.setId(id);
familyimage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//what you want to do put here
}
});
Source: Stackoverflow.com