ImageView ScaleType in Android with Example

ScaleType is used for uniformly scaling the image bounds to the ImageView. Android ImageView provides various types of ScaleType for different configurations.

• CENTER 
• CENTER_CROP
• CENTER_INSIDE
• FIT_CENTER
• FIT_END
• FIT_START
• FIT_XY
• MATRIX

Now, we will look at each of these ScaleType in detail. For exploring these scale types we will use the GeeksforGeeks logo as our image resource also set the background color of ImageView as black for the reference purpose.

1. CENTER

This scale type will center the image inside the view. But, it does not perform any scale to the image. Below is the code for the CENTER scale type.

XML

<ImageView
        android:id="@+id/simpleImageView"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:scaleType="center"
        android:src="@drawable/gfg"
        android:background="@color/black"
        tools:ignore="MissingConstraints" />

CENTER

2. CENTER_CROP

This scale type scale the image uniformly .i.e., maintain the image’s aspect ratio in order to make the dimensions(width and height) equal to or larger than the  ImageView dimension.

XML

<ImageView
        android:id="@+id/simpleImageView"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/gfg"
        android:background="@color/black"
        tools:ignore="MissingConstraints" />

CENTER_CROP

3. CENTER_INSIDE

CENTER_INSIDE will center the image inside the ImageView container. This scale type does not match the image edge to the edge of the view.

XML

<ImageView
        android:id="@+id/simpleImageView"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:scaleType="centerInside"
        android:src="@drawable/gfg"
        android:background="@color/black"
        tools:ignore="MissingConstraints" />

CENTER_INSIDE

4. FIT_CENTER

It will scale the image from the center. FIT_CENTER makes sure that the image is completely fit inside the ImageView and the image’s vertical or the horizontal axis is going to be exactly the same as the view.

XML

<ImageView
        android:id="@+id/simpleImageView"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:scaleType="fitCenter"
        android:src="@drawable/gfg"
        android:background="@color/black"
        tools:ignore="MissingConstraints" />

FIT_CENTER

5. FIT_END

It is used to scale the image file to the end of the view(ImageView). This scale type scale the image from the end of the container.

XML

<ImageView
        android:id="@+id/simpleImageView"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:scaleType="fitEnd"
        android:src="@drawable/gfg"
        android:background="@color/black"
        tools:ignore="MissingConstraints" />

FIT_END

6. FIT_START

This is used to scale the image to the start of the container. FIT_START scale the image from the start of the container.

XML

<ImageView
        android:id="@+id/simpleImageView"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:scaleType="fitStart"
        android:src="@drawable/gfg"
        android:background="@color/black"
        tools:ignore="MissingConstraints" />

FIT_START

7.  FIT_XY

FIT_XY done the scaling using the fill attribute. It will fill the image from the X and Y coordinates of ImageView.

XML

<ImageView
        android:id="@+id/simpleImageView"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:scaleType="fitXY"
        android:src="@drawable/gfg"
        android:background="@color/black"
        tools:ignore="MissingConstraints" />

FIT_XY

8. MATRIX

It is used to scale the image using the image matrix when drawing. It is recommended to use whenever you want to customize the way you want to rotate the image or scale the image etc.

XML

<ImageView
        android:id="@+id/simpleImageView"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:scaleType="matrix"
        android:src="@drawable/gfg"
        android:background="@color/black"
        tools:ignore="MissingConstraints" />

MATRIX

Example

In this example, we will perform scaling using the various scale type attributes on the click event listener of a button and shows the image with various scale type, and also toast a message for the name of the scale type.

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Adding resources

Before moving further, we will add the following color attributes in our colors.xml resource file. Go to res > values > colors.xml and add them.

XML

<resources>
    <color name="colorPrimary">#0F9D58</color>
    <color name="colorPrimaryDark">#16E37F</color>
    <color name="colorAccent">#03DAC5</color>
</resources>

Step 3: Creating the layout file

In this step, we will create the layout for our application. For this, we are using the buttons for various scale types. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/st_image"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:src="@drawable/gfg"
        android:background="@color/black"
        tools:ignore="MissingConstraints" />

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

        <Button
            android:id="@+id/st_center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="8dp"
            android:backgroundTint="@color/colorPrimary"
            android:text="CENTER"/>

        <Button
            android:id="@+id/st_center_crop"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_weight="1"
            android:backgroundTint="@color/colorPrimary"
            android:text="CENTER_CROP"/>

    </LinearLayout>


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

        <Button
            android:id="@+id/st_center_inside"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:backgroundTint="@color/colorPrimary"
            android:layout_margin="8dp"
            android:text="CENTER_INSIDE"/>

        <Button
            android:id="@+id/st_fit_center"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_weight="1"
            android:backgroundTint="@color/colorPrimary"
            android:text="FIT_CENTER"/>

    </LinearLayout>

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

        <Button
            android:id="@+id/st_fit_end"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="8dp"
            android:backgroundTint="@color/colorPrimary"
            android:text="FIT_END"/>

        <Button
            android:id="@+id/st_fit_start"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:backgroundTint="@color/colorPrimary"
            android:layout_weight="1"
            android:text="FIT_START"/>

    </LinearLayout>

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

        <Button
            android:id="@+id/st_fit_xy"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="8dp"
            android:backgroundTint="@color/colorPrimary"
            android:text="FIT_XY"/>

        <Button
            android:id="@+id/st_matrix"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_weight="1"
            android:backgroundTint="@color/colorPrimary"
            android:text="MATRIX"/>

    </LinearLayout>

</LinearLayout>

Step 4: Working with MainActivity.java file

In this step, we will initialize our ImageView and Buttons and attach a listener to them. On completion of the listener event, a toast message will be shown about the name of the scale type.  We can also setup the scale type using java code. Below is the code for the MainActivity.java file.

Java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private ImageView img;
    private Button center, center_crop, center_inside, fit_center, fit_end, fit_start, fit_xy, matrix;

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

        // Initializing method..
        init();
    }

    private void init(){

        img = findViewById(R.id.st_image);

        center = findViewById(R.id.st_center);
        center.setOnClickListener((View.OnClickListener) this);

        center_crop = findViewById(R.id.st_center_crop);
        center_crop.setOnClickListener((View.OnClickListener) this);

        center_inside = findViewById(R.id.st_center_inside);
        center_inside.setOnClickListener((View.OnClickListener) this);

        fit_center = findViewById(R.id.st_fit_center);
        fit_center.setOnClickListener((View.OnClickListener) this);

        fit_end = findViewById(R.id.st_fit_end);
        fit_end.setOnClickListener((View.OnClickListener) this);

        fit_start = findViewById(R.id.st_fit_start);
        fit_start.setOnClickListener((View.OnClickListener) this);

        fit_xy = findViewById(R.id.st_fit_xy);
        fit_xy.setOnClickListener((View.OnClickListener) this);

        matrix = findViewById(R.id.st_matrix);
        matrix.setOnClickListener((View.OnClickListener) this);
    }

    public void onClick(View view){
        switch (view.getId()){
            case R.id.st_center:
                img.setScaleType(ImageView.ScaleType.CENTER);
                Toast.makeText(this, "SCALE TYPE - CENTER", Toast.LENGTH_SHORT).show();
                break;

            case R.id.st_center_crop:
                img.setScaleType(ImageView.ScaleType.CENTER_CROP);
                Toast.makeText(this, "SCALE TYPE - CENTER_CROP", Toast.LENGTH_SHORT).show();
                break;
            case R.id.st_center_inside:
                img.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
                Toast.makeText(this, "SCALE TYPE - CENTER_INSIDE", Toast.LENGTH_SHORT).show();
                break;
            case R.id.st_fit_center:
                img.setScaleType(ImageView.ScaleType.FIT_CENTER);
                Toast.makeText(this, "SCALE TYPE - FIT_CENTER", Toast.LENGTH_SHORT).show();
                break;
            case R.id.st_fit_end:
                img.setScaleType(ImageView.ScaleType.FIT_END);
                Toast.makeText(this, "SCALE TYPE - FIT_END", Toast.LENGTH_SHORT).show();
                break;
            case R.id.st_fit_start:
                img.setScaleType(ImageView.ScaleType.FIT_START);
                Toast.makeText(this, "SCALE TYPE - FIT_START", Toast.LENGTH_SHORT).show();
                break;
            case R.id.st_fit_xy:
                img.setScaleType(ImageView.ScaleType.FIT_XY);
                Toast.makeText(this, "SCALE TYPE - FIT_XY", Toast.LENGTH_SHORT).show();
                break;
            case R.id.st_matrix:
                img.setScaleType(ImageView.ScaleType.MATRIX);
                Toast.makeText(this, "SCALE TYPE - MATRIX", Toast.LENGTH_SHORT).show();
                break;
        }
    }

}

Output: