CODEWITHSUNDEEP
androidxmlimageandroid-layout
S.M_Emamian
S.M_Emamian

Reputation: 17393

set an imageview over another imageview - xml

I have two imageviews that I would like to set second imageview over first image like below image :

enter image description here

first image:

enter image description here

second image (moment) :

enter image description here

how can I do ?

I wrote below codes, but it does not works fine :

    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"       
        android:scaleType="fitXY"
        android:src="@drawable/ic_moment"
        />

    <ImageView
         android:id="@+id/img_view_item_main_list"
         android:layout_width="fill_parent"
         android:layout_height="220dp"
         android:scaleType="fitXY"       
         android:src="@drawable/testtesttest" />

Upvotes: 5

Views: 13937

Answers (7)

chkm8
chkm8

Reputation: 1302

You can also use layer-list as drawable and make it a background of your image view.

my_image.xml >save it in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:drawable="your_image_1"
    android:top="dimension"
    android:right="dimension"
    android:bottom="dimension"
    android:left="dimension" />
<item
    android:drawable="your_image_2"
    android:top="dimension"
    android:right="dimension"
    android:bottom="dimension"
    android:left="dimension" />
</layer-list>

and in your image view.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="fitXY"
    android:layout_gravity="top|left"
    android:drawable="@drawable/my_image"/>

in this way you can add several images to make it more interesting. Just make sure that is in png format and set the background of image as transparent.

Upvotes: 0

amit kumar
amit kumar

Reputation: 291

Use it like this.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<ImageView  
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:scaleType="center"
    android:src="@drawable/golden_gate" />

   <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginBottom="20dip"
       android:layout_gravity="center_horizontal|bottom"
       android:padding="12dip" 
       android:src="@drawable/logo"/>

</FrameLayout>

Upvotes: 2

Akshay
Akshay

Reputation: 2534

You can use something like below layout

<RelativeLayout 
android:layout_width="match_parent" // This you can change as per your requirement
android:layout_height="match_parent" // This you can change as per your requirement
>

<ImageView
     android:id="@+id/img_view_item_main_list"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:scaleType="fitXY"       
     android:src="@drawable/testtesttest"
     android:layout_centerInParent="true"
     />

</RelativeLayout>

Hope this will be helpful to you.

Upvotes: 0

Akash Moradiya
Akash Moradiya

Reputation: 3322

try like this,

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/ic_launcher" >

    <ImageView
        android:id="@+id/img_view_item_main_list"
        android:layout_width="fill_parent"
        android:layout_height="220dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:layout_gravity="top|left"
        android:src="@drawable/ic_launcher" />

</FrameLayout>

hope it will help you

Upvotes: 2

Aun
Aun

Reputation: 1923

Use Framelayout or use merge tag

eg:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/t" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

</FrameLayout>

second image comes on the top

Upvotes: 7

Hareshkumar Chhelana
Hareshkumar Chhelana

Reputation: 24848

Try this way,hope this will help you to solve your problem.

Take FrameLayout as parent and set top image layout gravity top and let.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/ic_moment" />

    <ImageView
        android:id="@+id/img_view_item_main_list"
        android:layout_width="wrap_content"
        android:layout_height="220dp"
        android:scaleType="fitXY"
        android:layout_gravity="top|left"
        android:src="@drawable/testtesttest" />

</FrameLayout>

Upvotes: 2

Jitesh Upadhyay
Jitesh Upadhyay

Reputation: 5260

try to do something like as follows

<RelativeLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="@color/white" >

    <ImageView
        android:id="@+id/inside_imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dip"
        android:layout_marginTop="5dip"
        android:src="@drawable/frame" />

      <ImageView
         android:id="@+id/outside_imageview"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignTop="@id/inside_imageview"
         android:layout_alignBottom="@id/inside_imageview"
         android:layout_alignLeft="@id/inside_imageview"
         android:layout_alignRight="@id/inside_imageview"            
         android:scaleType="fitXY" />
  </RelativeLayout>

Also you can visit how to place an image over another one on android app?

Upvotes: 3

Related Questions