CODEWITHSUNDEEP
androidimageandroid-imageviewoverlap
user3462315
user3462315

Reputation: 23

How to make two images one above each other in android

In My application I have one big imageview 'A' and six small imageviews s1,s2,s3,s4,s5,s6,intially set the all imageviews with some drawbles.

when drag the small images(s1,s2 etc) and drop on the big imageview 'A' then it is replacing with corresponding image. for example lets say Imageview A have BAT Image and imageview s1 have the BALL Image when drag the BALL image onto BAT Image then the BAT Image is replacing with BALL Image.

MY Requirement is that when i drag the BALL Image onto the BAT Image then the BAT image should be there and the BALL Image should be overlap(one above each other).so BAT and BALL images should be there on imageview A.

Upvotes: 0

Views: 4192

Answers (4)

Prakhar
Prakhar

Reputation: 710

Use FrameLayout. For example:

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


<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView5"
    android:src="@drawable/prescription_not_attached"
    android:layout_gravity="center" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView8"
    android:src="@drawable/home_measure"
    android:layout_gravity="center" />
   </FrameLayout>

Replace my Images with yours.

Upvotes: 0

Neela
Neela

Reputation: 1348

You can use FrameLayout or RelativeLayout. The order of the imageviews will be lastly inserted will be shown above.

eg:

<RelativeLayout
android:layout_width="match_parent"
        android:layout_height="wrap_content">

<ImageView
android:id="@+id/A"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
android:src="@drawable/bat"
                 />
<ImageView
android:id="@+id/s1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
android:src="@drawable/ball"
                 />
</RelativeLayout>

Upvotes: 2

Mike Ledwards
Mike Ledwards

Reputation: 41

Try using a FrameLayout, using Linear will not allow overlapping...

FrameLayout frame = (FrameLayout) findViewById(R.id.frame);
ImageView bat = new ImageView(this);
iv.setImageResource(R.drawable.bat);
ImageView ball = new ImageView(this);
i.setImageResource(R.drawable.ball);

FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        layoutParams.gravity = Gravity.RIGHT | Gravity.TOP;
i.setLayoutParams(layoutParams); 
frame.addView(bat);
frame.addView(ball);

Upvotes: 0

Zahan Safallwa
Zahan Safallwa

Reputation: 3914

Use below xml code 

<RelativeLayout   xmlns:android="http://schemas.android.com/apk/res/android"           

 android:layout_width="fill_parent"  
 android:layout_height="fill_parent"
 android:id="@+id/RelativeLayout1" 
 android:orientation="vertical"> 
  <!-- Add   image A --> 

<ImageView android:id="@+id/image1" 
  android:layout_width="800dp" 
  android:layout_height="400dp"
  android:layout_centerInParent="true"
  android:src="@drawable/image1" /> 

   <!-- Add smaller image--> 

  <ImageView android:id="@+id/image2" 
  android:layout_width="400dp"
  android:layout_height="200dp" 
  android:layout_centerInParent="true"
  android:layout_alignTop="@+id/image1" 
  android:src="@drawable/image2" />     
</RelativeLayout>

The output will look like below

output image

Upvotes: 0

Related Questions