Search code examples
androidmenufooterhorizontal-scrolling

Horizontal scrolling footer menu in Android


I want to add a footer menu to my application screens. The footer menu will have the menu icons which are horizontal scroll-able one menu at a time when left or right arrow pressed. Based on the menu screen the footer menu should be scrolled to that menu icon for that menu screen.

Ex.:

    ----------------------------------------
     <   menu1     |  menu2  |   menu3   >
   -----------------------------------------

Say there are 6 menu icons and 3 are visible at a time. on press of right arrow, it should scroll one item at a time.

and if my screen is related to menu 4, the menu4 has to be positioned.

   ----------------------------------------
     <   menu4     |  menu5  |   menu6   >
   -----------------------------------------

And also each menu item should be clickable.

Please let me know, How I can achieve this programmatically.

Thanks and Regards


Solution

  • I Hope this Will Help you :

    Use below code which has Exact Solution ( Programmatically with Explanation ) to Your Answer !

    I have Tested it and its Giving output Exactly as You have mentioned in your Question !

    public class MainActivity extends Activity implements OnClickListener {
        Context context;
        int scrWidth, scrWidth80by3, scrWidth10;
        Button btnMenu[], btnNext, btnPre;
        LinearLayout llRoot, llHsMain, llMenuGroup1, llMenuGroup2;
        HorizontalScrollView hScrollView;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            DisplayMetrics dm = new DisplayMetrics();
            getWindowManager().getDefaultDisplay().getMetrics(dm);
            scrWidth = dm.widthPixels;
            scrWidth = (int) (0.8 * scrWidth); // Calculating 80 % Width of Screen for Horizontal Scroll View
            scrWidth80by3 = (int) (scrWidth / 3); // Calulation 1/3 of Width of  Horizontal Scroll View for 3  menu items
            scrWidth10 = (int) (0.1 * scrWidth);// Calulation 10% Width of Screen for Previous And Next Button
    
            context = MainActivity.this;
    
            btnMenu = new Button[7];
    
            llMenuGroup1 = new LinearLayout(context);
            llMenuGroup2 = new LinearLayout(context);
    
            llMenuGroup1.setLayoutParams(new LayoutParams(scrWidth,
                    LayoutParams.WRAP_CONTENT));
            llMenuGroup2.setLayoutParams(new LayoutParams(scrWidth,
                    LayoutParams.WRAP_CONTENT));
            for (int i = 1; i < btnMenu.length; i++) {
                // Starting from int i=1  to Set Menu Item Counting from 1 like Menu 1 instead of Menu 0
                btnMenu[i] = new Button(context);
                btnMenu[i].setId(i);
                btnMenu[i].setOnClickListener(this);
                btnMenu[i].setLayoutParams(new LayoutParams(scrWidth80by3,
                        LayoutParams.WRAP_CONTENT));
                btnMenu[i].setText("Menu" + i);
                if (i <= 3) {
                    llMenuGroup1.addView(btnMenu[i]);
                } else {
                    llMenuGroup2.addView(btnMenu[i]);
                }
            }
    
            btnNext = new Button(context);
            btnNext.setOnClickListener(this);
            btnNext.setId(0);
            btnPre = new Button(context);
            btnPre.setOnClickListener(this);
            btnPre.setId(-1);
    
            //  llRoot its Main Root Layout ! 
            llRoot = new LinearLayout(context);
            llRoot.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
                    LayoutParams.WRAP_CONTENT));
    
            btnNext.setLayoutParams(new LayoutParams(scrWidth10,
                    LayoutParams.WRAP_CONTENT));
            btnNext.setText(">");
            btnPre.setLayoutParams(new LayoutParams(scrWidth10,
                    LayoutParams.WRAP_CONTENT));
            btnPre.setText("<");
    
            //  hScrollView its HorizontalScrollView ! 
            hScrollView = new HorizontalScrollView(context);
            hScrollView.setLayoutParams(new LayoutParams(scrWidth,
                    LayoutParams.WRAP_CONTENT));
    
            // As HorizontalScrollView can Have one Direct Child ! so llHsMain is one Direct Child of hScrollView!
            llHsMain = new LinearLayout(context);
            llHsMain.setLayoutParams(new LayoutParams(scrWidth,
                    LayoutParams.WRAP_CONTENT));
    
            //Adding Menu Group1 And Menu Group 2 to  llHsMain as its Direct Child of hScrollView
            llHsMain.addView(llMenuGroup1);
            llHsMain.addView(llMenuGroup2);
    
            //Adding Direct Child llHsMain to hScrollView
            hScrollView.addView(llHsMain);
    
            //  Adding views to llRoot (its Main Root Layout) ! 
            llRoot.addView(btnPre);
            llRoot.addView(hScrollView);
            llRoot.addView(btnNext);
    
            //Displaying llRoot (its Main Root Layout) !
            setContentView(llRoot);  
        }
    
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            switch (v.getId()) {
            case -1: // Previous Button Clicked
                hScrollView.scrollTo(-scrWidth, 0); // see -ve sign to scroll back horizontally only scrWidth is 80% of Total Screen
                break;
            case 0: // Next Button Clicked
                hScrollView.scrollTo(scrWidth, 0); // scrolls next horizontally only scrWidth is 80% of Total Screen
                break;
    
            case 1: // Menu Button1 Clicked
                Toast.makeText(getApplicationContext(), "Menu 1 Clicked",1).show();
                break;
    
                // repeat up to 6
    
            case 6:
                Toast.makeText(getApplicationContext(), "Menu 6 Clicked",1).show();
                break;
            default:
                break;
            }
    
        }
    }