How to overlay one view to other view edges android

Question

I want to make a straight line with some round points in the line now round image has top and bottom transparent spaces(in image itself) so I want to overlay bottom view(line ) on first view(round img) so it look like a complete straight line. Here is my code.

        <com.bridgebuilder.app.customviews.BBCustomTextView
            android:id="@+id/txt_objective_met_minimally"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/objective_met_minimally"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/attorney_review_header_text_size"
            app:fontFace="@string/font_medium" />


        <ImageView
            android:id="@+id/round_first_omm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/txt_objective_met_minimally"
            android:layout_marginTop="@dimen/layout_marginTop"
            android:src="@drawable/round" />

        <com.bridgebuilder.app.customviews.BBCustomTextView
            android:id="@+id/txt_not_completed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:layout_alignTop="@id/round_first_omm"
            android:layout_alignBottom="@id/round_first_omm"
            android:layout_marginLeft="@dimen/left_margin_to_vertical_bar"
            android:layout_marginStart="@dimen/left_margin_to_vertical_bar"
            android:text="@string/not_completed"
            android:textSize="@dimen/text_size"
            app:fontFace="@string/font_medium" />


        <ImageView
            android:id="@+id/bar_first_omm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@id/round_first_omm"
            android:layout_alignLeft="@id/round_first_omm"
            android:layout_alignRight="@id/round_first_omm"
            android:layout_alignTop="@id/round_first_omm"
            android:layout_marginTop="5dp"
            android:layout_below="@id/round_first_omm"
            android:src="@drawable/line_small" />


        <ImageView
            android:id="@+id/round_second_omm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/bar_first_omm"
            android:layout_alignRight="@id/bar_first_omm"
            android:layout_below="@id/bar_first_omm"
            android:src="@drawable/round_selected"
            card_view:ignore="RtlHardcoded" />

        <com.bridgebuilder.app.customviews.BBCustomTextView
            android:id="@+id/txt_objective_somewhat_met"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/round_second_omm"
            android:layout_alignBottom="@id/round_second_omm"
            android:layout_marginLeft="@dimen/left_margin_to_vertical_bar"
            android:layout_marginStart="@dimen/left_margin_to_vertical_bar"
            android:gravity="center_vertical"
            android:text="@string/objective_somewhat_met"
            android:textSize="@dimen/text_size"
            app:fontFace="@string/font_medium" />


        <ImageView
            android:id="@+id/bar_second_omm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/round_second_omm"
            android:layout_alignRight="@id/round_second_omm"
            android:layout_alignTop="@id/round_second_omm"
            android:layout_marginTop="5dp"
            android:layout_below="@id/round_second_omm"
            android:src="@drawable/line_small" />


        <ImageView
            android:id="@+id/round_third_omm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/bar_second_omm"
            android:layout_alignRight="@id/bar_second_omm"
            android:layout_below="@id/bar_second_omm"
            android:src="@drawable/round"
            card_view:ignore="ContentDescription" />

        <com.bridgebuilder.app.customviews.BBCustomTextView
            android:id="@+id/txt_objective_met"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@id/round_third_omm"
            android:gravity="center_vertical"
            android:layout_alignTop="@id/round_third_omm"
            android:layout_alignBottom="@id/round_third_omm"
            android:layout_marginLeft="@dimen/left_margin_to_vertical_bar"
            android:layout_marginStart="@dimen/left_margin_to_vertical_bar"
            android:text="@string/objective_meet"
            android:textSize="@dimen/text_size"
            app:fontFace="@string/font_medium" />


        <ImageView
            android:id="@+id/bar_third_omm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/round_third_omm"
            android:layout_marginTop="5dp"
            android:layout_below="@id/round_third_omm"
            android:src="@drawable/line_small"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignRight="@+id/round_third_omm"
            android:layout_alignEnd="@+id/round_third_omm" />


        <com.bridgebuilder.app.customviews.BBCustomTextView
            android:id="@+id/txt_completed_impressive"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:layout_alignTop="@id/round_fourth_omm"
            android:layout_alignBottom="@id/round_fourth_omm"
            android:layout_marginLeft="@dimen/left_margin_to_vertical_bar"
            android:layout_marginStart="@dimen/left_margin_to_vertical_bar"
            android:text="@string/completed_slash_impressive"
            android:textSize="@dimen/text_size"
            app:fontFace="@string/font_medium" />

        <ImageView
            android:id="@+id/round_fourth_omm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/round"
            android:layout_alignRight="@+id/bar_third_omm"
            android:layout_alignEnd="@+id/bar_third_omm"
            android:layout_below="@+id/bar_third_omm"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />


    </RelativeLayout>

In image(below image) it seems there is space between round image and line so I want to overlap images' edges so that it looks like they are connected

Answer 1

You have set top margin to 5 dp which may be causing the behavior.

Try removing that, that should help to give appearance as expected by you

Note : i am assuming there is no margin in the actual image

<ImageView
            android:id="@+id/bar_third_omm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/round_third_omm"
            android:layout_below="@id/round_third_omm"
            android:src="@drawable/line_small"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignRight="@+id/round_third_omm"
            android:layout_alignEnd="@+id/round_third_omm" />

Remove the margin