CODEWITHSUNDEEP
androidandroid-layout
user386430
user386430

Reputation: 4967

How to overlay image in layout in android

I have two image in layout .I want to show second image in bottom edge curve of first image .Can anybody tell how to do like overlay image

Thanks

Upvotes: 2

Views: 13304

Answers (4)

Robert
Robert

Reputation: 1631

You can do it without Frames, only using RelativeLayout, if you make use of the alignParentalXXX tags as in the following example

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

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="75">

        <ImageView
            android:id="@+id/backgroundImageView"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_alignParentTop="true"
            android:layout_margin="5dp"
            android:background="#ffffff" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="66dp"
            android:layout_height="66dp"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:background="#000000" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="40dp"
            android:layout_marginTop="20dp"
            android:background="#40000000"
            android:gravity="center_vertical"
            android:paddingHorizontal="3dp"
            android:paddingVertical="1dp"
            android:text="Header Text"
            android:textColor="#ffffff"
            android:textSize="16dp" />


    </RelativeLayout>

</LinearLayout>

You can see how this layout looks like in the following image: Visual rendering of layout

Upvotes: 1

Geraldo Neto
Geraldo Neto

Reputation: 4040

Use a RelativeLayout, simple put the second ImageView below the first ImageView. Then what you have to do is to set the marginTop attribute of the second image to a negative value, and this value is the overlaying size, like this android:layout_marginTop="-1dp".

A sample code right below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/firstImage"
        android:src="@drawable/myimage1"           
     />    

    <ImageView
        android:layout_width="wrap_content"
        android:layout_marginTop="-1dp"
        android:layout_height="wrap_content"
        android:id="@+id/secondImage"
        android:layout_below="@+id/firstImage"
        android:src="@drawable/myimage2"
     />  

</RelativeLayout>

Upvotes: 1

Hareshkumar Chhelana
Hareshkumar Chhelana

Reputation: 24848

Use FrameLayout :

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/imgFirst"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"/>

    <ImageView
        android:id="@+id/imgSecond"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:src="@drawable/ic_launcher"/>
</FrameLayout>

Upvotes: 4

KOTIOS
KOTIOS

Reputation: 11194

Use Frame Layout like sample below :

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@android:color/black"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/ic_drawer"
            android:src="@drawable/logo" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="14dp"
            android:src="@drawable/menu" />

        <ImageView
            android:id="@+id/ic_drawer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignTop="@+id/textView1_detail"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:src="@drawable/ic_drawer" />

        <TextView
            android:id="@+id/textView1_detail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@+id/imageView1"
            android:text="Reports"
            android:textColor="@android:color/white"
            android:textSize="18sp" />
    </RelativeLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

           <ImageView
            android:id="@+id/overlay_favorite"
            android:layout_width="215dp"
            android:layout_height="134dp"
            android:layout_gravity="right"
            android:background="@drawable/overlay_favorite"
            android:visibility="gone" />
    </FrameLayout>

</LinearLayout>

Upvotes: 0

Related Questions