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.
Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!
Android ImageView | 6 Things to do
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
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:
- center
- centerInside
- centerCrop
- fitXY
- fitCenter
- fitStart
- fitEnd
- 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:
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:
Learn more about Imageview Cropping with Source code here.
Explore some more ImageView properties from Google’s official documentation here.
