app:elevation="0dp" hide layout inside toolbar

Question

I have take custom layout inside the toolbar and perform action according to it. but in some case i want make toolbar transparent so when i have set app:elevation="0dp" than it will hide my custom layout but still action will performed when click on that area.

I have used following layout inside toolbar.

Edited

        <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarMain"
        app:elevation="0dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:background="@null"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize">

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

                <ImageView
                    android:id="@+id/iv_menu"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:clickable="true"
                    android:contentDescription="@null"
                    android:padding="@dimen/activity_vertical_margin"
                    android:src="@drawable/ic_menu" />


                <FrameLayout
                    android:id="@+id/frmNotification"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_toEndOf="@+id/iv_menu"
                    android:layout_toRightOf="@+id/iv_menu"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:clickable="true"
                    android:padding="@dimen/padding_5">

                    <ImageView
                        android:id="@+id/iv_notification"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:contentDescription="@null"
                        android:padding="@dimen/padding_5"
                        android:src="@drawable/ic_notification" />

                    <FrameLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="right"
                        android:layout_marginTop="@dimen/padding_5"
                        android:background="@drawable/bg_bage">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="@string/eight"
                            android:textColor="@android:color/white"
                            android:textSize="@dimen/font_8" />
                    </FrameLayout>
                </FrameLayout>


                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:layout_toRightOf="@+id/frmNotification"
                    android:contentDescription="@null"
                    android:src="@drawable/logo_header" />

                <ImageView
                    android:id="@+id/ivElasticSearch"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:paddingLeft="@dimen/padding_10"
                    android:paddingRight="@dimen/padding_15"
                    android:src="@drawable/ic_search" />

            </RelativeLayout>


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

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

How to overcome this issue because in some scenario we want transparent toolbar but icon inside it should be display.

Here I have attached image how actually look like.

screenshot

Balraj · Answer 1 · 2018-04-09T11:42:10.567

0

Your idea of app:elevation="someValue" is wrong, it does not hide the toolbar.The attribute app:elevation is used to show how much you want to make the toolbar or any other view that supports that attribute raised above the surface. Consider the surface as the floor on which the views are placed, now if you want to show some view like toolbar raised to other views you use that attribute. if you want to make it transparent do it like this.

According to Material Design Guidelines, the elevation for appbar should be 4dp. So you should not set it to 0dp.

edited Apr 09 '18 at 11:42

answered Apr 09 '18 at 08:37

Balraj

310
2
7

Thank you very much @dexter for reply you are right. But when i have used toolbar.setVisibility='invisible' OR transparent theme then My Layout will also hide that's the main problem. – Testing Testing Apr 09 '18 at 11:33
can you post a image link on what's happening? or your updated code? and sorry for guiding you wrong don't set the visibility to invisible cause you want some actions performed on toolbar. Also I saw your code mentioned elevation to both `AppBarLayout` and `Toolbar`, don't do it just give elevation to `AppBarLayout`. – Balraj Apr 09 '18 at 11:40
I have update code above and also used below method for transparent public void changeAppBarBackgroundTransparent() { appBarMain.setBackgroundColor(getResources().getColor(android.R.color.transparent)); // setTheme(R.style.TransparentActionBar); } – Testing Testing Apr 09 '18 at 12:40

Abhi · Answer 2 · 2018-04-11T16:46:31.873

Use android:background="@null" instead of app:elevation="0dp".

<android.support.design.widget.AppBarLayout
        android:id="@+id/appBarMain"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null">

EDIT

You want to remove the shadow of the toolbar. To do that use app:elevation="0dp" only for appbar layout. Your code before revision shows you used for both toolbar and appbar. Remove it for toolbar.

UPDATE

I tested the code and the following code seemed to do the work.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/testbg">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarMain"
        app:elevation="0dp"
        android:background="@null"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:background="@null"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize">

            <!-- Rest of the code -->

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

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

OUTPUT IMAGE

Thank you very much @Abhi for the reply but still my need is not fulfill. — Testing Testing, Apr 09 '18 at 11:34
You wanted transparent toolbar. Does the above code not solve that issue? — Abhi, Apr 09 '18 at 11:46
Hello@Abhi using app:elevation = "0dp" my toolbar will hide that is correct but i want to display the icons which is already added in toolbar see my xml code.(Hide toolbar + show icons) — Testing Testing, Apr 10 '18 at 05:37
Hello @Abhi have you take imageview inside the toolbar (Rest of the code area) ? — Testing Testing, Apr 12 '18 at 10:47
Yes the imageView is within the toolbar. Your code was unaltered; changes were only made in the AppBarLayout and Toolbar. — Abhi, Apr 12 '18 at 11:47

app:elevation="0dp" hide layout inside toolbar

2 Answers2