ImageView ScaleType in Android with Example

29 Dec, 2021
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
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:
Picked
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.