Image under another image not shown Android

Question

Hi I wanna implement following picture

When I go to XML-design of android studio it's exactly what I want but when I run app the straight line under the circle not shown Can any body give me some hint to solve this issue ? ( I also use FrameLayout instead of RelativeLayout but not worked )

Edit : In fact my problem is RelativeLayout which contains straight line not as height as other RelativeLayout. Does anyone knows how to solve this ?!

Edit 2: I change relativeLayout of parent to LinearLayout and it's worked ! I dont know why but it's work !

Here is my row of list after some changes :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="left"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="@dimen/circle_area_radius"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="3dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="@dimen/half_circle_area_radius"
            android:background="@color/orange" />

        <ImageView
            android:id="@+id/circle"
            android:layout_width="@dimen/circle_area_radius"
            android:layout_height="@dimen/circle_area_radius"
            android:src="@drawable/circle" />


        <com.mycompany.ui.customui.PersianTextView
            android:id="@+id/araNumber"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center"
            android:layout_marginTop="22dp"
            android:text="1299"
            android:textColor="@color/abc_secondary_text_material_dark"
            android:textSize="12sp" />

    </RelativeLayout>


    <!-- our content -->
    <LinearLayout
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginRight="@dimen/pager_margin"
        android:layout_marginTop="@dimen/global_padding_large"
        android:background="@drawable/balloon_incoming_normal"
        android:orientation="vertical">

        <com.mycompany.ui.customui.PersianTextView
            android:id="@+id/itemText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginLeft="@dimen/global_padding_large"
            android:layout_marginRight="@dimen/global_padding"
            android:layout_marginTop="@dimen/global_padding"
            android:ellipsize="end"
            android:gravity="right"
            android:textColor="@color/dark_gray"
            android:textSize="@dimen/textsize_medium" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginLeft="@dimen/global_padding_large"
            android:layout_marginRight="@dimen/global_padding_large"
            android:layout_marginTop="@dimen/global_padding"
            android:background="@color/gray_20" />

        <com.mycompany.ui.customui.IconTextView
            android:id="@+id/favoriteButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:padding="@dimen/global_padding"
            android:layout_marginRight="@dimen/global_padding"
            android:text="@string/icon_star_empty"
            android:textColor="@color/black_light"
            android:textSize="@dimen/textsize_smaller" />

    </LinearLayout>

</LinearLayout>

Answer 1

Try This.

<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent">



            <ImageView 
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:layout_marginEnd="-65dp"
                android:layout_marginLeft="31dp"
                android:src="#f6802e" />

            <ImageView
                android:id="@+id/circle"
                android:layout_width="65dp"
                android:layout_height="match_parent"
                android:layout_marginEnd="-65dp"
                android:layout_marginRight="-65dp"
                android:src="@drawable/circle" />

Answer 2

The thing is line might actually form, but you are not able to see it, because it's behind the circle. If I'm right, test it by adding this to the circle android:alpha="20". The line could be seen behind the circle. If that works the solution below should work.

1. Change the fill_parent to match_parent, fill_parent is deprecated.

Since you use match_parent in the first layout.

The solution could be this

Better Implementation would be using this:

| Circle(V1) | TextView with information(V2) |

Align V1 to left and top (with circle and line as center of the layout). Align V2 to the right of V1.

EDIT

 <RelativeLayout
     android:layout_width="wrap_content"
     android:layout_height="fill_parent">


         <!-- this is my straight line -->
         <ImageView 
             android:layout_width="3dp"
             android:layout_height="match_parent"
             android:layout_marginEnd="-65dp"
             android:layout_marginLeft="31dp"
             android:src="#f6802e" />

Your line's height matches parent's height, change

     android:layout_height="fill_parent">

to

     android:layout_height="match_parent">

EDIT #2

<?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:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="#00aaaaaa"
        android:paddingLeft="65sp"
        android:src="@drawable/ic_launcher" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true" >



        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="3sp"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            android:background="#aa00aa"
            android:paddingLeft="65sp"
            android:src="@drawable/ic_launcher" />

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="65sp"
            android:layout_height="65sp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:background="#aaaaaa"
            android:paddingLeft="65sp"
            android:layout_marginTop="65sp"
            android:src="@drawable/ic_launcher" />

    </RelativeLayout>

</RelativeLayout>

The above code runs and gives you the desired output as well, just replace the imageViews(Also the first RelativeLayout is unnecessary, inflating them takes memory). Here's the screenshot.