Search Tutorials

Sunday 15 September 2013

Change image when we click on buttons in Android

This is third android application and in this application, you will learn how to call a method when we click on any button and how to change image on button click. Create new project and drag image view, two button views in linear layout and give id imageview1, button1 and button2 respectively. To change image on button click, we are calling a method in Java file but we have to declare this method in XML file, use this code in button tag : android:onClick=”method_name” and use same method name in Java file and passview object in this method which will keep id of clicked button. The code of android XML file is give below:

Change image when we click on buttons in AndroidChange image when we click on buttons in Android


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#458"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="First Image "
        android:onClick="mess"/>
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="Second Image"
        android:onClick="mess"/>
</LinearLayout>

Now open android Java file and use the same method which is declared in button tag in XML file. Use view_object.getId() to get id of clicked button and perform action according to which button is clicked. The code of android Java file is given below:


package com.innosen.third; //your package name 

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.app.Activity;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    
    //mess method is declared in XML file
    //This function will call when we click on any button
    //and we have to pass View object in this method
    //which will take id of clicked button
     
    public void mess(View v)
    {
      //initialize image view object
      ImageView im=(ImageView)findViewById(R.id.imageView1);
      //get clicked button id from view object
      switch(v.getId())
      {
      case R.id.button1:
      //if button1 is clicked than set image1
      im.setImageResource(R.drawable.myimage); 
      break;
      case R.id.button2:
      //if button2 is clicked than set image2
      im.setImageResource(R.drawable.myimage2); 
      break;
      }  
    }     
}

Now runs your project on emulator and if you have any doubt please comment.

Related Tutorials:- 

Change image when we click on a single button

Take numbers from EditText and add them and display on TextView

Make Temperature conversion Application

Create Menu using XML

Create Menu using Java

14 comments:

  1. hmmmm , its pretty simple and nice using a switch statement :P

    ReplyDelete
  2. thank u so much for this ... its really help ful for me.. easy and interesting.. i just tried ur LoginWithMySQL project, in there how create mysql db and how to connect with project with eclipse tool.

    ReplyDelete
    Replies
    1. Install XAMPP in your pc and open localhost in your browser than go to PhpMyAdmin panel and create database & table there. After that place all php files in your XAMPP->htdocs folder and run project in eclipse.

      Delete
  3. Anonymous7:49 am

    I am getting an error:

    Error package R does not exist

    ReplyDelete
    Replies
    1. I think you have not post the images to the drawable folder, first add two pictures and try.

      Delete
  4. android:onClick="mess"
    What is the use of it ?

    ReplyDelete
    Replies
    1. This is onclick method which I am using in Java file.

      Delete
  5. it doenst work for me. When clicking on button my app force closes ... :/

    ReplyDelete
    Replies
    1. in your XML file where you declared two buttons, add this code, android:onClick="mess"

      Delete
  6. why dnt u use onclick method

    ReplyDelete
  7. How can I do?
    Replace the image on single button click
    and if I click again on same button the previous image is will display and so on..
    i.e switching between two image
    plz replay

    ReplyDelete
  8. hello i want to know which id should i write here {switch(v.getId()) in getId()

    ReplyDelete

Back to Top