AppBarLayout with elevation=0dp does not respond to touch-events (click)

Question

I have used AppBarLayout inside a CoordinatorLayout, in my app. Because of certain design requirements, I was forced to remove the shadow below the AppBarLayout element, done by setting its elevation property to 0. (app:elevation="0"). After doing this the elements inside the AppBarLayout, the tabs does not respond to touch/click events.

By setting the elevation back to 1dp, the elements are responding to touch/click events, but then I am back to having a shadow...

Does anyone have a suggestion on how to make the elements respond to touch/click events while the AppBarLayout is at 0dp elevation?

Code extract:

  <android.support.design.widget.CoordinatorLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_height"
            app:elevation="0dp">

            <android.support.v7.widget.Toolbar
                android:id="@+id/my_toolbar"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:minHeight="?attr/actionBarSize">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="45dp"
                    android:scaleType="fitCenter"
                    android:layout_gravity="center"
                    android:id="@+id/toolbar_logo"
                    android:maxHeight="45dp"
                    android:contentDescription="Main logo"/>
            </android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabIndicatorColor="@color/tab_indicator_color"
                app:tabTextColor="@color/primary_text_grey"
                app:tabIndicatorHeight="3dp"
                android:id="@+id/tab_layout">
            </android.support.design.widget.TabLayout>

        </android.support.design.widget.AppBarLayout>.......

Answer 1

Want to close the loop on this since I was running into a very similar issue.

The problem is not that elevation=0dp, the problem is that the CoordinatorLayout behaves similarly to a FrameLayout, meaning elements declared in XML later are "on top" of elements declared earlier. Changing to linear layout happened to work because it does not support 'overlapping elements'.

The correct solution is to move your AppBarLayout (or whatever the element is) on top of whatever element is declared after that is intercepting the event. The reason it works when elevation > 0 is because elevation is taken into account when dispatching the touch event, but in the case the elevations are equal you will encounter this same issue.