Controlling an ImageView using a Button click

Question

I have here four sets of buttons and an empty RelativeLayout under them, whenever I click one of these another layout will pop-out in the empty RelativeLayout containing another TWO sets of buttons namely ON and OFF. my problem occurs in the ON and OFF buttons because I want an ImageView to appear whenever I click the ON button & disappear whenever I click the OFF button. Here is my layout and the code:

This is the layout for the 4 buttons:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/RelativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/green_bg"
    tools:context=".AleccMainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="@string/please_choose"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#CAFFD8" />

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="fill_parent"
        android:layout_height="70dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textView1"
        android:background="#95FF4F" >

        <Button
            android:id="@+id/btnAcu"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/tab_acu"
            android:onClick="gotoACU" />

        <Button
            android:id="@+id/btnFan"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/tab_fan"
            android:onClick="gotoFan" />

        <Button
            android:id="@+id/btnLight"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/tab_light"
            android:onClick="gotoLight" />

        <Button
            android:id="@+id/btnHallway"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@drawable/tab_hallway"
            android:onClick="gotoHallway" />
    </LinearLayout>

    <RelativeLayout
        android:id="@+id/rl"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/linearLayout" >

    </RelativeLayout>

</RelativeLayout>

And this is the code for one of the layout that will be appearing when I click one of those FOUR (they have the same buttons inside but different images to show):

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/green_bg"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="16dp" >

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:onClick="offFAN"
            android:text="@string/off" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:onClick="onFAN"
            android:text="@string/on" />
    </LinearLayout>

        <ImageView
            android:id="@+id/fanOn"
            android:layout_below="@+id/linearLayout1"
            android:layout_alignParentLeft="true"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:contentDescription="@string/acu"
            android:visibility="invisible"
            android:src="@drawable/fan_on" />


</RelativeLayout>

This one is the function when calling the layout with ON and OFF buttons:

public void gotoFan(View v){
    // Do something in response to button
    RelativeLayout rlFAN = (RelativeLayout) findViewById(R.id.rl);
    getLayoutInflater().inflate(R.layout.alecc_fan, rlFAN, true);
}

And this is where I think my problem exists:

public void offFAN (View view) {
    String messageToSend = "FANS OFF";
    SmsManager.getDefault().sendTextMessage(number, null, messageToSend, null,null);
    Toast.makeText(AleccMainActivity.this,"Electric Fans turned OFF", Toast.LENGTH_SHORT).show();

    ImageView fanON = (ImageView) findViewById(R.id.fanOn);
    fanON.setVisibility(View.GONE);     
}

public void onLIGHT (View view) {
    String messageToSend = "LIGHTS ON";
    SmsManager.getDefault().sendTextMessage(number, null, messageToSend, null,null);
    Toast.makeText(AleccMainActivity.this,"Flourescent Lights turned ON", Toast.LENGTH_SHORT).show();

    ImageView lightON = (ImageView) findViewById(R.id.lightOn);
    lightON.setVisibility(ImageView.VISIBLE);       
}

I can't get it working. When I first click the one of the 4 buttons then click ON / OFF it seems fine but, whenever I click another the image no longer becomes visible.

Answer 1

Your problem is actually in this section:

public void gotoFan(View v){
    // Do something in response to button
    RelativeLayout rlFAN = (RelativeLayout) findViewById(R.id.rl);
    getLayoutInflater().inflate(R.layout.alecc_fan, rlFAN, true);
}

Every time you make a call to

getLayoutInflater().inflate(R.layout.alecc_fan, rlFAN, true);

it adds another child RelativeLayout in the layout specified by R.id.rl. Each of those layouts has an ImageView named the same thing (such as fanOn), so that when you try to set visibility on fanOn, it turns visibility on to the first child in the hierarchy, which is covered by all of your subsequent layouts.

Remember: your .inflate method adds a child layout. It doesn't replace what is there, and they are all in the hierarchy as children of the parent layout. Also, if something weird is happening with a layout, look at it in the debugger and inspect its properties. In this case you would have seen an expanding list of children as you pressed on and off repeatedly.