Android Studio (XML): The vertical line on buttons disappeared

Question

I am trying to insert a small line between two buttons as below:

However, when I inserted a line, I have two problems: (1) the line fills the entire page and (2) the line disappears when I add elevation=10dp. Somehow, the line does not reduce its size even if I put alignTop=NIV and alignBottom=NIV.

How can I fix these problems?

Just in case you find it useful, my XML file is here:

<?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"
    android:background="@color/colorPrimary"
    android:orientation="vertical"
    android:id="@+id/bibile_xml">

    <TextView
        android:id="@+id/white_background_round"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="50dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="50dp"
        android:background="@drawable/white_background_round" />

    <RelativeLayout
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/white_background_round"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp">

        <TextView
            android:id="@+id/title_string"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/title_string"
            android:textColor="@color/colorPrimary"
            android:textSize="50sp"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/title_image"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_toEndOf="@+id/title_string"
            android:layout_marginLeft="20dp"
            android:background="@drawable/ic_bible_english" />
    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/bible_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/title"
        android:layout_centerHorizontal="true">

        <Button
            android:id="@id/KJV"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:text="KJV"
            android:textColor="@color/colorPrimaryLight"/>

        <View
            android:layout_width="1dp"
            android:layout_alignEnd="@+id/KJV"
            android:layout_alignParentBottom="true"
            android:background="@android:color/black" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toEndOf="@+id/KJV"
            android:background="@color/colorAccent"
            android:text="NIV"
            android:textColor="@color/colorPrimaryLight" />

    </RelativeLayout>



</RelativeLayout>

Answer 1

I tried it on my system and the problem is that you're enclosing the buttons in a Relative Layout. Try enclosing in a Linear Layout with Orientation = Horizontal. Here's the code that worked for me. Although I've only done the buttons and nothing else, Hope it works for you too.

XML File :-

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:text="KJV"
            android:textColor="@color/colorPrimary"/>

        <View
            android:layout_width="1dp"
            android:layout_alignParentBottom="true"
            android:background="@android:color/black" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:text="NIV"
            android:textColor="@color/colorPrimaryDark" />

</LinearLayout>

And here's the design for this XML:-