Relative Layout, align center of parent and right of view with no overlap

Question

I am trying to align a TextView to be centered in a relative layout but also to the right of an ImageView. I would like it to look like this.

[-(image)-----some text here------------]

I'm able to do this with the code below, but if the text becomes too long it overlaps the image.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingTop="@dimen/small_padding"
    android:paddingBottom="@dimen/small_padding"
    android:background="@color/White">

    <ImageView
        android:id="@+id/navMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/home_icon"
        android:layout_marginEnd="@dimen/small_padding"
        android:contentDescription="@string/abc_search_hint"
        android:layout_alignParentStart="true" />

    <TextView
        android:id="@+id/actionBarTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/profile"
        android:textSize="24sp"
        android:textStyle="bold"
        android:textColor="@color/Black"
        android:maxLines="1"
        android:ellipsize="end"
        android:contentDescription="@string/title_activity_connect"
        android:layout_centerInParent="true" />

</RelativeLayout>

I have tried aligning the TextView to the right of the ImageView but it stops centering in parent if I do that. Any help is appreciated

Answer 1

You could try something like this. I used a radio group instead of a linear layout for this but it should still work. Have a the linear layout horizontal as you already do and then make the layout gravity center then just put the image first then the text view

<RadioGroup
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_gravity="center"
                android:paddingTop="20dp">

                    <RadioButton
                        android:id="@+id/radio_student"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/checkbox_student"
                        android:onClick="onRadioButtonClicked"
                        android:layout_marginEnd="30dp"
                        android:layout_marginRight="30dp"/>

                    <RadioButton
                        android:id="@+id/radio_teacher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/checkbox_teacher"
                        android:onClick="onRadioButtonClicked"
                        android:layout_marginStart="30dp"
                        android:layout_marginLeft="30dp"/>

            </RadioGroup>

EDIT: I don't know if the margin attributes for the buttons I have work on text views but padding left on the text might work

Answer 2

try this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingTop="@dimen/small_padding"
    android:paddingBottom="@dimen/small_padding"
    android:background="@color/White">

    <ImageView
        android:id="@+id/navMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/home_icon"
        android:layout_marginEnd="@dimen/small_padding"
        android:contentDescription="@string/abc_search_hint"
        android:layout_alignParentStart="`enter code here`true" />

    <TextView
        android:id="@+id/actionBarTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/profile"
        android:textSize="24sp"
        android:textStyle="bold"
        android:textColor="@color/Black"
        android:maxLines="1"
        android:ellipsize="end"
        android:contentDescription="@string/title_activity_connect"
        android:layout_toRightOf="@+id/navMenu"
        android:alignParentRight="true"
        android:gravity="center" />

</RelativeLayout>

Answer 3

You could (and should, for performance sake), use a compound drawable for the TextView (and get rid of the ImageView)

You want the image to stay on the Left part of the TextView, so use android:drawableLeft:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/small_padding"
    android:paddingBottom="@dimen/small_padding"
    android:background="@color/White"
    >
    <TextView
        android:id="@+id/actionBarTitle"
        android:drawableLeft="@drawable/home_icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/profile"
        android:textSize="24sp"
        android:textStyle="bold"
        android:textColor="@color/Black"
        android:maxLines="1"
        android:ellipsize="end"
        android:contentDescription="@string/title_activity_connect"
        android:centerInParent="true"
        android:gravity="center"
    />    
</RelativeLayout>