How to Set Image in a Image View on Click in Android Studio

In this article you will learn how to set image in a Image View by click on the image in Android apps.

Introduction

In this article, you will learn how to set an image in an Image View on a click.

Step 1

First I used many Image Views and ScrollViews for the sliding activity. The first Image View sets the image on a button click and the others contain the images to be set. I saved the images in the drawable folder by copy and paste.

Step 2

Open the layout file activity_main.xml and write this:

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2.   
  3. <LinearLayout  
  4.         android:layout_width="fill_parent"  
  5.         android:layout_height="fill_parent"  
  6.         xmlns:android="http://schemas.android.com/apk/res/android"  
  7.         android:orientation="vertical"  
  8.         android:background="#80000000">  
  9.   
  10.   <ImageView  
  11.           android:layout_width="wrap_content"  
  12.           android:layout_height="wrap_content"  
  13.           android:id="@+id/imageView1"  
  14.           android:layout_gravity="center"/>  
  15.   <Button  
  16.           android:layout_width="wrap_content"  
  17.           android:layout_height="wrap_content"  
  18.           android:text="New Button"  
  19.           android:id="@+id/button" android:layout_gravity="center"  
  20.           android:visibility="invisible"/>  
  21.   
  22.   <HorizontalScrollView  
  23.           android:layout_width="200dp"  
  24.           android:layout_height="wrap_content"  
  25.           android:id="@+id/scrollView"  
  26.           android:layout_gravity="center">  
  27.   
  28.     <LinearLayout  
  29.             android:layout_width="fill_parent"  
  30.             android:layout_height="wrap_content"  
  31.             android:orientation="horizontal">  
  32.   
  33.       <ImageView  
  34.               android:src="@drawable/image2"  
  35.               android:layout_width="125dp"  
  36.               android:layout_height="fill_parent"  
  37.               android:id="@+id/imageView2"  
  38.               android:padding="15dp"/>  
  39.   
  40.       <ImageView  
  41.               android:src="@drawable/image3"  
  42.               android:layout_width="125dp"  
  43.               android:layout_height="125dp"  
  44.               android:id="@+id/imageView3"  
  45.               android:layout_gravity="center"  
  46.               android:padding="15dp"/>  
  47.   
  48.       <ImageView  
  49.               android:src="@drawable/images4"  
  50.               android:layout_width="125dp"  
  51.               android:layout_height="125dp"  
  52.               android:id="@+id/imageView4"  
  53.               android:layout_gravity="center"  
  54.               android:padding="15dp"/>  
  55.   
  56.       <ImageView  
  57.               android:src="@drawable/image5"  
  58.               android:layout_width="125dp"  
  59.               android:layout_height="125dp"  
  60.               android:id="@+id/imageView5"  
  61.               android:layout_gravity="center"  
  62.               android:padding="15dp"/>  
  63.   
  64.       <ImageView  
  65.               android:src="@drawable/image6"  
  66.               android:layout_width="125dp"  
  67.               android:layout_height="125dp"  
  68.               android:id="@+id/imageView6"  
  69.               android:layout_gravity="center"  
  70.               android:padding="15dp"/>  
  71.   
  72.       <ImageView  
  73.               android:src="@drawable/image7"  
  74.               android:layout_width="125dp"  
  75.               android:layout_height="125dp"  
  76.               android:id="@+id/imageView7"  
  77.               android:layout_gravity="center"  
  78.               android:padding="15dp"/>  
  79.   
  80.     </LinearLayout>  
  81.   
  82.   </HorizontalScrollView>  
  83.   <TextView  
  84.           android:layout_width="fill_parent"  
  85.           android:layout_height="wrap_content"  
  86.           android:textAppearance="?android:attr/textAppearanceMedium"  
  87.           android:text="Click on the Image"  
  88.           android:id="@+id/textView"  
  89.           android:layout_marginTop="50dp"  
  90.          android:textColor="#45454545"  
  91.           android:layout_marginLeft="120dp"/>  
  92.   
  93. </LinearLayout>  
Open the Java class file Main_Activity.java and write this:
  1. package com.wallpaer;  
  2. import android.graphics.Bitmap;  
  3. import android.graphics.BitmapFactory;  
  4. import android.os.Bundle;  
  5. import android.app.Activity;  
  6. import android.view.View;  
  7. import android.widget.Button;  
  8. import android.widget.ImageView;  
  9. import java.io.IOException;  
  10. import java.io.InputStream;  
  11.   
  12. public class MainActivity extends Activity implements View.OnClickListener{   
  13.     ImageView imageView1;  
  14.     Button button;  
  15.      int tophone;   
  16.     @Override  
  17.     protected void onCreate(Bundle savedInstanceState) {  
  18.         super.onCreate(savedInstanceState);  
  19.         setContentView(R.layout.activity_main);  
  20.         imageView1=(ImageView)findViewById(R.id.imageView1);  
  21.         tophone=R.drawable.ic_launcher;  
  22.         ImageView imageView2=(ImageView)findViewById(R.id.imageView2);  
  23.         ImageView imageView3=(ImageView)findViewById(R.id.imageView3);  
  24.         ImageView imageView4=(ImageView)findViewById(R.id.imageView4);  
  25.         ImageView imageView5=(ImageView)findViewById(R.id.imageView5);  
  26.         ImageView imageView6=(ImageView)findViewById(R.id.imageView6);  
  27.         ImageView imageView7=(ImageView)findViewById(R.id.imageView7);  
  28.         button=(Button)findViewById(R.id.button);  
  29.         imageView2.setOnClickListener(this);  
  30.         imageView3.setOnClickListener(this);  
  31.         imageView4.setOnClickListener(this);
            imageView5.setOnClickListener(
    this);imageView2.setOnClickListener(this);  
  32.         imageView6.setOnClickListener(this);  
  33.         imageView7.setOnClickListener(this);  
  34.         button.setOnClickListener(this);  
  35.        }  
  36.       public void onClick(View v)  
  37.       {  
  38.         switch(v.getId())  
  39.         {  
  40.             case R.id.imageView2:  
  41.                 imageView1.setImageResource(R.drawable.image2);  
  42.                 tophone=R.drawable.image3;  
  43.                 break;  
  44.             case R.id.imageView3:  
  45.                 imageView1.setImageResource(R.drawable.image3);  
  46.                 tophone=R.drawable.image5;  
  47.                 break;  
  48.             case R.id.imageView4:  
  49.                 imageView1.setImageResource(R.drawable.images4);  
  50.                 tophone=R.drawable.ic_launcher;  
  51.                 break;   
  52.             case R.id.imageView5:  
  53.                 imageView1.setImageResource(R.drawable.image2);  
  54.                 tophone=R.drawable.ic_launcher;  
  55.                 break;  
  56.             case R.id.imageView6:  
  57.                 imageView1.setImageResource(R.drawable.image6);  
  58.                 tophone=R.drawable.ic_launcher;  
  59.                 break;  
  60.             case R.id.imageView7:  
  61.                 imageView1.setImageResource(R.drawable.image7);  
  62.                 tophone=R.drawable.ic_launcher;  
  63.                 break;  
  64.             case R.id.button:  
  65.                 InputStream a=getResources().openRawResource(tophone);  
  66.                 Bitmap whatever= BitmapFactory.decodeStream(a);  
  67.                try{  
  68.                    getApplicationContext().setWallpaper(whatever);  
  69.                }  
  70.                catch(IOException e){  
  71.                    e.printStackTrace();  
  72.                }  
  73.                    break;  
  74.         }  
  75.     }  
  76. }  
Step 3

First the User Interface will appear like this:

Clipboard02.jpg

Step 4

On the click, the image will be set on Image View and look like this:

Clipboard03.jpg

Step 5

You can change the image by sliding these images like this:

Clipboard04.jpg