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.
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>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); 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.
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.
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);
}
});
} 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.
<?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> You can rotate image in image view using Matrix and calling postRotate on it as shown below.
ImageView iv = findViewById(R.id.image);
iv.setScaleType(ImageView.ScaleType.MATRIX);
Matrix matrix = new Matrix();
matrix.postRotate((float) 20, 50, 50);
iv.setImageMatrix(matrix); You can define animations in xml, load the animation using AnimationUtils and apply it to image view as shown below.
ImageView iv = findViewById(R.id.image);
Animation imgAnimationIn = AnimationUtils.
loadAnimation(this, R.anim.rotation);
iv.startAnimation(imgAnimationIn); 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> 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> <set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="-60%p" android:toXDelta="0"
android:duration="3000"/>
</set>