CODEWITHSUNDEEP
androidandroid-layout
bhaskarc
bhaskarc

Reputation: 9521

Placing Two Image Buttons on Top of Each Other

I need to place two ImageButtons on top of each other something like the following image. enter image description here

While placing them has been no issue, I am unable to click the blue button. The red button when clicked works perfectly well.

The XML layout code is as follows:

        <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <ImageButton
            android:id="@+id/bluebutton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:onClick="onButtonClicked"
            android:scaleType="fitCenter"
            android:src="@drawable/bluebutton" />

        <ImageButton
            android:id="@+id/redbutton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:onClick="onButtonClicked"
            android:scaleType="fitCenter"
            android:src="@drawable/redbutton" />
    </FrameLayout>

How do i ensure that both buttons can be clicked ?

Upvotes: 0

Views: 1828

Answers (2)

mike20132013
mike20132013

Reputation: 5425

Changed the code.

  public class MainActivity extends Activity {

        ImageButton red,blue;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            red = (ImageButton)findViewById(R.id.redbutton);

            blue = (ImageButton)findViewById(R.id.bluebutton);

        }

public void onRedButtonClicked(final View view) {
        Toast.makeText(getApplicationContext(), "Button red is clicked!", Toast.LENGTH_SHORT).show();
    }
    public void onBlueButtonClicked(final View view) {
        Toast.makeText(getApplicationContext(), "Button blue is clicked!", Toast.LENGTH_SHORT).show();
    }
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.main, menu);
            return true;
        }

    }

And the layout:

<FrameLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ImageButton
        android:id="@+id/redbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:onClick="onRedButtonClicked"
        android:scaleType="fitCenter"
        android:src="@drawable/redbutton" 
        android:visibility="visible"/>

    <ImageButton
        android:id="@+id/bluebutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:onClick="onBlueButtonClicked"
        android:scaleType="fitCenter"
        android:src="@drawable/bluebutton" 
        android:visibility="visible"/>

</FrameLayout>

Hope this helps..:)

Upvotes: 1

Rick
Rick

Reputation: 4013

You can simply use a RelativeLayout to do that. See this I made just now:

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ImageButton btn = (ImageButton)findViewById(R.id.bluebutton);
    ImageButton btn2 = (ImageButton)findViewById(R.id.redbutton);

    btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            TextView t = (TextView)findViewById(R.id.txt);
            t.setText("Hello!");
        }
    });
    btn2.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            TextView t = (TextView)findViewById(R.id.txt);
            t.setText("Hi, how are you?");
        }
    });
}

it's just an example

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageButton
    android:background="#ff040ab2"
    android:id="@+id/bluebutton"
    android:layout_width="150dp"
    android:layout_height="250dp"
    android:onClick="onButtonClicked"
    android:scaleType="fitCenter"/>

<ImageButton
    android:rotation="90"
    android:background="#be2222"
    android:id="@+id/redbutton"
    android:layout_width="150dp"
    android:layout_height="250dp"
    android:onClick="onButtonClicked"
    android:scaleType="fitCenter"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/txt"
    android:textColor="#ffffff"/>
</RelativeLayout>

enter image description here enter image description here

Upvotes: 1

Related Questions