Android – Attach a view on hamburger menu icon

Hamburger menu icon is common to most of the Android developers. But have any one of you tried to overlay another view on top or side of this menu icon ? if not then this article will help you to achieve this with a simple trick. Lets have a look –

Prerequisites

  • You have to use android.support.v7.widget.Toolbar if not using it.
  • You have to use  android.support.v4.widget.DrawerLayout, NavigationView  and AppBarLayout too.

So Toolbar, DrawerLayout, NavigationView and AppBarLayout is required anyhow to implement side menus and which eventually shows the Hamburger menu icon.

How to overlay a view on Hamburger menu icon

Now the trick to overlay a view is very simple, we mostly use Toolbar before the Drawer layout so that NavigationView appears below the Toolbar, but now we just need to place the Toolbar inside a layout and use any other view of your choice within that layout proportionate to the Toolbar and you are done.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/app_theme_light"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:animateLayoutChanges="true"
            android:background="?attr/colorPrimary"
            android:elevation="2dp"
            android:transitionName="@string/transition.toolbar"
            app:layout_scrollFlags="snap|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:subtitleTextColor="@color/white"
            app:titleTextColor="@color/white">

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

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:elevation="2dp"
            android:src="@drawable/ic_info" />

    </RelativeLayout>

    <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/dlMenus"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="false"
        tools:openDrawer="start">

        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/main_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.design.widget.AppBarLayout
                android:id="@+id/appbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

            <!-- TODO add your layouts and views for main screen here-->
        </android.support.design.widget.CoordinatorLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true">

            <!-- TODO add your layouts and views  for side menus here-->
        </android.support.design.widget.NavigationView>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

In the above code I have placed the Toolbar inside a RelativeLayout and then added an ImageView with a small margin and see how it looks.

hamburger menu

 

With similar technique you can also achieve this kind of customization. I hope this article will be helpful to the developers.

Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *