mehmet
mehmet

Reputation: 1588

Android Relative Layout image overlay

enter image description here

Well I have 2 images and I want show like this. second image should be right corner of first image. bottom or top is not important.

I am trying with relative layout but not looking like this

I want to put cancel image to the bottom of image first with this

android:layout_alignParentBottom="true"

but it goes the screen bottom not image bottom.

Upvotes: 2

Views: 9935

Answers (4)

Jitesh Dalsaniya
Jitesh Dalsaniya

Reputation: 1917

make an Activity with Transparent theme in manifest like this:

<activity android:name=".MyDialogActivity" android:theme="@style/Theme.Transparent" />

and then define layout like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <RelativeLayout android:orientation="vertical"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:layout_margin="15dp" android:padding="2dp">
        <!-- Contents will go here..-->
    </RelativeLayout>
    <Button android:layout_alignParentRight="true" android:text="X"
        android:textColor="#FFF" android:background="@drawable/round_button_background"
        android:gravity="center_vertical|center_horizontal"
        android:layout_margin="5dp" android:layout_height="25dp"
        android:layout_width="25dp" android:textSize="12sp" android:textStyle="bold"
        android:onClick="cancelActivity" />
</RelativeLayout>

and define a background for your close Button in drawable like this:

round_button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
    <solid android:color="#9F2200" />
    <stroke android:width="2dp" android:color="#FFF" />
</shape>

Upvotes: 0

Aashish-Systematix
Aashish-Systematix

Reputation: 114

Used below code it definitely help you.

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

<FrameLayout   
    android:layout_width="210dp"
    android:layout_height="210dp"
    >

    <ImageView
            android:layout_width="190dp"
            android:layout_height="180dp"
            android:layout_gravity="bottom"
            android:background="@drawable/red_button"
           >
    </ImageView>
        <ImageView
            android:id="@+id/image1"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="right"
            android:background="@drawable/icon" >
        </ImageView>
    </FrameLayout>

</RelativeLayout>

Thanks

Upvotes: 0

Amarjit
Amarjit

Reputation: 4357

You can also use Frame Layout for this purpose beause frame layout does not require any relationships, like with android:layout_gravity="top|right" property as :

<?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:id="@+id/image1"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="top|right"

        android:src="@drawable/ic_launcher" >
    </ImageView>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dip"
        android:layout_below="@id/image1"
        android:src="@drawable/ic_launcher" >
    </ImageView>

</FrameLayout>

Upvotes: 2

Abby
Abby

Reputation: 105

AlignParentBottom will only set the image to the bottom of the page, what you need is to align the image below the (X) image, and the (X) image be aligned right in the parent. Just change the src of the code pasted below and see if it wor

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

        <ImageView
            android:id="@+id/image1"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/ic_launcher" >
        </ImageView>

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

    </RelativeLayout>

Upvotes: 0

Related Questions