ImageView ScaleType in Android with Example
Last Updated :
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" />
MATRIXExample
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:
Similar Reads
ImageView in Android with Example
ImageView class is used to display any kind of image resource in the android application either it can be android.graphics.Bitmap or android.graphics.drawable.Drawable (It is a general abstraction for anything that can be drawn in Android). ImageView class or android.widget.ImageView inherits the an
4 min read
Image Switcher in Android with Example
Sometimes, you may not want an image to appear suddenly on the screen. Instead, you might prefer a smooth transition from one image to another using animation. Android offers a tool called ImageSwitcher to help with this. An ImageSwitcher lets you add simple transition effects to your images.What ar
4 min read
Auto Image Slider in Android with Example
Auto Image Slider is one of the most seen UI components in Android. This type of slider is mostly seen inside the apps of big E-commerce sites such as Flipkart, Amazon, and many more. Auto Image Slider is used to represent data in the form of slides that change after a specific interval of time. In
6 min read
GridView in Android with Example
A GridView is a type of AdapterView that displays items in a two-dimensional scrolling grid. Items are inserted into this grid layout from a database or from an array. The adapter is used for displaying this data, setAdapter() method is used to join the adapter with GridView. The main function of th
5 min read
GalleryView in Android with Example
In Android, Gallery is a view that can show items in a center-locked, horizontal scrolling list, and hence the user can able to select a view, and then the user-selected view will be shown in the center of the Horizontal list. "N" number of items can be added by using the Adapter. The adapter is a b
8 min read
TextView widget in Android with Examples
Widget refers to the elements of the UI (User Interface) that help the user interact with the Android App. TextView is one of many such widgets which can be used to improve the UI of the app. TextView refers to the widget which displays some text on the screen based on the layout, size, colour, etc
5 min read
TextView in Android with Example
TextView is a simple widget that is seen in every android application. This widget is used to display simple text within the android application. We can add custom styling to the text that we have to show. In this article, we will take a look at How to create a simple Text View in an android applica
2 min read
Android ListView in Java with Example
A ListView in Android is a type of AdapterView that displays a vertically scrollable list of items, with each item positioned one below the other. Using an adapter, items are inserted into the list from an array or database efficiently. For displaying the items in the list method setAdaptor() is use
3 min read
ImageView in Android using Jetpack Compose
Images, graphics, and vectors attract many users as they provide a lot of information in a very informative way. ImageView in Android is used to display different types of images, from drawables to Bitmaps. In this article, we will take a look at the implementation of an ImageView in Android using J
3 min read
Line Graph View in Android with Example
If you are looking for a view to represent some statistical data or looking for a UI for displaying a graph in your app then in this article we will take a look on creating a line graph view in our Android App using the GraphView library. What we are going to build in this article? We will be buildi
3 min read