ImageView in Android – Overview and Implementation

ImageView in Android – Overview and Implementation

ImageView is important as it provides a way to display visual content on our Android App. There can be no application(Maybe almost no Application!!) without providing some form of visual content and ImageView caters the need for us. The implementation is given below.

ImageView in android
ImageView in Android

 

<ImageView

    android:layout_width="match_parent"
    android:layout_height="match_parent" />

The layout_width and layout_height tags are mandatory properties that needs to be set. Once the Image View is constructed we can use it to hold images for us.

 

ImageView – Other Important Properties

The properties include

android:id – gives a unique id to the image view

android:src – loads the image from the given folder

android:background – sets a background color to the image (Maybe useful when you are working on setting a profile picture background color).

android:padding, android:margin – responsible for setting the padding and margin properties (These are common just like other views)

android:scaleType – This attribute is responsible for controlling how the image fits inside the image view. You have to note that, the image by default, goes to the center of the image view, and this becomes sometimes very difficult to control. Use this attribute to set the value so that you can move your image inside to your needs.

Properties of scaleType includes – fitXY, center, centerCrop, fillStartcenterInsidefitEndfitCenterfitStartmatrix.

android:adjustViewBounds – Sometime, we might need the image to protect its aspect ratio. Set this to preserve the aspect ratio.

android:tint – Play around with this property, it can be really helpful to provide better looking images.

android:tintMode – Blending mode to apply the tint of the color to the image.

 

The images needs to be checked if they satisfy your idea. Play around with the properties until you arrive at the desired combination for your image.

Check the below image i used for creating the signup/signin activity here.

SignUp image view
SignUp Image View

 

This is not your normal Image setup like you find in other tutorials. Can you guess how i created it. What are the properties i used here.

 

<ImageView
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:background="@drawable/logo"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="80dp"
    />

These properties came only after some trial and error. Always note that you have to keep in mind, about device rotation, device size when creating images and also placing them.

Using ImageViews in your Activity

Image Views can be accessed inside the activity just like any other view. You can use the below code to create an object for the view and set any type of listener to it.

ImageView imageView = (ImageView) findViewById(R.id.logoid);
You can set listeners to it using the setOnClickListener() like below

imageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {


        //Perform any action here

    }
});

ImageView class contains other public activities that can be used to set the properties to it. You can check here for more public function calls.

 

Some Quick Tips and Tricks with ImageView

If you have ever wondered, how the image in an Instagram or Facebook looks better, you need to understand about aspect ratio and image properties associated with ImageViews.

Remember, the basic height and width of the image that facebook and instagram asks you to crop, nothing more nothing less. This is because, the aspect ratio plays an important role in adjusting your image to the ImageView properly. If the aspect ratio is more or less, the picture looks poorly placed.

It is also to be noted, that every image sets to one background color very well. Can you guess what it is.

You guessed it right, it is White. All your favourite applications stick to the white background for giving a good clean look to the ImageView.

The next thing is to place the images and text properly. If you have a TextView along with the image be careful to properly place the Text. Do not place it too close or too far from the image.

There is a need to learn about how the tint and blend mode can perform lot of things to your image. Check this tutorial for example, how the image is given a “Ripple effect” on click.

As far as images are concerned with android. It is always some careful planning and at the end of the day some trial and error. Check what suits the look and feel of your application and stick to it.

You can drop in comments about imageView here, check out my tutorial here, where i teach you to create an android application in less than 3 hours (Am really serious!!).

 

“Learn and Be Curious”

 

Leave a Comment