Search code examples
androidandroid-layoutandroid-relativelayout

How to make a button's width match parent while there is an ImageView on its right in a RelativeLayout?

So this is what it looks right now.
enter image description here

with the XML code: 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TextView
        style="?android:listSeparatorTextViewStyle"
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:text="@string/crime_title_label" />

    <EditText
        android:id="@+id/crime_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title"
        android:hint="@string/crime_title_hint" />

    <TextView
        style="?android:listSeparatorTextViewStyle"
        android:id="@+id/crime_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/crime_title"
        android:text="@string/crime_details_label" />

    <Button
        android:id="@+id/crime_date"
        android:layout_below="@+id/crime_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <CheckBox
        android:id="@+id/crime_solved"
        android:layout_below="@+id/crime_date"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/crime_solved_label" />

    <Button
        android:id="@+id/suspect_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/crime_solved"
        android:text="@string/choose_suspect" />

    <Button
        android:id="@+id/send_crime_report"
        android:text="@string/send_crime_report"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/suspect_button" />

    <ImageView
        android:id="@+id/callImage"
        android:layout_width="57dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/crime_solved"
        android:layout_alignBottom="@+id/suspect_button"
        android:layout_toRightOf="@id/suspect_button"
        app:srcCompat="@android:drawable/sym_action_call" />

</RelativeLayout>

What I want to do is, have the ImageView callImage be on the right of suspect_button and in the rightmost side overall. For this, I want the suspect_button to be extended as much as possible, just like you do in match_parent. But when I do match_parent the ImageView gets lost. So to put it simply, I want to "match_parent" the suspect_button but also have my ImageView callImage on the right side of the suspect_button while not getting lost in appearance.

I would appreciate it if you do not suggest solutions which require me to use another layout. I want to learn if it is possible, or how to do what I imagine to do in Relative Layout.

Thanks.

Solution

  • You just need add callImage android:layout_alignParentRight="true" and add suspect_button android:layout_width="match_parent" and android:layout_toLeftOf="@+id/callImage"

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TextView
        style="?android:listSeparatorTextViewStyle"
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:text="@string/crime_title_label" />

    <EditText
        android:id="@+id/crime_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title"
        android:hint="@string/crime_title_hint" />

    <TextView
        style="?android:listSeparatorTextViewStyle"
        android:id="@+id/crime_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/crime_title"
        android:text="@string/crime_details_label" />

    <Button
        android:id="@+id/crime_date"
        android:layout_below="@+id/crime_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <CheckBox
        android:id="@+id/crime_solved"
        android:layout_below="@+id/crime_date"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/crime_solved_label" />

    <Button
        android:id="@+id/suspect_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/crime_solved"
        android:layout_toLeftOf="@+id/callImage"
        android:text="@string/choose_suspect" />

    <Button
        android:id="@+id/send_crime_report"
        android:text="@string/send_crime_report"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/suspect_button" />

    <ImageView
        android:id="@+id/callImage"
        android:layout_width="57dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/crime_solved"
        android:layout_alignBottom="@+id/suspect_button"
        android:layout_alignParentRight="true"
        app:srcCompat="@android:drawable/sym_action_call" />

</RelativeLayout>

    So result will like this enter image description here

    Answer for question in comment. I need add LinearLayout to make ImageView align right half of screen

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TextView
        style="?android:listSeparatorTextViewStyle"
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:text="@string/crime_title_label" />

    <EditText
        android:id="@+id/crime_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title"
        android:hint="@string/crime_title_hint" />

    <TextView
        style="?android:listSeparatorTextViewStyle"
        android:id="@+id/crime_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/crime_title"
        android:text="@string/crime_details_label" />

    <Button
        android:id="@+id/crime_date"
        android:layout_below="@+id/crime_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <CheckBox
        android:id="@+id/crime_solved"
        android:layout_below="@+id/crime_date"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/crime_solved_label" />

    <LinearLayout
        android:id="@+id/suspect_button_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/crime_solved"
        android:weightSum="2"
        android:orientation="horizontal">
        <Button
            android:id="@+id/suspect_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/choose_suspect" />



        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical">
            <ImageView
                android:id="@+id/callImage"
                android:layout_width="57dp"
                android:layout_height="wrap_content"
                app:srcCompat="@android:drawable/sym_action_call" />
        </LinearLayout>

    </LinearLayout>

    <Button
        android:id="@+id/send_crime_report"
        android:text="@string/send_crime_report"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/suspect_button_layout" />

</RelativeLayout>

    It will show like this enter image description here