Resize custom menu item

Question

I need help to re-size my current menu item. I created a custom menu with programmatically added items in a TableLayout. This is my current menu:

I need to change the height of the first menu. Now the problem is that when I change the height of the first menu item the entire menu changes its height. I want menu like this:

Is there any way to re-size my current item?

public synchronized void show(View v) {
    mIsShowing = true;
    boolean isLandscape = false;
    int itemCount = mMenuItems.size();
    if (itemCount<1) return; //no menu items to show
    if (mPopupWindow != null) return; //already showing
    Display display = ((WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
    if (display.getWidth() > display.getHeight()) isLandscape = true;
    View mView= mLayoutInflater.inflate(R.layout.custom_menu, null);
    mPopupWindow = new PopupWindow(mView,LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT, false);
    mPopupWindow.setAnimationStyle(android.R.style.Animation_Dialog);
    mPopupWindow.setWidth(display.getWidth());
    mPopupWindow.showAtLocation(v, Gravity.BOTTOM, 0, 0);

    int divisor = mItemsPerLineInPortraitOrientation;
    if (isLandscape) divisor = mItemsPerLineInLandscapeOrientation;
    int remainder = 0;
    if (itemCount < divisor) {
        mRows = 1;
        remainder = itemCount;
    } else {
        mRows = (itemCount / divisor);
        remainder = itemCount % divisor;
        if (remainder != 0) mRows++;
    }
    TableLayout table = (TableLayout)mView.findViewById(R.id.custom_menu_table);
    table.removeAllViews();

    for (int i=0; i < mRows; i++) {
        TableRow row = null;
        TextView tv = null;
        ImageView iv = null;

        row = new TableRow(mContext);
        row.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
        for (int j=0; j< divisor; j++) {
            if (i*divisor+j >= itemCount) break;
            final CustomMenuItem cmi = mMenuItems.get(i*divisor+j);
            View itemLayout = mLayoutInflater.inflate(R.layout.custom_menu_item, null);
            if  (j==0)
            {
                itemLayout.setBackgroundResource(R.drawable.current_menu);
                itemLayout.setPadding(5, 5, 5, 5);
            }

            tv = (TextView)itemLayout.findViewById(R.id.custom_menu_item_caption);
            tv.setText(cmi.getCaption());
            iv = (ImageView)itemLayout.findViewById(R.id.custom_menu_item_icon);
            iv.setImageResource(cmi.getImageResourceId());
            itemLayout.setOnClickListener( new OnClickListener() {
               @Override
               public void onClick(View v) {
                    mListener.MenuItemSelectedEvent(cmi);
                    if (mHideOnSelect) hide();
               }
            });
            row.addView(itemLayout);
        }
        table.addView(row);
    }
}

if i give background to entire row than result if give background to layout(each menu item) by this line itemLayout.setBackgroundResource(R.drawable.menubackground);

But i want look like this menu

Answer 1

A simple way to do what you want would be to make the menu TableLayout a bit bigger than normal(it should be as tall as the selected menu height will be) and add some top padding or margin to any other menu item which isn't the current selected one. So one item will always be taller than all other items which will have a bit of space at the top.

Edit: Please use the proper LayoutParams especially when working with TableLayout and TableRow:

row = new TableRow(mContext);
row.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.FILL_PARENT, TableLayout.LayoutParams.WRAP_CONTENT));
// ...
View itemLayout = mLayoutInflater.inflate(R.layout.custom_menu_item, row, false);

Try to use margin instead of padding:

//...
for (int j=0; j< divisor; j++) {
   if (i*divisor+j >= itemCount) break;
   final CustomMenuItem cmi = mMenuItems.get(i*divisor+j);
   View itemLayout = mLayoutInflater.inflate(R.layout.custom_menu_item, row, false);
   TableRow.Layoutparams lp = (TableRow.LayoutParams)itemLayout.getLayoutParams(); 
   if  (j==0) {
     lp.topMargin = 0; 
     itemLayout.setBackgroundResource(R.drawable.current_menu);
     itemLayout.setPadding(5, 5, 5, 5);
   } else {
     lp.topMargin = 12;
   }
   // ...
   itemLayout.setOnClickListener( new OnClickListener() {
       @Override
       public void onClick(View v) {
             mListener.MenuItemSelectedEvent(cmi);
             if (mHideOnSelect) hide();
             TableRow parent = (TableRow) v.getParent();
             final int count = parent.getChildCount();
             for (int i = 0; i < count; i++) {
                 final View child = parent.getChild(i);  
                 final TableRow.LayoutParams lp = (TableRow.LayoutParams) child.getLayoutParams();
                 if (child == v) {
                      lp.topMargin = 0;
                 } else {
                      lp.topMargin = 12;
                 }       
             } 
       }
    });

Regarding space between cells, I don't see that, not even in your images.