Android - Placeholder for dynamically added TextView

Question

In my application I have a inner Relativelayout with 2 Imagebuttons on the left (back button and help button), 2 Imagebuttons on the right (forward button and info button) and a Textview.

The problem is that the text is setted dynamically when the user makes the quiz. There are 2 possible texts (see the images).

As you see the text for the wrong answer is the maximum character length for this Textview. My goal is to have a fix positioning for the Imagebuttons. But I don't want to set a fix width for the Texview. I think there is a better solution.

What is the best way to achieve this?

EDIT:

This is my inner Relativelayout:

<RelativeLayout
    android:id="@+id/layout_progressbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginTop="20dp"
    android:layout_toEndOf="@+id/iv_image"
    android:layout_toRightOf="@+id/iv_image"
    android:gravity="bottom"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/bt_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:enabled="false"
        android:src="@drawable/ic_arrow_right"
        android:text="@string/bt_next" />

    <ImageButton
        android:id="@+id/bt_info"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/tv_resultmessage"
        android:layout_toLeftOf="@+id/bt_next"
        android:layout_toRightOf="@+id/tv_resultmessage"
        android:layout_toStartOf="@+id/bt_next"
        android:background="@null"
        android:src="@drawable/ic_info" />

    <TextView
        android:id="@+id/tv_resultmessage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" />

    <ImageButton
        android:id="@+id/bt_praxis"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/bt_back"
        android:layout_toLeftOf="@+id/tv_resultmessage"
        android:layout_toRightOf="@+id/bt_back"
        android:layout_toStartOf="@+id/tv_resultmessage"
        android:background="@null"
        android:src="@drawable/ic_praxis" />

    <ImageButton
        android:id="@+id/bt_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:src="@drawable/ic_arrow_left"
        android:text="@string/bt_back" />

    <ProgressBar
        android:id="@+id/pb_quiz"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/bt_back"
        android:padding="5dp"
        android:progress="1" />
</RelativeLayout>

Answer 1

Set layout_toRightOf , layout_toLeftOf to TextView. And Remove android:layout_toEndOf="@+id/tv_resultmessage" etc from ImageView.

like this:

<RelativeLayout
        android:id="@+id/layout_progressbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="20dp"
        android:layout_toEndOf="@+id/iv_image"
        android:layout_toRightOf="@+id/iv_image"
        android:gravity="bottom"
        android:orientation="horizontal">

    <ImageButton
            android:id="@+id/bt_next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:enabled="false"
            android:src="@drawable/ic_arrow_right"
            android:text="@string/bt_next"/>

    <ImageButton
            android:id="@+id/bt_info"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/bt_next"
            android:layout_toStartOf="@+id/bt_next"
            android:layout_marginRight="16dp"
            android:background="@null"
            android:src="@drawable/ic_info"/>

    <TextView
            android:id="@+id/tv_resultmessage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/bt_praxis"
            android:layout_toLeftOf="@+id/bt_info"
            android:layout_centerHorizontal="true"/>

    <ImageButton
            android:id="@+id/bt_praxis"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toEndOf="@+id/bt_back"
            android:layout_toRightOf="@+id/bt_back"
            android:layout_marginLeft="16dp"
            android:background="@null"
            android:src="@drawable/ic_praxis"/>

    <ImageButton
            android:id="@+id/bt_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:src="@drawable/ic_arrow_left"
            android:text="@string/bt_back"/>

    <ProgressBar
            android:id="@+id/pb_quiz"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/bt_back"
            android:padding="5dp"
            android:progress="1"/>
</RelativeLayout>

Answer 2

Try this one.

    <ImageButton
    android:id="@+id/bt_next"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:enabled="false"
    android:src="@drawable/ic_arrow_right"
    android:text="@string/bt_next" />

<ImageButton
    android:id="@+id/bt_info"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/bt_next"
    android:layout_toStartOf="@+id/bt_next"
    android:layout_marginEnd = "8dp"
    android:background="@null"
    android:src="@drawable/ic_info" />

<TextView
    android:id="@+id/tv_resultmessage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true" />

<ImageButton
    android:id="@+id/bt_praxis"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toEndOf="@+id/bt_back"
    android:layout_toRightOf="@+id/bt_back"
    android:layout_marginStart = "8dp"
    android:background="@null"
    android:src="@drawable/ic_praxis" />

<ImageButton
    android:id="@+id/bt_back"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:src="@drawable/ic_arrow_left"
    android:text="@string/bt_back" />

<ProgressBar
    android:id="@+id/pb_quiz"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/bt_back"
    android:padding="5dp"
    android:progress="1" />

Answer 3

You can achieve the same with LinearLayout as parent instead of RelativeLayout. Just give the layout_weight as 1 for the TextView in the middle. For rest of the components do not specify any weight and you can give proper margins if needed. This way, the TextView will stay the same width regardless of text length. This approach will be more readable and will have lesser xml tags than using RelativeLayout.