Skip to main content

Creating custom menu in android (Part-1/3 : Menu Design)

Part 2 here
Part 3 here
Download the apk here
Full Source Code
Hi everyone, specially android developers. Are you bored of using the conventional navigation drawer that android-studio provides? The same one which appears from the left and all the menu items are listed along with some icons, right?
Today we’ll see how to design your own menu or commonly we say custom menu. So let’s look at what we are building today.
Looks interesting right.. and the most comforting thing about this menu is that you can have it on every screen of the application.
We won’t rush and write the whole code once and for all, we will cover each section separately.
So let’s build it!!!

The header :

The structure of this layout is pretty simple.
  • We have a RelativeLayout with a vertical LinearLayout inside it.
  • The LinearLayout has a weightsum 2 (dividing it into 2 equal parts).
  • We put any View with weight 1 (occupying half of the space) inside the LinearLayout with the green background color.
  • We put a TextView with weight 1 (occupying other half of the space) and some margin-top (to bring it down a bit) inside the LinearLayout
Which gives us the following structure.
Then we put an ImageView inside the root RelativeLayout but outside the LinearLayout. We set the gravity of this ImageView in centre to it comes in center of the over-all layout so we can use it for the profile picture.
So the over-all structure of header looks like
And the code for this is very simple :
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="2">

        <View
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#2a737b">
        </View>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            android:textStyle="bold"
            android:textColor="#2a737b"
            android:gravity="bottom|center"
            android:text="Oliver Queen" />
    </LinearLayout>

    <ImageView
        android:layout_width="95dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/dp_resume" />
</RelativeLayout>

The Menu Items :

The steps to design this are :
  • We have two menu items places inside a horizontal LinearLayout.
  • So if we see the design of a single menu item, we can simply copy and paste it changing the icon and name (because that is the only difference in them).
  • And after that we can copy and paste the whole row three times which will give us three rows of two menu items each(smart work!).
The design of one menu item is again based on the weights property of the layout.
  • We have a vertical LinearLayout with weightsum 3.
  • An ImageView for icon with weight 1.5
  • A TextView for label with weight 1
  • and rest 0.5 weight will be covered i appropriate margins.
The code for a single menu item looks like:
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#728a74"
    android:orientation="vertical"
    android:weightSum="3">

    <ImageView
        android:layout_width="25dp"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_marginTop="8dp"
        android:layout_weight="1.5"
        android:src="@drawable/mail" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Inbox"
        android:textColor="#fff"
        android:textSize="12sp" />
</LinearLayout>
Perfect! and now copying and pasting it inside the the horizontal LinearLayout with two equal space distributions for each menu . So we get two menu items in a row of equal size and covering equal space. It looks like this:
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginTop="40dp"
    android:layout_weight="1.5"
    android:orientation="horizontal"
    android:weightSum="2">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#728a74"
        android:orientation="vertical"
        android:weightSum="3">

        <ImageView
            android:layout_width="25dp"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:layout_marginTop="8dp"
            android:layout_weight="1.5"
            android:src="@drawable/mail" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Inbox"
            android:textColor="#fff"
            android:textSize="12sp" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="5dp"
        android:layout_weight="1"
        android:background="#cb707f"
        android:orientation="vertical"
        android:weightSum="3">

        <ImageView
            android:layout_width="25dp"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:layout_marginTop="8dp"
            android:layout_weight="1.5"
            android:src="@drawable/settings" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Settings"
            android:textColor="#fff"
            android:textSize="12sp" />
    </LinearLayout>
</LinearLayout>
So now we will combine the steps and the write the code for whole layout screen with header, menu items and the logout on footer along with appropriate weight distributions.
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:id="@+id/rootLayout"
    android:weightSum="3">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:orientation="vertical"
        android:background="#ffffff"
        android:weightSum="10">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:weightSum="2">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:background="#2a737b">
                </View>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_gravity="bottom"
                    android:layout_weight="1"
                    android:textStyle="bold"
                    android:textColor="#2a737b"
                    android:gravity="bottom|center"
                    android:text="Oliver Queen" />
            </LinearLayout>

            <ImageView
                android:layout_width="95dp"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/dp_resume" />
        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="40dp"
            android:layout_weight="1.5"
            android:orientation="horizontal"
            android:weightSum="2">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#728a74"
                android:orientation="vertical"
                android:weightSum="3">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="0dp"
                    android:layout_gravity="center"
                    android:layout_marginTop="8dp"
                    android:layout_weight="1.5"
                    android:src="@drawable/mail" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="Inbox"
                    android:textColor="#fff"
                    android:textSize="12sp" />
            </LinearLayout>


            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:background="#cb707f"
                android:orientation="vertical"
                android:weightSum="3">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="0dp"
                    android:layout_gravity="center"
                    android:layout_marginTop="8dp"
                    android:layout_weight="1.5"
                    android:src="@drawable/settings" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="Settings"
                    android:textColor="#fff"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="5dp"
            android:layout_weight="1.5"
            android:orientation="horizontal"
            android:weightSum="2">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#a180a4"
                android:orientation="vertical"
                android:weightSum="3">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="0dp"
                    android:layout_gravity="center"
                    android:layout_marginTop="8dp"
                    android:layout_weight="1.5"
                    android:src="@drawable/like" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="Wishlist"
                    android:textColor="#fff"
                    android:textSize="12sp" />
            </LinearLayout>


            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:background="#8eb9b9"
                android:orientation="vertical"
                android:weightSum="3">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="0dp"
                    android:layout_gravity="center"
                    android:layout_marginTop="8dp"
                    android:layout_weight="1.5"
                    android:src="@drawable/placeholder" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="Location"
                    android:textColor="#fff"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="5dp"
            android:layout_weight="1.5"
            android:orientation="horizontal"
            android:weightSum="2">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#9d997e"
                android:orientation="vertical"
                android:weightSum="3">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="0dp"
                    android:layout_gravity="center"
                    android:layout_marginTop="8dp"
                    android:layout_weight="1.5"
                    android:src="@drawable/search" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="Search"
                    android:textColor="#fff"
                    android:textSize="12sp" />
            </LinearLayout>


            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:layout_weight="1"
                android:background="#7a7ca9"
                android:orientation="vertical"
                android:weightSum="3">

                <ImageView
                    android:layout_width="25dp"
                    android:layout_height="0dp"
                    android:layout_gravity="center"
                    android:layout_marginTop="8dp"
                    android:layout_weight="1.5"
                    android:src="@drawable/share" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="Share"
                    android:textColor="#fff"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2.6">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_marginBottom="10dp"
                android:layout_marginRight="40dp"
                android:drawableLeft="@drawable/ic_logout"
                android:gravity="center"
                android:text="Logout"
                android:textSize="17sp" />
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="#50000000"
        android:layout_weight="1"></LinearLayout>

</LinearLayout>
So copy the above code and paste it in your android-studio. Replace the icons and labels and VOILA! the awesome menu screen is ready. :)
We will see how to integrate the other components in next lesson..
Till then- make sure you get this right.

May the source be with you.

Part 2 here
Part 3 here
Download the apk here
Full Source Code

Comments

Post a Comment

Popular posts from this blog

web2apk

http://web2apk.com/create.aspx Create App   Intro   About   Changes   MalWare ?   Contact   Privacy Useful Links Bluetooth Mini Keyboards Android Mini PC Reset Android URL App Title Icon or
Post a Comment
Read more

Android Bar Chart Using MpAndroidChart Library Tutorial

https://www.numetriclabz.com/android-bar-chart-using-mpandroidchart-library-tutorial/ Android Bar Chart Using MpAndroidChart Library Tutorial Objective In this tutorial we learn how to implement Bar Chart using MpAndroidChart Library in your Android App. Download Source Code       Step 1 Contents ·        1  Introduction ·        2  Creating Bar chart o    2.1  Create a new Project o    2.2  Adding library in Project o    2.3  Create Layout o    2.4  To Plot Bar Chart §   2.4.1  Initialize the graph id §   2.4.2  Creating a Dataset §   2.4.3  Defining X-axis labels §   2.4.4  Set the data §   2.4.5  Add the description to the chart §   2.4.6  Run your App §   2.4.7  Set the color §   2.4.8  Adding Animations o    2.5  To plot grouped bar chart §   2.5.1  Creating Dataset o    2.6  Get the best of Android plus exclusive deals and freebies in your inbox!
2 comments
Read more

how to retrieve image from sqlite database in android and display in listview

 Android platform provides several ways to store data in our application. 1. SQLite database 2. SharedPreferences etc For our post, we will only work with SQLite database. First and foremost, we need to understand what an SQLite database is? SQLite database  is an open source SQL database that stores data to a text file on a device. It executes SQL Commands to perform a set of functions, that is, create, read, update and delete operations. On my previous post, I showed how to  store data in SQLite database from edit text, retrieve and populate it in a listview . For this post, I will show the SQLite CRUD operations with images from gallery and text from EditText. We need to understand this; images are stored in SQLite database as BLOB data type. A BLOB is a large binary object that can hold a variable amount of data.  Note, we can only store images in the database as BLOB data type. We need to convert our image path to a bitmap then to bytes. Also
1 comment
Read more