Sunday, August 23, 2015

How to resize/scale an ImageButton in Android

Resize/Scale an ImageButton
ImageButton displays an image on a regular Button instead text. As a regular Button widget users can click on the ImageButton and it acts the same as a regular Button. Sometimes android developers want to show an image to a Button instead of using a regular Button widget. Then it looks awesome.

The image of the ImageButton surface can be defined by the src attribute in the XML layout file or by the setImageResource method in the java or kotlin script file. But the problem is when we use an image in the ImageButton widget the original image may be bigger than the expected size. In this situation, we have to resize/scale it.

In this android app development tutorial, we will demonstrate how can an app developer scale their image in an ImageButton widget. We can scale down or scale up our image by using the ImageButton width and height attribute in the XML layout file.

So easy, but the actual problem arrives when the scaled image not showing as expected inside the ImageButton. So, we have to specify the scale type of the ImageButton image. ImageButton has an attribute named scaleType to specify the image scale type.

There are several types of scale types such as FIT_CENTER, FIT_XY, CENTER_CROP, CENTER_INSIDE, FIT_START, MATRIX, etc. Simply we can define the image source of ImageButton and scale type in XML layout or by using java/kotlin file. After all, we get an ImageButton with a nicely placed image on it.
activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F4F0EC"
    android:padding="16dp"
    tools:context=".MainActivity">

    <!-- ImageButton with default size, no scaling -->
    <ImageButton
        android:id="@+id/ib"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="64dp"
        android:src="@drawable/share_solid"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- ImageButton scaled, width 100dp and height 50dp by XML -->
    <!-- ImageButton scale type fit center by XML -->
    <ImageButton
        android:id="@+id/ib2"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_marginTop="24dp"
        android:src="@drawable/share_solid"
        android:scaleType="fitCenter"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ib" />

    <!-- ImageButton scaled, width 200dp and height 100dp by XML -->
    <!-- ImageButton scale type center inside by XML -->
    <ImageButton
        android:id="@+id/ib3"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginTop="24dp"
        android:src="@drawable/share_solid"
        android:scaleType="centerInside"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ib2" />

    <!-- ImageButton scaling programmatically in java code -->
    <ImageButton
        android:id="@+id/ib4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:src="@drawable/share_solid"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ib3" />

</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java

package com.cfsuman.androidtutorials;

import android.os.Bundle;
import android.app.Activity;
import android.widget.ImageButton;
import android.widget.ImageView;
import androidx.constraintlayout.widget.ConstraintLayout;


public class MainActivity extends Activity {

        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);

                // Get the widgets reference from XML layout
                ImageButton ib4 = findViewById(R.id.ib4);

                // Get the last ImageButton's layout parameters
                ConstraintLayout.LayoutParams params
                        = (ConstraintLayout.LayoutParams)
                        ib4.getLayoutParams();

                // Set the height of this ImageButton
                params.height = 200;

                // Set the width of that ImageButton
                params.width = 350;

                // Apply the updated layout parameters to last ImageButton
                ib4.setLayoutParams(params);

                // Set the ImageButton image scale type for fourth ImageButton
                ib4.setScaleType(ImageView.ScaleType.FIT_XY);
        }
}