Sliding Drawer with simple Checkboxes

In this post I have created a simple sliding drawer and have placed three checkboxes in it. A sliding drawer is generally used to hide contents and only show it when the user wishes to see them.  Checkboxes are used when you want to select more than one checkbox at a time.

First create a new project and open main.xml file under resà layout. Add a textbox to the top of the layout. Add sliding drawer into the layout, you can see it comes with a default button called Handle, rename this to ‘Click to Open the slider’. Then add 3 check boxes into the sliding drawer. Finally the layout will look like the image shown below.

Now open the java file under src folder. You can see there is a default code already available to you. Now create a sliding drawer component and bind it to the resource as defined by you in the xml file.

SlidingDrawer sh=(SlidingDrawer) findViewById(R.id.slidingDrawer1);

Similarly bind the button and all the check boxes in the layout as shown below.

final CheckBox Messi, Ronaldo,Rooney;

Messi=(CheckBox) findViewById(R.id.checkBox1);

Rooney=(CheckBox) findViewById(R.id.checkBox2);

Ronaldo=(CheckBox) findViewById(R.id.checkBox3);

final Button insideslider=(Button) findViewById(R.id.button1);

final TextView tv=(TextView) findViewById(R.id.textView1);       

Now we need to define action for the sliding drawer when it opens and closes. So when the sliding drawer is opened it has all the checkboxes and the button, so we need to define action when the user ticks the checkboxes and clicks on the ‘Done’ button.  To check if the checkbox is selected or not use the ‘isChecked()’ function. Also we can modify the text of the sliding drawer button and change it ‘Click to Close the Slider’. The code shown below shows the same.

sh.setOnDrawerOpenListener(new OnDrawerOpenListener() {

               

               

                                @Override

                                public void onDrawerOpened() {

                                                button.setText("Click To Close Silder");

                                                insideslider.setOnClickListener(new View.OnClickListener() {

                                                                @Override

                                                                public void onClick(View v) {

                                                                                String Value="You Selected";

                                                                                if(Messi.isChecked()){

                                                                                                 Value+=" Messi ";

                                                                                }

                                                                                if(Rooney.isChecked()){

                                                                                                Value+=" Rooney ";

                                                                                }

                                                                                if(Ronaldo.isChecked()){

                                                                                                Value+=" Ronaldo ";

                                                                                }

                                                                                tv.setText(Value);                          

                                                                }

                                                });

                                }

                                });

Now that we have defined the function when the sliding drawer is opened, we can define the function when the sliding drawer is closed. Here I have changed the text on the sliding drawer button to ‘Click to Open the Sliding Drawer’ button. The code below shows the same.

sh.setOnDrawerCloseListener(new OnDrawerCloseListener() {

                @Override

                public void onDrawerClosed() {

                                button.setText("Click To Open Silder");

                }

  });

Now run the application and the output will be as shown in the screenshot shown below.

Click on the button and you can see the checkboxes and also observe that the text of the button has changed, select on any one of them or all of them and click on ‘Done’ button.  You can see all the checkboxes which you selected appear on in the textbox.

Hope you were able to create the same.