How to display an image on action bar that is half outside

Question

I am trying to add a button like in the below picture which is half outside the action bar. I am looking for a standard way to design it as it is so common nowadays.

Thanks

Answer 1

The button is called a Floating action button or "FAB". What you want is a FAB on a CoordinatorLayout. For further reading you can go here:

https://material.google.com/components/buttons-floating-action-button.html#buttons-floating-action-button-large-screens

https://guides.codepath.com/android/floating-action-buttons

Answer 2

You should look for "FloatingActionButton".

For example:

<android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/viewA"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.15">

            </LinearLayout>

        <LinearLayout
            android:id="@+id/viewB"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.85" >

        </LinearLayout>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/btn_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:clickable="true"
        android:src="@drawable/ic_ok"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="left|bottom"
        app:backgroundTint="@color/accent"/>

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