Place textview on the left of button through toLeftTo but also align text to the left

Question

Below is a simple UI design, I have set the Description attribute to stay at the left of the button by setting the android:toLeftTo, else the text would be blocked by the button if the description is too long. I want to make the Description text to align to the left. I have tried changing android:layout_gravity but it does not work.

Below is the XML code for the UI segment.

<RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/requestRl"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:layout_marginTop="10dp"
                android:layout_below="@id/requestTv"
                android:background="@drawable/rounded_field">

                <TextView
                    android:id="@+id/dateTv"
                    android:textSize="13sp"
                    android:textStyle="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="10dp"
                    android:layout_marginTop="5dp"
                    android:text="Appointment Time: "
                    android:maxLines="1"/>

                <TextView
                    android:id="@+id/descriptionTv"
                    android:textSize="13sp"
                    android:textStyle="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toLeftOf="@id/cancelBtn"
                    android:layout_below="@id/dateTv"
                    android:layout_marginStart="10dp"
                    android:layout_marginTop="5dp"
                    android:text="Description: "/>

                <TextView
                    android:id="@+id/statusTv"
                    android:textSize="13sp"
                    android:textStyle="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/descriptionTv"
                    android:layout_marginStart="10dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginBottom="5dp"
                    android:text="Comment: " />

                <Button
                    android:id="@+id/cancelBtn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="10dp"
                    android:text="Cancel"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:background="@drawable/rounded_field"
                    android:backgroundTint="#ff7f7f"
                    android:textAllCaps="false"/>


            </RelativeLayout>

Answer 1

To align your views, you can use the align attributes. You can make the description's starting point to be aligned with the starting of the dateTv TextView using layout_alignStart attribute.

You can also, remove margin from starting and add margin at end.

<TextView
            android:id="@+id/descriptionTv"
            android:textSize="13sp"
            android:textStyle="bold"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@id/cancelBtn"
            android:layout_alignStart="@id/dateTv"
            android:layout_below="@id/dateTv"
            android:layout_marginEnd="10dp"
            android:layout_marginTop="5dp"
            android:text="Description: "/>

Sample Output :