How to give toolbar transparent look

Question

I have my toolbar on top of an imageview that takes up the whole screen and I would like for the toolbar to appear like its on top of the image and with the transparent effect something like

But i dont know how to acheive that effect and my google searches havent been successful

This is my code:

<ImageView
    android:id="@+id/background"
    android:scaleType="fitXY"
    android:alpha="0.7"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>




<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:layout_alignParentTop="true"
    android:elevation="6dp"
    android:alpha="0.5"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:layout_below="@+id/toolbar"
    android:elevation="6dp"
    android:theme="@style/ThemeOverlay.AppCompat.Light"
    app:tabSelectedTextColor="@android:color/white"
    app:tabTextColor="@android:color/darker_gray"/>

Im using a constraint layout.

If someone could tell me how to do it or point me in the right direction I would appreciate it.

Thanks

just add `android:background="@android:color/transparent"` and remove the elevation . — ADM, Jan 11 '18 at 06:17
I already see the imageview beneath it, and adding color transparent nothing changes, What i want is to make it a little diferent from the background like in the picture that its a little blury and elevated, like the google bar that I have on my android phone that is a bit elevated from the background but you see the background behind it, sorry if i didnt explain my self well. — Jack, Jan 11 '18 at 11:46

score 0 · Answer 1 · answered Jan 11 '18 at 06:26

First you have to add below line in your res>values>colors.xml

 <color name="colorTransperent">#00000000</color>

add colorTransperent to your background of toolbar

  <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_alignParentTop="true"
            android:background="@color/colorTransperent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

I already see the imageview beneath it, and adding color transparent nothing changes, What i want is to make it a little diferent from the background like in the picture that its a little blury and elevated, like the google bar that I have on my android phone that is a bit elevated from the background but you see the background behind it, sorry if i didnt explain my self well. — Jack, Jan 11 '18 at 11:46

How to give toolbar transparent look

1 Answers1