CODEWITHSUNDEEP
androidandroid-linearlayoutandroid-relativelayout
Matroska
Matroska

Reputation: 6923

How to overlap an image over an element inside a LinearLayout

I am trying to create a tutorial in my Android app and I want to put some baloons over some UI elements. My UI is built on LinearLayouts.

How can I put a floating image over the LinearLayout at a specific position (i.e. next to textfield with id="@id/email"). 

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="10dp" >

    <TextView android:id="@+id/email"
        style="@style/LoginBarText"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3.0dp"
        android:text="Email:" />
</LinearLayout>

I know that the only layout that is able to overlap elements is the RelativeLayout but it doesn't work over elements inside other layouts.

Thanks

Upvotes: 1

Views: 10223

Answers (1)

Woodsy
Woodsy

Reputation: 3377

you can create a RelativeLayout and include your original LinearLayout

<?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">
    <include 
            layout="@layout/layout_original" 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" />
    <include 
            layout="@layout/layout_overlay" 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" />
</RelativeLayout>

Or if you need to just add an image next to (not on top of) the element try this:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="10dp" 
    android:orientation="horizontal">

    <ImageView android:id="@+id/image"
    android:src="@drawable/imagename"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:visibility="invisible" />

    <TextView android:id="@+id/email"
    style="@style/LoginBarText"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="3.0dp"
    android:text="Email:" />
</LinearLayout>

Then in the Activity call

image = (ImageView) findViewById(R.id.image);
image.setVisibility(View.VISIBLE);

Upvotes: 4

Related Questions