CODEWITHSUNDEEP
javaandroidxml
jquery404
jquery404

Reputation: 674

Position two image view on top of another

I am trying to position 2 imageView on top of another. this is what I want to accomplish. enter image description here

so what i want is , imageView #2 will be placed exactly same position of imageView #1 like in the picture. this what i tried so far but it not working like I wanted. image are not staying exact position when I tried in different device :(

<LinearLayout
android:id="@+id/wrap"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="@id/tvding"
android:orientation="vertical" >

    <FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

        <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:scaleType="fitCenter"
        android:src="@drawable/base" />

        <ImageView
        android:id="@+id/imageViewCompass"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="25dp"
        android:scaleType="fitCenter"                    
        android:src="@drawable/niddle" />
    </FrameLayout>
</LinearLayout>

Thanks in advance.

Upvotes: 3

Views: 3822

Answers (2)

Rohan Pawar
Rohan Pawar

Reputation: 2003

Try this code, i used it for show video thumb with overlapped play image `

<FrameLayout
                android:id="@+id/playVideo"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
                <ImageView
                    android:id="@+id/videoImage"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="center"
                    android:src="@drawable/videoThumb" />
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:scaleType="centerCrop"
                    android:layout_margin="10dp"
                    android:src="@drawable/play_button"/>
            </FrameLayout>`

Change height width as per your requirement.

Upvotes: 2

Jorgesys
Jorgesys

Reputation: 126455

One option must be using a FrameLayout

Android Layout Tricks #3: Optimize by merging

or using a RelativeLayout

<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
    <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/image_bottom"/>
    <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/image_top" android:layout_alignParentBottom="true" android:layout_alignParentRight="true"/>
</RelativeLayout>

Update: I found this @ Stackoverflow: how to place an image over another one on android app?

Upvotes: 0

Related Questions