How to add Navigation drawer using CustomView in Sketchware


  • Step 1:-Navigation drawer in Sketchware at present can be added only to projects which use Firebase. Thus in your Sketchware project, in Firebase settings, add App ID, Project ID and API key.



  • Step 2:- Add a CustomView custom_view.xml in your app, and to it add images or contents to be shown in Navigation drawer.





In your firebase app in sketchware, add a String list str_list.

In onCreate event, add items to this list.



After this insert an add source directly block, and put following code in it.

final android.support.v4.widget.DrawerLayout drawer = new android.support.v4.widget.DrawerLayout(this);
final View main = (View) getLayoutInflater().inflate(R.layout.main, null);
final View custom_v = (View) getLayoutInflater().inflate(R.layout.custom_view, null);

final LinearLayout linlay = new LinearLayout (this);
android.support.v4.widget.DrawerLayout.LayoutParams lp = new android.support.v4.widget.DrawerLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT , LinearLayout.LayoutParams.MATCH_PARENT);
lp.gravity=Gravity.START;
linlay.setLayoutParams(lp);
linlay.setOrientation(LinearLayout.VERTICAL);
linlay.setBackgroundColor(Color.WHITE);

final ListView navList = new ListView(this);
navList.setAdapter(new ArrayAdapter(getBaseContext(), android.R.layout.simple_list_item_1, str_list));
LinearLayout.LayoutParams lp1 = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT , LinearLayout.LayoutParams.MATCH_PARENT);
navList.setLayoutParams(lp1);

linlay.addView(navList);
linlay.addView(custom_v);
drawer.addView(main, new FrameLayout.LayoutParams(android.view.ViewGroup.LayoutParams.MATCH_PARENT, android.view.ViewGroup.LayoutParams.MATCH_PARENT));
drawer.addView(linlay);
setContentView(drawer);
navList.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);


After this add another add source directly block and put following code in it.

navList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView _parent, View _view, final int _position, long _id) {
drawer.closeDrawer(Gravity.START);
switch (_position){
case 0:
showMessage("position 0 clicked");
break;
case 1:
showMessage("position 1 clicked");
break;
case 2:
showMessage("position 2 clicked");
break;
case 3:
showMessage("position 3 clicked");
break;
case 4:
showMessage("position 4 clicked");
break;
case 5:
showMessage("position 5 clicked");
break;
}
}});
navList.bringToFront();
navList.requestFocus();
initialize();


Note that this code will Toast a message when a position from the list is clicked. To do something else replace showMessage("position 5 clicked"); 
with the code to be executed. It can also be replaced with blocks, by dividing the code into several add source directly blocks and using blocks in between.

Now save and run the project. You will be able to bring the drawer in view by sliding it from left edge.

That's It. If you liked it please visit my site again...

Previous
Next Post »