ZOFTINO.COM android and web dev tutorials

Android ImageView Tutorial

Android ImageView widget is used to display images such as drawable and bitmap resources. ImageView widget provides attributes using which tint can be applied to images and images can be scaled.

This tutorials explains how to add ImageView in xml layout and to constraint layout programmatically, handle click events, use various scale types and attributes. The tutorial also shows how to display round-cornered and rotated images. It shows how to define animations in xml and apply to ImageView to rotate, scales and slide images.

Android ImageView Setting Image in XML

Below layout xml shows ImageView definition and setting image using src attribute.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/amazon"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"/>
</android.support.constraint.ConstraintLayout>

Android ImageView Setting Image Programmatically

Below code show how to add ImageView programmatically. The example adds image view to constraint layout and sets constraints to the image being added.

 int id = getResources().getIdentifier("ebay", "drawable", getPackageName());
ImageView imageView = new ImageView(this);
imageView.setId(R.id.image_new);
imageView.setImageResource(id);

ConstraintLayout cl = findViewById(R.id.image_layout);

ConstraintLayout.LayoutParams imageLP = new ConstraintLayout.LayoutParams(
        ConstraintLayout.LayoutParams.WRAP_CONTENT, ConstraintLayout.LayoutParams.WRAP_CONTENT);
imageView.setLayoutParams(imageLP);
cl.addView(imageView);

ConstraintSet constraintSet = new ConstraintSet();
constraintSet.clone(cl);

constraintSet.connect(imageView.getId(), ConstraintSet.TOP, R.id.image, ConstraintSet.BOTTOM, 24);
constraintSet.connect(imageView.getId(), ConstraintSet.LEFT, cl.getId(), ConstraintSet.LEFT, 16);
constraintSet.connect(imageView.getId(), ConstraintSet.RIGHT, cl.getId(), ConstraintSet.RIGHT, 16);

constraintSet.applyTo(cl); 

ImageView ScaleType

Using scaleType attribute of ImageView, image can be scaled in different ways to its bounds. Below picture shows image scaling using various scale types such as CENTER, CENTER_CROP, CENTER_INSIDE, FIT_CENTER, FIT_END, FIT_START, FIT_XY, and MATRIX. FIT_XY doesn’t maintain aspect ratio.

android imageview scaletype CENTER, CENTER_CROP, CENTER_INSIDE, FIT_CENTER, FIT_END, FIT_START, FIT_XY, and MATRIX examples

Android ImageView Attributes

Attribute android:adjustViewBounds is used to indicate whether aspect ratio of image be maintained or not with different scale types. Setting android:adjustViewBounds to true indicates that aspect ratio of the image be maintained.

Attributes android:baseline and android:baselineAlignBottom are realted to baseline of image within the view.

Setting attribute android:cropToPadding to makes image be cropped to fit within padding.

To set tinting color and tint mode of image, attributes android:tint and android:tintMode are used.

Android ImageView OnClick Listener

Below example sets attributes in click event handler of image view.

 private ImageView iv;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.imageview_layout);

    iv = findViewById(R.id.image2);
    iv.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
        }
    });
} 

Android ImageView Rounded Corners

There are several ways to display round-cornered image. You can display images as round-cornered images using card view, below layout shows just that.

android imageview round cornered image example
 <?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"
    tools:context=".ImageViewActivity">
    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:elevation="8dp"
        app:cardCornerRadius="6dp">
        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="matrix"
            android:src="@drawable/lights"/>
    </android.support.v7.widget.CardView>
</LinearLayout> 

Android ImageView Rotate Image

You can rotate image in image view using Matrix and calling postRotate on it as shown below.

android imageview rotate image example
ImageView iv = findViewById(R.id.image);
iv.setScaleType(ImageView.ScaleType.MATRIX);

Matrix matrix = new Matrix();
matrix.postRotate((float) 20, 50, 50);
iv.setImageMatrix(matrix); 

Android ImageView Animation

You can define animations in xml, load the animation using AnimationUtils and apply it to image view as shown below.

Applying animation to ImageView

 ImageView iv = findViewById(R.id.image);
Animation imgAnimationIn = AnimationUtils.
        loadAnimation(this, R.anim.rotation);
iv.startAnimation(imgAnimationIn); 

Rotation animation

On applying below animation to image view, image gets rotated 360 degrees for the duration of 2000 ms.

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:duration="2000"
        android:pivotX="50%"
        android:pivotY="50%">
    </rotate>
</set> 

Scale animation

On applying below animation to image view, image scales from 0 to full height and width for the duration of 900 ms

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false">
    <scale
        android:fromXScale="0.0" android:toXScale="1.0"
        android:fromYScale="0.0" android:toYScale="1.0"
        android:pivotX="50%" android:pivotY="50%"
        android:duration="900" />
</set> 

Slide animation

 <set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-60%p" android:toXDelta="0"
        android:duration="3000"/>
</set>