CODEWITHSUNDEEP
androidmaterial-designandroid-coordinatorlayoutandroid-appbarlayout
jaolstad
jaolstad

Reputation: 605

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

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>.......

Upvotes: 7

Views: 1458

Answers (2)

cargo8
cargo8

Reputation: 256

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.

Upvotes: 5

jaolstad
jaolstad

Reputation: 605

Solved this by replacing the CoordinatorLayout element with a LinearLayout with android:orientation="vertical". Using CoordinatorLayout seems to have been a wrong approach to this one.

Upvotes: 2

Related Questions