Q: Android Studio (XML): The vertical line on buttons disappeared 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>


A: 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:-


A: I hope this code example help you, so the view group (Linear Layout) hold the background color of your desire. Then you can have 3 views inside; a button, a view for the line, and another button. I set the button background with ?attr/selectableItemBackgroundBorderless to get the ripple effect with invisible background. Last, a view with 2dp for the example with height match parent, add margin top and bottom.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent">

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:text="NIV" />

        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:background="@color/colorPrimary"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:text="KJV" />

    </LinearLayout>


</LinearLayout>



A: For relative layout, you do not need orientation variable, it is not needed.
Instead for what you are trying to do I recommend you re-write it with LinearLayout.
You do not need 2 nested relative layouts for this, simply you may just have a linearlayout , laid out horizontally, a TextView, ImageView/View for the line, and finally a TextView.
By adding some padding to each View in the linearlayout, you will be able to create a cleaner simpler XML project that is more maintainable than what you currently have.
Do take a look at the LinearLayout documentation for more info. https://developer.android.com/reference/android/widget/LinearLayout
