Android studio - Relative layout misplaced items after run on phisical device

Question

Hope you can help me with my question, I have three TextViews and a sepparator, on my relative layout, on the designer I have aranged them , but after I run it on a phisical device , only one item appear and even that item is misplaced. I have to tell you that i have searched for many many hours before coming here to ask this question, so please help me!

Here it is the XML file

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="44dp"
android:paddingTop="24dp"
tools:ignore="RtlSymmetry">

<TextView
    android:id="@+id/tv_time"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_alignStart="@+id/tv_today_date"
    android:gravity="end|center_vertical"
    android:paddingEnd="16dp"
    android:textAlignment="center"
    android:textSize="56sp"
    android:visibility="visible"
    tools:text="12:34" />

<TextView
    android:id="@+id/tv_today_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="end"
    android:paddingEnd="16dp"
    android:text="Tue, 20 Apr"
    android:textSize="16sp"
    android:layout_below="@+id/tv_today_time"
    android:layout_toStartOf="@+id/separator" />

<View
    android:id="@+id/separator"
    android:layout_width="0.05dp"
    android:layout_height="0.05dp"
    android:layout_alignBottom="@+id/tv_today_date"
    android:layout_alignTop="@+id/tv_today_time"
    android:layout_centerHorizontal="true"
    android:background="#66FFFFFF" />

<TextView
    android:id="@+id/tv_location"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="start"
    android:paddingStart="16dp"
    android:textSize="16sp"
    tools:text="Bucharest"
    android:layout_below="@+id/tv_today_time"
    android:layout_toEndOf="@+id/separator" />

If needed, i will post some screenshots.

Also I have also some other questions, so if anyone wants to help me, tell me :)

EDIT Here iis what I would like it to be:Designer

Here is what i get:Phisical device

Answer 1

This is working fine for me.Check it and let me know.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="24dp"
   >

    <TextView
        android:id="@+id/tv_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:gravity="end|center_vertical"
        android:paddingRight="16dp"
        android:textAlignment="center"
        android:textSize="56sp"
        android:visibility="visible"
        android:text="12:34" />

    <View
        android:id="@+id/separator"
        android:layout_width="0.05dp"
        android:layout_height="0.05dp"
        android:layout_alignBottom="@+id/tv_today_date"
        android:layout_alignTop="@id/tv_time"
        android:layout_centerHorizontal="true"
        android:background="#66FFFFFF" />

    <TextView
        android:id="@+id/tv_today_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:paddingRight="16dp"
        android:text="Tue, 20 Apr"
        android:textSize="16sp"
        android:layout_below="@id/tv_time"
        android:layout_toLeftOf="@id/separator" />


    <TextView
        android:id="@+id/tv_location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="start"
        android:paddingLeft="16dp"
        android:textSize="16sp"
        android:text="Bucharest"
        android:layout_below="@id/tv_time"
        android:layout_toRightOf="@id/separator" />

    </RelativeLayout>

Answer 2

Option 1: Use constraint layout (Material design)
Option 2: Wrap tv_today_date separator & tv_location in LinearLayout with horizontal orientation. Place this LinearLayout below tv_time