How do I change an image when clicking a button?

Question

so i am trying to change an image when a button below it is clicked. I am trying to toggle the phone from normal to silent mode and have a picture change according to the state of the phone.

I am following a book and dont know what is wrong ( I am not copy pasting cuz that creates problems). Good news though. Although the picture does not change when the phone is toggled to silent mode, When I reopen the app with the silent mode already on, the image changes to what its supposed to be when its on silent. And when I toggle it back to normal mode, it works but does not change its image till I close and reopen the app and the system reads the state of the phone. I have no idea whats wrong but heres my code:

private AudioManager mAudioManager;
    private boolean mPhoneIsSilent;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.linear);

   mAudioManager= (AudioManager)getSystemService (AUDIO_SERVICE);
    checkIfPhoneIsSilent();
   setButtonClickListener(); 
   toggleUi();
}


private void setButtonClickListener(){

    Button toggleButton=(Button) findViewById(R.id.toggleButton);
    toggleButton.setOnClickListener(

            new View.OnClickListener(){

                public void onClick(View v){

                    if (mPhoneIsSilent){
                        mAudioManager.setRingerMode(AudioManager.RINGER_MODE_NORMAL);
            mPhoneIsSilent=false;
            }
            else{
                mAudioManager.setRingerMode(AudioManager.RINGER_MODE_SILENT);
            mPhoneIsSilent=true;
            }
        }

    }
            );
}



private void toggleUi() {
    ImageView imageView=(ImageView)findViewById(R.id.phone_icon);
    Drawable newPhoneImage;
    if(mPhoneIsSilent)
        newPhoneImage=getResources().getDrawable(R.drawable.mute);
    else
        newPhoneImage=getResources().getDrawable(R.drawable.unmute);
    imageView.setImageDrawable(newPhoneImage);
    setContentView(R.layout.linear);
}


    private void checkIfPhoneIsSilent()
    {
        int ringerMode=mAudioManager.getRingerMode();
        if(ringerMode==AudioManager.RINGER_MODE_SILENT)
            mPhoneIsSilent=true;
        else mPhoneIsSilent=false;
    }

and here is the XML to go along with it:

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

 <ImageView
      android:id="@+id/phone_icon"               
      android:layout_width="wrap_content"               
      android:layout_height="wrap_content"               
      android:layout_gravity="center_horizontal"               
      android:src="@drawable/unmute" />
 <Button 
     android:id="@+id/toggleButton"         
     android:layout_width="wrap_content"         
     android:layout_height="wrap_content"          
     android:layout_gravity="center_horizontal"         
     android:text="Toggle Silent Mode"/>

</LinearLayout>

Tarsem Singh · Answer 1 · 2013-07-26T04:42:50.917

there are two mistakes in your code

1. this setButtonClickListener(); called once in your activity i.e. in onCreate() ! so you r button OnClickListener() will work once !

2. inside toggleUi() don't use setContentView(R.layout.linear);

Solution for 1.

use following code in your onCreate()

Button toggleButton = (Button) findViewById(R.id.toggleButton);
        toggleButton.setOnClickListener(

        new View.OnClickListener() {

            public void onClick(View v) {

                if (mPhoneIsSilent) {
                    mAudioManager
                            .setRingerMode(AudioManager.RINGER_MODE_NORMAL);
                    mPhoneIsSilent = false;
                    toggleUi();
                } else {
                    mAudioManager
                            .setRingerMode(AudioManager.RINGER_MODE_SILENT);
                    mPhoneIsSilent = true;
                    toggleUi();
                }
            }

        });

and remove these two lines code from onCreat()

setButtonClickListener(); 
   toggleUi();

also remove your private void setButtonClickListener() completely !

Solution for 2.

your toggleUi() should be:

private void toggleUi() {
        ImageView imageView = (ImageView) findViewById(R.id.phone_icon);
        Drawable newPhoneImage;
        if (mPhoneIsSilent)
            newPhoneImage = getResources().getDrawable(R.drawable.edit_btn);
        else
            newPhoneImage = getResources().getDrawable(R.drawable.ic_launcher);
        imageView.setImageDrawable(newPhoneImage);

    }

tarsem Thanks for responding. I tried it, unfortunately ... no difference. The app works but images dont change !!!!! Do you think its just the emulator? — alaboudi, Jul 25 '13 at 16:47
@user2613577 try my updated answer which will surely help you ! — Tarsem Singh, Jul 26 '13 at 04:43

dinesh sharma · Answer 2 · 2013-07-26T08:16:41.323

Here is simple answer

ImageView imageView;
private void toggleUi() {
        imageView=(ImageView)findViewById(R.id.phone_icon);
        Drawable newPhoneImage;
        if(mPhoneIsSilent)
            imageView.setImageResource(R.drawable.mute);
        else
            imageView.setImageResource(R.drawable.unmute);
    }

and your click event will be

private void setButtonClickListener(){

    Button toggleButton=(Button) findViewById(R.id.toggleButton);
    toggleButton.setOnClickListener(

            new View.OnClickListener(){

                public void onClick(View v){

                    if (mPhoneIsSilent){
                        mAudioManager.setRingerMode(AudioManager.RINGER_MODE_NORMAL);
            mPhoneIsSilent=false;
            }
            else{
                mAudioManager.setRingerMode(AudioManager.RINGER_MODE_SILENT);
            mPhoneIsSilent=true;
            }
            toggleUi();
        }

    }
            );
}

Oh ya that is easier. Unfortunately it didnt work:( any more suggestions — alaboudi, Jul 25 '13 at 16:49
Declare your imageview globally and then try. its working at my side — dinesh sharma, Jul 26 '13 at 08:18
You have also missed the call to toggleUi() in your click listener — dinesh sharma, Jul 26 '13 at 08:22

score 0 · Answer 3 · answered Jul 26 '13 at 04:53

You do not call toggleUi() in your OnClickListener, after you change the state of the phone. Thus the button is not updated.

Add a call to toggleUi() as last line of the onClick(View view) method of your OnClickListener. That should help. And use the simplified method of dinesh sharma too.

How do I change an image when clicking a button?

3 Answers3