How to have a scalable width based on the screen width for a view in android Relative Layout

Question

In the Layout for an activity of my Android app, I need to have a line with a text aligned on the right side of it like below:

And this is my XML so far:

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <View
                android:id="@+id/line"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_centerVertical="true"
                android:background="@android:color/darker_gray"/>


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=" Text "
                android:layout_alignRight="@id/line"/>


        </RelativeLayout>

Basically the issue is that the width of the line is changed according to the width of the screen and width of the text. It should be the width of screen minus the width of the text.

In my XML file, the width of the line is equal to the width of the screen and the text overlays the line aligned in the right. Which is not what I wanted. One idea is to make the background of my text equivalent to the background of the activity. However, I'm not sure if this is the best idea.

I'm wondering if there is any other way to address such problems in Android design.

Answer 1

you can create a layout_weight and wrap your view and textView inside a linearlayout to enable to use weight attribute

sample:

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

    <View
        android:layout_width="0dp"
        android:layout_weight="3"
        android:layout_height="3dp"
        android:layout_gravity="center_vertical"
        android:background="@android:color/darker_gray" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" Text " />

</LinearLayout>

Answer 2

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

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:text=" Text " />

<View
    android:id="@+id/line"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@+id/textView1"
    android:background="@android:color/darker_gray" />