Android ImageView with example

ANDROID-IMAGEVIEW-with-simple-example.png

4th March, 2023

In Android, ImageView is a view used to display images. We can set the image to the ImageView using the android:src attribute. Let’s take an overview of Android ImageView.

1. Add ImageView in Android App

We can create/add Android ImageView in two ways:

1.1 Create/Add ImageView in XML layout file

Open the xml layout designer in Android studio and select the ImageView from the palette, add it to the layout.

Add-ImageView-Android-Studio.png

Android studio will ask you to select a resource for ImageView. Pick a resource and click the OK button.

Add-ImageView-Pick-resource-Android-Studio.png

Done! The ImageView has been successfully added to the XML layout file.

XML
content_copy light_mode remove
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"">

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

</LinearLayout>

We can also add our resources by clicking the + icon located at the corner.

Add-ImageView-Pick-resource-import-drawable-Android-Studio.png

1.2 Create ImageView Programmatically in Android

Alternatively, we can create/add Android ImageView programmatically using Kotlin/Java code. See the code below.

KotlinJava
content_copy light_mode remove
package com.androidchunk.helloimageview

import android.os.Bundle
import android.widget.ImageView
import android.widget.LinearLayout
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val linearLayout = findViewById<LinearLayout>(R.id.linearlayout12)

        //create a imageView
        val imageView = ImageView(this)
        //set image resource
        imageView.setImageResource(R.mipmap.ic_launcher)

        //add imageView to the layout
        linearLayout.addView(imageView)
    }
}
package com.androidchunk.helloimageview;

import android.os.Bundle;
import android.widget.ImageView;
import android.widget.LinearLayout;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        LinearLayout linearLayout = findViewById(R.id.linearlayout12);
        
        //create a imageView
        ImageView imageView = new ImageView(this);
        //set image resource
        imageView.setImageResource(R.mipmap.ic_launcher);
        
        //add imageView to the layout
        linearLayout.addView(imageView);
    }
}

2. Scale Types of Android ImageView

In Android, The ScaleType attribute is used to uniformly scaling the bounds of the imageView. ImageView can display image based on the ScaleType attribute. Below is the list of ScaleType of Android ImageView with preview.

Android-ImageView-ScaleType-Demo.png

[wpdatatable id=22]

XML
content_copy light_mode remove
<?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"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello Androidchunk!"
        android:textSize="22sp" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        android:scaleType="matrix"
        android:src="@drawable/cat_7535" />

</LinearLayout>

5. Android ImageView Example

Let’s take an example in which we will use Android ImageView.

Step 5.1: Create New Project

Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from the templates.

Step 5.2: Enable View Binding

In this example we are using Android Jetpack’s feature view binding.

Groovy
content_copy light_mode remove
plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    ...
    ...

    buildFeatures {
        viewBinding = true
    }
    ...
    ...
}

dependencies {
    ...
    ...
    ...
}

Step 5.3: Add Resource Images

Expand the res folder and add the following images to the drawable folder.

Images-in-android-res-folder.png

Step 5.4: Add ImageView to the XML Layout (UI)

Open the xml layout file and add a ImageView from the palette. See the code below.

XML
content_copy light_mode remove
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello Androidchunk!"
        android:textSize="22sp" />

    <ImageView
        android:id="@+id/bananaImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        android:src="@drawable/banana" />

    <ImageView
        android:id="@+id/appleImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        android:src="@drawable/apple" />

</LinearLayout>

Step 5.5: Update Activity File

Open the activity file and add a click listener to the ImageView. We will display a toast when the imageview is clicked. Run the app and check the output.

KotlinJava
content_copy light_mode remove
package com.androidchunk.helloimageview

import android.os.Bundle
import android.view.View
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.androidchunk.helloimageview.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    //view binding
    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.getRoot())

        //banana image click listener
        binding.bananaImageView.setOnClickListener(View.OnClickListener {
            Toast.makeText(
                this@MainActivity,
                "You clicked on the banana image",
                Toast.LENGTH_SHORT
            ).show()
        })
        //apple image click listener
        binding.appleImageView.setOnClickListener(View.OnClickListener {
            Toast.makeText(
                this@MainActivity,
                "You clicked on the apple image",
                Toast.LENGTH_SHORT
            ).show()
        })
    }
}
package com.androidchunk.helloimageview;

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import com.androidchunk.helloimageview.databinding.ActivityMainBinding;

class MainActivity extends AppCompatActivity {
    //view binding
    private ActivityMainBinding binding;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        //banana image click listener
        binding.bananaImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "You clicked on the banana image", Toast.LENGTH_SHORT).show();
            }
        });
        //apple image click listener
        binding.appleImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "You clicked on the apple image", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Step 5.6: Output

Happy coding!

Leave a Reply