When Collapse My Toolbar Stop Working

Question

On the bottom of my AppBarLayout, where I use my CollapsingToolbarLayout, I have a EditText and a ImageView (working as button).

When the AppBarLayout is open my editText and ImageView work fine.

But when I collapse and they get the space of the Toolbar looks like they are no more clickable.

Here work fine. But when they get this blue border space (Toolbar) Stop work. I cannot click in "LOS" or type anything more

My XML code

<android.support.design.widget.CoordinatorLayout
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:clipToPadding="false">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="210dp"
    android:stateListAnimator="@animator/appbar_always_elevated"
    android:background="@color/neah_screen_bg_white">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
        app:expandedTitleMarginStart="72dp"
        app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/main_home_banner_img"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:contentDescription="@string/background_to_text_contentDescription"
                android:scaleType="centerCrop"
                android:src="@drawable/bg_home"
                app:layout_collapseMode="parallax"
                app:layout_constraintBottom_toTopOf="@+id/main_home_text"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0" />

            <ImageView
                android:id="@+id/main_home_banner_filter"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:alpha="0.4"
                android:contentDescription="@string/shadow_contentDesxription"
                app:layout_constraintBottom_toTopOf="@+id/main_home_text"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/gradient_bg" />


            <ImageView
                android:id="@+id/main_home_neah_logo"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:contentDescription="@string/icon_contentDescription"
                app:layout_constraintEnd_toEndOf="@+id/main_home_banner_filter"
                app:layout_constraintStart_toStartOf="@+id/main_home_banner_filter"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@mipmap/icon_neah_logo_white" />

            <TextView
                android:id="@+id/main_home_cta_text"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="16dp"
                android:layout_marginEnd="24dp"
                android:layout_marginStart="24dp"
                android:layout_marginTop="8dp"
                android:gravity="center"
                android:text="@string/str_home_cta_text"
                android:textColor="@color/neah_text_white"
                android:textSize="@dimen/size_text_app_bar"
                android:textStyle="bold"
                app:layout_constraintBottom_toTopOf="@+id/main_home_text"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/main_home_neah_logo" />


            <EditText
                android:id="@+id/main_home_text"
                android:layout_width="0dp"
                android:layout_height="40dp"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="16dp"
                android:background="@color/transparent"
                android:ems="10"
                android:hint="@string/str_home_service_cta"
                android:inputType="textPersonName"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/main_home_button_text"
                app:layout_constraintStart_toStartOf="parent" />

            <ImageView
                android:id="@+id/main_home_button"
                android:layout_width="90dp"
                android:layout_height="0dp"
                android:contentDescription="@string/button_contentDescription"
                app:layout_constraintBottom_toBottomOf="@+id/main_home_text"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="@+id/main_home_text"
                app:srcCompat="@color/neah_btn_orange" />

            <TextView
                android:id="@+id/main_home_button_text"
                android:layout_width="70dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:gravity="center"
                android:text="@string/str_go"
                android:textColor="@color/neah_text_white"
                android:textSize="@dimen/size_text_big"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="@+id/main_home_text"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/main_home_text"
                app:layout_constraintTop_toTopOf="@+id/main_home_text" />

        </android.support.constraint.ConstraintLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            app:layout_collapseMode="pin" />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/main_home_list_swipe"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" >

    <android.support.v7.widget.RecyclerView
        android:id="@+id/main_home_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout >

Answer 1

I'm not an Android Developer but from the other UI work I have done so far, it seems that part of your container is in front of the UI elements that you want to be clickable.

1. I suggest you open your UI designer and put the UI in the collapsed state by setting the initial variables appropriately (not in the rendered view in the app build).
2. Like this you can then easily click on the single UI elements and see which of the elements is in front and blocking the access to the elements you want to access.
3. Afterwards either put this element behind the other if possible, or try to restructure your UI so that nothing is in front anymore, like pulling out the toolbar with the text and button out of the collapse area and attaching it to the bottom.