Overlapping ImageView or Layout on Line in Android Intentionnaly

Question

In the picture you can see what kind of result I am trying to create.

Actually my layout code is:

`

        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:background="#A1A1A1"
            android:orientation="vertical" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="60dp"
            android:layout_marginBottom="20dp" >

            <TextView
                android:id="@+id/txtTitleDetail"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:paddingLeft="15dp"
                android:paddingRight="15dp"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#000000"
                android:textSize="16sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/txtPriceDetail"
                android:layout_width="60dp"
                android:layout_height="fill_parent"
                android:layout_marginRight="30dp"
                android:background="@drawable/price_circle_background"
                android:gravity="center"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/blue_amount" />
        </LinearLayout>`

The line stay on the top of the picture and don't come under it.How can I create a picture that go under on another?

Answer 1

Finally I did it a other way...

I create a background image with the gray line "bg_detail_price" and voila :) simpler like this

http://imgur.com/qGJWHsm

The final result is.

https://i.stack.imgur.com/vv7sY.jpg

---

<LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="60dp"
            android:layout_marginBottom="20dp"
            android:background="@drawable/bg_detail_price" >

            <TextView
                android:id="@+id/txtTitleDetail"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:paddingLeft="15dp"
                android:paddingRight="15dp"
                android:paddingTop="15dp"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#000000"
                android:textSize="16sp" />

            <LinearLayout
                android:layout_width="55dp"
                android:layout_height="55dp"
                android:layout_marginRight="35dp"
                android:background="@drawable/price_circle_background"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/txtEarn"
                    android:layout_marginTop="11dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="@string/txt_earn"
                    android:textColor="@color/blue_amount"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/txtPriceDetail"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:textColor="@color/blue_amount"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>

Answer 2

try this it ll help you,here i am using marginTop in negative to get the line under image. .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:id="@+id/mainActLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<View
    android:layout_width="fill_parent"
    android:layout_height="5dp"
    android:layout_marginTop="150dp"
    android:background="#000022" />

<ImageView
    android:id="@+id/logoBackgroundImg"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="-30dp"
    android:background="@drawable/ic_launcher"
    android:scaleType="fitCenter" /></LinearLayout>

adjust marginTop according to your need

Answer 3

Hi You can you play around with FramLayout. You will get the same result. Go through these links click here , click here

Answer 4

It's quit simple, wrap the view inside the Linear Layout.

For Android, it's always recommended to use the relative layout. It works well as a charm, also you can ask views to be placed in relation to the placement of the other companion views.

1) Prefer using match_parent than fill_parent. 2) for Images try using wrap_content for height and width params.

Try this:

   <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:orientation="horizontal" >

    <!-- View for the text to the left of the picture -->
    <TextView
        android:id="@+id/txtTitleDetail"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/txtPriceDetail"
        android:gravity="center_vertical"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:ellipsize="end"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#000000"
        android:textSize="16sp"
        android:textStyle="bold" />

     <!-- If you wish to add pictures, go for ImageViews, 
      as they are optimized for their purpose. -->
    <ImageView
        android:id="@+id/txtPriceDetail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="30dp"
        android:layout_alignParentRight="true"
        android:background="@drawable/price_circle_background"
        android:layout_centerVertical="true"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/blue_amount" />


    </RelativeLayout>

    <!-- View for the horizontal line of 1 dip -->
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:background="#A1A1A1" />