Android - How to achieve this shadowy background effect on toolbar's buttons?

Question

The title is descriptive enough.

Answer 1

Create a drawable like (bg_transluecent.xml):

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="false" android:state_focused="false">
    <shape
        android:shape="oval">
        <solid
            android:color="#99000000"/>
    </shape>
</item>

#99000000 is a color code for transluecent.

Also, create a custom toolbar and then set this drawable as the background of the imageView.

For creating a custom toolbar, create a layout resource file like this ( or as per your need ), custom_toolbar.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@android:color/transparent"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/custom_bar_image"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_alignParentEnd="true"
    android:layout_alignParentTop="true"
    android:src="@drawable/search"
    android:background="@drawable/bg_transluecent"
    android:layout_marginEnd="10dp"/>

<TextView
    android:id="@+id/name_custom_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:textColor="#fff"
    android:text="Display Name"
    android:textSize="18sp" />

<TextView
    android:id="@+id/last_seen_custom_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#f5f5f5"
    android:layout_alignStart="@+id/name_custom_bar"
    android:layout_below="@+id/name_custom_bar"
    android:text="Last Seen" />

</RelativeLayout>

And then set it in your activity like,

setSupportActionBar(findViewById<Toolbar>(R.id.you_toolbar_id));

ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowCustomEnabled(true);

LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View action_bar_view = inflater.inflate(R.layout.chat_custom_bar,null);
actionBar.setCustomView(action_bar_view);

Or you can simply add some views in toolbar itself like,

    <android.support.v7.widget.Toolbar
            style="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:titleTextColor="@color/white"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:backgroundTint="@android:color/transparent">

       //Your views here with bg_transluecent.xml as background

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