Question

In this layout I have two Views – the ImageButton at bottom right and the TextView at center bottom. When android:visibility of both of views is set to visible – all is aligned as needed. But if I set android:visibility for ImageButton to gone – EditText goes to the left edge of layout.

Questions:

1) Why it is happening so?;

2) How to achieve not changing place of EditText on setting ImageButton visibility to gone? I need to get the same layout as on the left picture (see below), but without ImageButton. (I know, one possibility would be setting visibility not to gone, but to invisible, but I’m more interested in the solution with visibility = "gone")

P.s.: The first two layouts – RelativeLayout and FrameLayout are mandatory – they are used for other stuff, I just removed all that is not related to question.

<?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="match_parent" >

    <FrameLayout
        android:id="@+id/mForSearchFragment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/mForAdMediation"
        android:layout_alignWithParentIfMissing="true" >

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

            <EditText
                android:id="@+id/mSearchEditText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:ems="5"
                android:imeOptions="actionSearch"
                android:inputType="text"
                android:visibility="visible" >

                <requestFocus />
            </EditText>

            <ImageButton
                android:id="@+id/mSearchButton"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:background="@drawable/dark_button"
                android:src="@drawable/tab_search"
                android:visibility="visible" />
        </RelativeLayout>
    </FrameLayout>

</RelativeLayout>

Here are layouts:

Answer 1

The problem is that your inner RelativeLayout is inside of a FrameLayout that is set to wrap_content for the width. So, when the ImageView goes away, the width of the RelativeLayout shrinks to the width of the EditText. So, the EditText is still centered within the RelativeLayout, but the RelativeLayout is only as wide as the EditText.

Maybe you could simplify your layout something like 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="match_parent" >

    <EditText
        android:id="@+id/mSearchEditText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:ems="5"
        android:imeOptions="actionSearch"
        android:inputType="text"
        android:visibility="visible" >

        <requestFocus />
    </EditText>

    <ImageButton
        android:id="@+id/mSearchButton"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="@drawable/dark_button"
        android:src="@drawable/tab_search"
        android:visibility="visible" />

</RelativeLayout>