android imageview

Android ImageView | Basic Understanding and 6 Great things To Do

Android ImageView is a great android widget to display images in your android app. In this blog, we will explore 6 amazing things you can do with imageview widget in Android Studio.

Android ImageView | 6 Things to do

android imageview
ImageView

Setting and Changing Image

In Android, the imageview can be set in the xml file using src attribute of the ImageView tag. This is shown in the code below:

  <ImageView
        android:id="@+id/image_View"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:src="@drawable/pale" />

The width and height are the required xml attributes where as you can also set and also change an image on any motion on click of a button in Java file using the code below:

imageView.setImageDrawable(getResources().getDrawable(R.drawable.pale));

Fading Android ImageView

You can add fading effect to your image using the alpha attribute in your imageview. Here is the code for the same:

    <ImageView
        android:id="@+id/image_View"
        android:layout_width="300dp"
        android:scaleType="fitCenter"
        android:layout_height="300dp"
        android:src="@drawable/pale"
        android:alpha="50" />

You can also do this in your Java file using following line of code:

imageView.setImageAlpha(20);

Applying the Tint effect

One can easily apply a tint effect to imageview in xml using the following line of code

<ImageView
        android:id="@+id/image_View"
        android:layout_width="300dp"
        android:scaleType="fitCenter"
        android:layout_height="300dp"
        android:src="@drawable/pale"
        android:tint="@color/colorPrimary" />

You can achieve a similar result in your Java file, using the following line of code:

imageView.setImageTintList(ColorStateList.valueOf(getResources().getColor(R.color.colorPrimary)));

Scaling and Cropping Image

You can easily scale, resize or crop your image inside a imageView. ImageView provide with 8 different such propoerties of resizing. They are:

  1. center
  2. centerInside
  3. centerCrop
  4. fitXY
  5. fitCenter
  6. fitStart
  7. fitEnd
  8. matrix

To resize image use the following code in your xml file:

   <ImageView
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/pale"/>

To scale an image using Java, use following line of code:

imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);

You can learn more about ImageView ScaleType from blog here:

ImageView Scaletype

Toggle Visibility

You can easily Toggle the visibility of your imageview using the visibility attribute of your xml file.

There are three options to visibility, they are: VISIBLE, INVISIBLE and GONE.

VISIBILE: make the image visible

INVISIBLE: makes the image invisible but the image is still there in the layout and takes its space.

GONE: The image vanishes away from the layout, its gone! Just like Santa Claus.

Here is the code to toggle the imageview visibility:

 <ImageView
        android:visibility="invisible"
        android:id="@+id/image_View"
        android:layout_width="300dp"
        android:scaleType="fitCenter"
        android:layout_height="300dp"
        android:src="@drawable/pale"
        android:tint="@color/colorPrimary" />

You can achieve the same result in your android java file using the same line of code:

imageView.setVisibility(View.INVISIBLE);

Animating the Android ImageView

You can also animate your imageviewusing java code. There are 8 different styles of animation that we can apply to imageview.

You can see more about ImageView animations in a blog here:

ImageView Animations

Learn more about Imageview Cropping with Source code here.

Explore some more ImageView properties from Google’s official documentation here.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.