Android Custom Vertical Dropdown Icons Menu

https://www.viralandroid.com/2016/01/android-custom-vertical-dropdown-icons-menu.html

In this tutorial, I am going to show how to create custom vertical dropdown icon menu in android programmatically. Creating and implementing custom menu is not so difficult in android because we can make such menu with XML and to make perfectly working we have to add little bit java code in our app activity file.

We can create and implement drop down icons menu in android only using one XML layout file and a java activity file. But to add some extra effect like animation, hover color, etc. we have to create some XML file in drawable folder or you can add some code in java activity file.

Here, you will learn not only to implement drop down custom icon menu in your android application but also learn to add onClick event to the icon and to add on press or focus color to the icon background.

Related:
Android Dropdown Menu Example
Android Spinner Example
Android Action Bar Tutorial and Example With Option Menu

Example: How to Implement Custom Vertical Dropdown Icons Menu in Android

Let’s start step by step implementing dropdown icon menu in android application. Following are the different XML and java file.

XML Layout File

Following is the XML layout file where I have added ImageButton and TextView inside LinearLayout and RelativeLayout with some important attributes.

res/layout/custom_vertical_dropdown_icon_menu.xml

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="#c2ec97"
	android:paddingBottom="@dimen/activity_vertical_margin"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin"
	tools:context="viralandroid.com.androidxmluserinterfacetutorial.MainActivity">

	<Button
	android:id="@+id/dropdown_custom_icon_menu"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:background="#5bace6"
	android:drawableRight="@android:drawable/arrow_down_float"
	android:onClick="verticalDropDownIconMenu"
	android:padding="16dp"
	android:text="DropDown\t"
	android:textColor="#eee" />

	<LinearLayout
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_below="@+id/dropdown_custom_icon_menu"
	android:orientation="vertical">

	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Android Custom Vertical Dropdown Menu IconsAndroid Custom Vertical. Break line after Icon in Menu Item Android.
	Dropdown Menu IconsAndroid Custom Vertical Dropdown. popup menu with icon in android example.
	Android Custom Vertical Dropdown Menu Icons. Android Custom Vertical Dropdown Menu Icons" />

	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="16dp"
	android:text="Android Custom Vertical Dropdown Menu Icons" />
	</LinearLayout>

	<LinearLayout
	android:id="@+id/vertical_dropdown_icon_menu_items"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_below="@+id/dropdown_custom_icon_menu"
	android:background="#333"
	android:orientation="vertical"
	android:padding="3dp"
	android:visibility="invisible">

	<ImageButton
	android:layout_width="wrap_content"
	android:layout_height="match_parent"
	android:background="@drawable/onclick_press_color"
	android:onClick="menuItemClick"
	android:paddingBottom="5dp"
	android:paddingLeft="26dp"
	android:paddingRight="26dp"
	android:paddingTop="5dp"
	android:src="@drawable/ic_action_send"
	android:text="Android Vertical Custom DropDown Menu" />

	<ImageButton
	android:layout_width="wrap_content"
	android:layout_height="match_parent"
	android:layout_marginTop="2dp"
	android:background="@drawable/onclick_press_color"
	android:onClick="menuItemClick"
	android:paddingBottom="5dp"
	android:paddingLeft="26dp"
	android:paddingRight="26dp"
	android:paddingTop="5dp"
	android:src="@drawable/ic_action_attach"
	android:text="Android Vertical Custom DropDown Menu" />

	<ImageButton
	android:layout_width="wrap_content"
	android:layout_height="match_parent"
	android:layout_marginTop="2dp"
	android:background="@drawable/onclick_press_color"
	android:onClick="menuItemClick"
	android:paddingBottom="5dp"
	android:paddingLeft="26dp"
	android:paddingRight="26dp"
	android:paddingTop="5dp"
	android:src="@drawable/ic_action_mail"
	android:text="Android Vertical Custom DropDown Menu" />

	<ImageButton
	android:layout_width="wrap_content"
	android:layout_height="match_parent"
	android:layout_marginTop="2dp"
	android:background="@drawable/onclick_press_color"
	android:onClick="menuItemClick"
	android:paddingBottom="5dp"
	android:paddingLeft="26dp"
	android:paddingRight="26dp"
	android:paddingTop="5dp"
	android:src="@drawable/ic_action_refresh"
	android:text="Android Vertical Custom DropDown Menu" />

	<ImageButton
	android:layout_width="wrap_content"
	android:layout_height="match_parent"
	android:layout_marginTop="2dp"
	android:background="@drawable/onclick_press_color"
	android:onClick="menuItemClick"
	android:paddingBottom="5dp"
	android:paddingLeft="26dp"
	android:paddingRight="26dp"
	android:paddingTop="5dp"
	android:src="@drawable/ic_action_attach"
	android:text="Android Vertical Custom DropDown Menu" />

	<ImageButton
	android:layout_width="wrap_content"
	android:layout_height="match_parent"
	android:layout_marginTop="2dp"
	android:background="@drawable/onclick_press_color"
	android:onClick="menuItemClick"
	android:paddingBottom="5dp"
	android:paddingLeft="26dp"
	android:paddingRight="26dp"
	android:paddingTop="5dp"
	android:src="@drawable/ic_action_mail"
	android:text="Android Vertical Custom DropDown Menu" />

	</LinearLayout>
	</RelativeLayout>

view raw custom_vertical_dropdown_icon_menu.xml hosted with ❤ by GitHub

Java Activity File

Following is the modified code of java activity file where I have added onClick event to show and hide dropdown icon menu.

src/VerticalDropDownIconMenu.java

// Creating Android Custom Vertical Dropdown Icons Menu Using XML
package viralandroid.com.androidxmluserinterfacetutorial;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.LinearLayout;

public class VerticalDropDownIconMenu extends AppCompatActivity {

    LinearLayout dropDownMenuIconItem;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.custom_vertical_dropdown_icon_menu);

        dropDownMenuIconItem = (LinearLayout) findViewById(R.id.vertical_dropdown_icon_menu_items);
    }

    public void verticalDropDownIconMenu(View view) {
        if (dropDownMenuIconItem.getVisibility() == View.VISIBLE) {
            dropDownMenuIconItem.setVisibility(View.INVISIBLE);
        } else {
            dropDownMenuIconItem.setVisibility(View.VISIBLE);
        }
    }

    public void menuItemClick(View view) {
        dropDownMenuIconItem.setVisibility(View.INVISIBLE);
    }
}

view raw VerticalDropDownIconMenu.java hosted with ❤ by GitHub

For implementing on pressed color in icon background I have create onclick_press_color.xml file inside res/drawable directory. Following is the content of onclick_press_color.xml file.

res/drawable/onclick_press_color.xml

	<?xml version="1.0" encoding="utf-8"?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:drawable="@color/black" android:state_focused="true" android:state_pressed="true" />
	<item android:drawable="@color/black" android:state_focused="false" android:state_pressed="true" />
	<item android:drawable="@color/light_black" />
	</selector>

view raw onclick_press_color.xml hosted with ❤ by GitHub

And following is the colors.xml

res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="light_black">#504f4f</color>
    <color name="black">#000000</color>
</resources>

view raw colors.xml hosted with ❤ by GitHub

That’s all. Now run your Android Custom Vertical Dropdown Icons Menu application and click dropdown button, which will look like the above screenshot.

Android

Search This Blog