Create drop-down menu with image icons in Android

Hello devs!
In this tutorial, we will be creating a drop-down menu on clicking a button in Android studio.

Here is an image of how our menu is going to look:

On clicking the hamburger icon, a vertical menu will appear with image icons of your choice. Above image is just to get an idea of what we are going to develop.

Let's get started.

Step 1:
Open the layout file where you want the menu. Add the hamburger icon on an image button.

<ImageButton    android:layout_width="50dp"    android:layout_height="50dp"    android:src="@drawable/ham"    android:id="@+id/ham"    android:background="#00000000"/>

 Note: #00000000 specifies 'transparent' background.

Step 2:
Add a vertical linear layout for the menu. Inside that, add nested linear layouts for horizontal rows.

<LinearLayout    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:orientation="vertical"    android:layout_below="@id/ham"    android:id="@+id/dropdown"    android:visibility="invisible"
    android:padding="2dp"    >

    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"
      >        <ImageButton            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@drawable/img1"            android:scaleType="centerCrop"/>

          <ImageButton            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@drawable/img2"            android:scaleType="centerCrop"/>

        
    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"
      >        <ImageButton            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@drawable/img3"            android:scaleType="centerCrop"/> 

         <ImageButton            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@drawable/img4"            android:scaleType="centerCrop"/>
        
    </LinearLayout>

</LinearLayout>

And so on..

Note: The visibility is "invisible" so that it will be visible after clicking the hamburger icon.

Step 3:
Surround this inside a scroll view.

 <ScrollView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_below="@id/ham">

<LinearLayout    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:orientation="vertical"    android:layout_below="@id/ham"    android:id="@+id/dropdown"    android:visibility="invisible"
    android:padding="2dp"    >

    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"
      >        <ImageButton            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@drawable/img1"            android:scaleType="centerCrop"/>

          <ImageButton            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@drawable/img2"            android:scaleType="centerCrop"/>

        
    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"
      >        <ImageButton            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@drawable/img3"            android:scaleType="centerCrop"/> 

         <ImageButton            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@drawable/img4"            android:scaleType="centerCrop"/>
        
    </LinearLayout>

</LinearLayout>

</ScrollView>

Note: The layout of the menu should be added in the XML after the other contents of the layout so that menu is above the content and not below it.

Also, the layout_below is set to the ham.

Step 4:
Let's move on to the JAVA part.

Inside the Activity class declare the ImageButtons(all including ham icon) and LinearLayout(vertical) and in the onCreate method initialize it using its IDs (findViewById method).



Step 5:
Now we need to make the menu visible on clicking the ham icon and invisible on clicking it again. For that, refer the following code.

hambtn.setOnClickListener(new View.OnClickListener() {
    @Override    public void onClick(View view) {
        if(dropmenu.getVisibility()==View.VISIBLE)
        {   
            dropmenu.setVisibility(View.GONE);        }
        else {          
            dropmenu.setVisibility(View.VISIBLE);        }
    }
});

Step 6:
AddSet onClickListener for every ImageButton and specify an action for each. It may be opening an activity or simply making a Toast.

This idea is inspired by: https://www.viralandroid.com/2016/01/android-custom-vertical-dropdown-icons-menu.htmlThat's all folks! Hope you find this tutorial helpful.

 
This idea is inspired from :https://www.viralandroid.com/2016/01/android-custom-vertical-dropdown-icons-menu.html



I 
h
T