Design transparent glass type bar with gradient

Question

I am trying to design a transparent glass type bar like this -

I am poor in designing. How can I achieve it. Is there any property?

Thanks in Advance

Answer 1

Just ensure that you use RelativeLayout to lay Toolbar and the body. Put the Toolbar in the last. Put transparent color for android:background attribute of the Toolbar This is an example of a working code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:baselineAligned="false"
    android:orientation="vertical">

    <fragment
        android:id="@+id/fragment_editor"
        android:name="ichsan.myapp.HelloFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout="@layout/fragment_editor" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="#10000000"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

</RelativeLayout>

Source : transparent Actionbar with AppCompat-v7 21

Answer 2

The glass style background is a bit more complex than just simple transparency. You might wanna use intrinsic blur. So the way to do this would be take a simple white image, perform intrinsic blur -> set the blurred output bitmap as the background for your toolbar. Now set alpha to somewhere around 0.6f and you will have something similar. It won't exactly be exactly like the image you provided, but might be the easiest way to get a similar effect.