Toolbar expanding on clicking EditText view

Question

I have implemented material navigation drawer and toolbar in MainActivity. For implementing the navigation drawer and to ensure it shows up behind the status bar I have used following code for toolbar.xml

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/primaryColor"
    android:fitsSystemWindows="true"
    android:theme="@style/ToolbarTheme">
</android.support.v7.widget.Toolbar>

and included this in activity_main.xml as follows:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/navigation_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
........

in styles.xml I am using following attribute,

    <item name="android:windowTranslucentStatus">true</item>

With this everything is working just fine and I get the following result,

The problem occurs when i click on the edit text view (00.00). The moment that edit text view or any edit text view in the page is clicked, the toolbar just expands. See image below:

Now, I was able to rectify the issue by placing android:fitsSystemWindows="true" in activity_main.xml as follows:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/navigation_drawer"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:layout_height="match_parent">
........

My question is, though this solution works but I am not sure as to why do I have to use the same attribute twice in layout file? And what made the toolbar expand? Also, is this the right approach to tackle this issue?

Edit - Removing android:fitsSystemWindows="true" from toolbar.xml and placing it in drawer layout results in the main activity yielding correct results but other activities have a white bar. See image below.

Which attribute are you using twice? And i believe this is the correct usage of `android:fitsSystemWindows="true"`, because it is meant to be used to fit your view to the edges of the action bar or navigation bar — frgnvola, Aug 05 '15 at 06:08
Using `android:fitsSystemWindows="true"` once in toolbar.xml (which has been included in activity_main.xml) and the other time in `android.support.v4.widget.DrawerLayout` which is again present in activity_main.xml. — Paritosh, Aug 05 '15 at 06:12
You need `android:fitsSystemWindows="true"` for the `DrawerLayout` in order to fit it to the edges of the toolbar, to prevent it from going under the Toolbar, but I am not sure why it is needed in toolbar.xml. What happens if it is removed? — frgnvola, Aug 05 '15 at 06:22
Added result of removing `android:fitsSystemWindows="true"`. Please see the edit. — Paritosh, Aug 05 '15 at 06:32
If you were to add it to all main views in each activity, would that fix it? — frgnvola, Aug 05 '15 at 07:10
I am sorry. I should have been clear with explanation. Removing the code from toolbar.xml and placing it in main views of activity causes a white bar to appear over it (as shown in image). Removing the code altogether causes the toolbar to appear below status bar. However, if I put the code in toolbar (and then include the toolbar in main views) then it appears correctly. — Paritosh, Aug 05 '15 at 07:23
So any idea as to what is happening? And where am I wrong in using the code. — Paritosh, Aug 05 '15 at 18:28
I'm not sure if it helps, but i found this as a solution: add this to your activity in the manifest -> android:windowSoftInputMode="adjustPan" — R. Adang, Oct 13 '15 at 14:51
@R.Adang I didn't try your solution however, theoretically speaking, I am not sure how playing around with soft input mode would handle this issue. Could you please share the reason as to why adjusting pan would be of any use? — Paritosh, Oct 19 '15 at 22:13
http://stackoverflow.com/questions/28043202/android-appcompat-toolbar-stretches-when-searchview-gets-focus It's in one of the solutions. I tried it and it worked. not sure why, but that doesn't matter :P — R. Adang, Oct 20 '15 at 08:32

score 3 · Accepted Answer · answered Oct 22 '15 at 05:57

I had the same problem that you and I will tell you what I did for fix it

1) Defining the toolbar.xml

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolBarDetalleContacto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="4dp"
    android:background="?attr/colorPrimary"
    android:fitsSystemWindows="true"
    app:layout_collapseMode="pin"
    app:theme="@style/Theme.GpsFriends.Material">

</android.support.v7.widget.Toolbar>

The trick is to use this attribute in your activity xml inside a <android.support.v4.widget.DrawerLayout> parent component and set here the property android:fitsSystemWindows="true" (also in your toolbar.xml). If you dont use DrawerLayout the permanent grey color in your colorPrimaryDark attribute wont be change, will be always grey and just grey.

2) Defining your activity xml:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"

    android:fitsSystemWindows="true"
    tools:context="com.wherefriend.activities.agregaramigos.AgregarAmigosActivity">


    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <include
            android:id="@+id/toolbar_main_gps_friends"
            layout="@layout/toolbar_gps_friends"
            ></include>


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

        <Button
            android:id="@+id/bBuscar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:onClick="buscarAmigos"

            android:text="Buscar" />
        <EditText
            android:id="@+id/etfragmentCorreo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/bBuscar"
            android:ems="10"
            android:inputType="textEmailAddress" />

    </RelativeLayout>

    <ListView
        android:id="@+id/listaResultado"
        android:divider="@drawable/horizontal_linear_layout_divider"
        android:dividerHeight="0dp"
        android:layout_width="match_parent"
        android:layout_height="fill_parent" >
    </ListView>
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

As you can see, I defined first child activity xml UI as DrawerLayout but just below I use <LinearLayout> to include my whole User interface View compontents. At first my Toolbar and then the rests of the components.

The result is like that, testing in a real Nexus 4 - LG API versión 22:

i love you, that fixed so many Problems in the app i'm working on — kilian eller, Nov 07 '17 at 09:41

Toolbar expanding on clicking EditText view

1 Answers1