How to Show Menu items in grid view

Question

How to show menu items in grid view for action bar.by default it displayed in listvew type but how to display in gridview.for file attachment option i want to show action menu items in grid view like wats app.can anyone tell how to show that custom view on action menu item click in android

Answer 1

create Custom Grid view grid_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:padding="8dp" >

<ImageView
    android:id="@+id/menu_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:contentDescription="@string/images"
    android:scaleType="centerCrop" />

<TextView
    android:id="@+id/menu_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@android:color/white"
    android:textColor="#196fb5"
    android:textSize="15sp" />
</LinearLayout>

Create custom_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/background_light"
android:orientation="vertical" >

<GridView
    android:id="@+id/grid_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fadingEdge="none"
    android:horizontalSpacing="0dp"
    android:numColumns="3"
    android:stretchMode="columnWidth"
    android:verticalSpacing="0dp" />

</LinearLayout>

Change showPopup(View view) method from above code

private void showPopup(View view) {

    String[] menuText = { "Menu1", "Menu2", "Menu3", "Menu4", "Menu5","Menu6" };
    int[] images = { R.drawable.ic_launcher, R.drawable.ic_launcher,
            R.drawable.ic_launcher, R.drawable.ic_launcher,
            R.drawable.ic_launcher, R.drawable.ic_launcher };
    GridView menuGrid;
    PopupWindow showPopup = PopupHelper
            .newBasicPopupWindow(getApplicationContext());
    LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View popupView = inflater.inflate(R.layout.custom_layout, null);
    menuGrid = (GridView) popupView.findViewById(R.id.grid_layout);
    CustomGrid adapter = new CustomGrid(getApplicationContext(), menuText,
            images);
    menuGrid.setAdapter(adapter);
    showPopup.setContentView(popupView);

    showPopup.setWidth(LayoutParams.WRAP_CONTENT);
    showPopup.setHeight(LayoutParams.WRAP_CONTENT);
    showPopup.setAnimationStyle(R.style.Animations_GrowFromTop);
    showPopup.showAsDropDown(view);
}

Create an adapter class file CustomGrid.java

package com.example.customactionbar;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomGrid extends BaseAdapter {
private Context context;
private String[] menuText;
private int[] images;

public CustomGrid(Context context, String[] menuText, int[] images) {
    this.context = context;
    this.menuText = menuText;
    this.images = images;
}

@Override
public int getCount() {
    return images.length;
}

@Override
public Object getItem(int position) {
    return null;
}

@Override
public long getItemId(int position) {
    return 0;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    View grid;
    LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    if (convertView == null) {
        grid = new View(context);
        grid = inflater.inflate(R.layout.grid_single, null);
        TextView menu_text = (TextView) grid.findViewById(R.id.menu_text);
        menu_text.setText(menuText[position]);

        ImageView packageImage = (ImageView) grid
                .findViewById(R.id.menu_image);

        packageImage.setImageResource(images[position]);

    } else {
        grid = (View) convertView;
    }
    return grid;
}

}

Answer 2

Try this it working fine.

Create custom_layout.xml

<?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="wrap_content"
android:background="@android:color/background_light"
android:orientation="vertical" >

<LinearLayout
    android:id="@+id/layout1"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" >

        <ImageView
            android:id="@+id/image1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/image"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image1"
            android:text="Menu1" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" >

        <ImageView
            android:id="@+id/image2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/image"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image2"
            android:text="Menu2" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" >

        <ImageView
            android:id="@+id/image3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/image"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image3"
            android:text="Menu3" />
    </RelativeLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/layout2"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" >

        <ImageView
            android:id="@+id/image4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/image"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/text4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image4"
            android:text="Menu4" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" >

        <ImageView
            android:id="@+id/image5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/image"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/text5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image5"
            android:text="Menu5" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" >

        <ImageView
            android:id="@+id/image6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/image"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/text6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image6"
            android:text="Menu6" />
    </RelativeLayout>
</LinearLayout>

create layout like this or create custom grid view.

create file res/menu/main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.customactionbar.MainActivity" >

<item
    android:id="@+id/menus"
    android:icon="@drawable/ic_launcher"
    android:orderInCategory="100"
    android:title="@string/menu"
    app:showAsAction="always"/>
</menu>

create file res/anim/grow_from_top.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:fromXScale="0.3" android:toXScale="1.0"
    android:fromYScale="0.3" android:toYScale="1.0"
    android:pivotX="50%" android:pivotY="0%"
    android:duration="@android:integer/config_shortAnimTime"
/>
<alpha
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromAlpha="0.0" android:toAlpha="1.0"
    android:duration="@android:integer/config_shortAnimTime"
/>
</set>

create file res/anim/shrink_from_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:fromXScale="1.0" android:toXScale="0.3"
    android:fromYScale="1.0" android:toYScale="0.3"
    android:pivotX="50%" android:pivotY="0%"
    android:duration="@android:integer/config_shortAnimTime"
/>
<alpha
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromAlpha="1.0" android:toAlpha="0.0"
    android:duration="@android:integer/config_shortAnimTime"
/>
</set>

paste below lines at style.xml

 <style name="Animations" />

<style name="Animations.GrowFromTop">
    <item name="@android:windowEnterAnimation">@anim/grow_from_top</item>
    <item name="@android:windowExitAnimation">@anim/shrink_from_bottom</item>
</style>

create class file PopupHelper.java

import android.content.Context;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup.LayoutParams;
import android.view.WindowManager;
import android.widget.PopupWindow;

public class PopupHelper {

public static PopupWindow newBasicPopupWindow(Context context) {
    final PopupWindow window = new PopupWindow(context);

    // when a touch even happens outside of the window
    // make the window go away
    window.setTouchInterceptor(new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_OUTSIDE) {
                window.dismiss();
                return true;
            }
            return false;
        }
    });

    window.setWidth(WindowManager.LayoutParams.WRAP_CONTENT);
    window.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
    window.setTouchable(true);
    window.setFocusable(true);
    window.setOutsideTouchable(true);

    window.setBackgroundDrawable(new BitmapDrawable());

    return window;
}

/**
 * Displays like a QuickAction from the anchor view.
 * 
 * @param xOffset
 *            offset in the X direction
 * @param yOffset
 *            offset in the Y direction
 */
public static void showLikeQuickAction(PopupWindow window, View root,
        View anchor, WindowManager windowManager, int xOffset, int yOffset) {

    window.setAnimationStyle(R.style.Animations_GrowFromTop);

    int[] location = new int[2];
    anchor.getLocationOnScreen(location);

    Rect anchorRect = new Rect(location[0], location[1], location[0]
            + anchor.getWidth(), location[1] + anchor.getHeight());

    root.measure(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

    int rootWidth = root.getMeasuredWidth();
    int rootHeight = root.getMeasuredHeight();

    int screenWidth = windowManager.getDefaultDisplay().getWidth();
    int screenHeight = windowManager.getDefaultDisplay().getHeight();

    int xPos = ((screenWidth - rootWidth) / 2) + xOffset;
    int yPos = anchorRect.top - rootHeight + yOffset;

    window.showAtLocation(anchor, Gravity.NO_GRAVITY, xPos, yPos);
}

}

and finally add this code in youractivity.java file

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    int id = item.getItemId();
    if (id == R.id.menus) {
        final View menuItemView = findViewById(R.id.menus);
        showPopup(menuItemView);
        return true;
    }
    return super.onOptionsItemSelected(item);
}

private void showPopup(View view) {
    PopupWindow showPopup = PopupHelper
            .newBasicPopupWindow(getApplicationContext());
    LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View popupView = inflater.inflate(R.layout.custom_layout, null);
    showPopup.setContentView(popupView);

    showPopup.setWidth(LayoutParams.WRAP_CONTENT);
    showPopup.setHeight(LayoutParams.WRAP_CONTENT);
    showPopup.setAnimationStyle(R.style.Animations_GrowFromTop);
    showPopup.showAsDropDown(view);
}