• View

How to add Bottom Navigation View to your Sketchware Android Projects

How to add BottomNagivationView in Sketchware Apps - Sketchware Tutorials

 Hello Sketchware Developers, today I am going teach how to add BottomNavigationView in Sketchware. Bottom Navigation is very essential when making a "top notch and easy to navigate" UI, most of the apps we use today all implemented BottomNavigationView cause  it means our UI looks more cool and also make the app easy to navigate to and fro, thereby, increasing your UX (user experience) and your users.

Sketchware Tutorials
Example of BottomNagivationView

 But I noticed that some Sketchware Developers are facing issues while implementing BottomNavigation so I took it as an agenda to make a tutorial about it. With this tutorial I have made, I am sure you are going to get every single thing cause I broke it down to beginners level, leaving no leaf unturned. So, without no further delays, let's head to main tutorial.

ADDING BOTTOM NAVIGATION VIEW IN SKETCHWARE 

  The first thing to do is to open a new project, name it whatever you want and  import any three icons into the project, name the icons "icon_1, icon_2 and icon_3" respectively. Now, in the main.xml, add a linearV and set it's padding to 0 and it's weight to 1, at this initial point, make it's width match_parent and then it's height to wrap_content. After that is done, now add a linearH, make the background color grey to avoid confusion and make the linearV height to be match_parent. If you did all of these well, you should have ended up with a result like this 
BottomNavigationView Android



Now in the linearV, add three(3) linearH and set their heights to match_parent, then set their orientation to vertical.

example - Sketchware Tutorials

NOTE: The linearH you add  depends on how many views you want to display through BottomNavigation, like if you want only "Home" and "Featured", you'll add only two linearH and also two moreblocks and remove one view from the "onCreate" code for BottomNavigation
   Name the three linearH  "view1, view2 and view3" respectively, then go forward to add any widgets you want, but for Tutorial purposes, just add a textview in each of them to signify their difference, an example is shown below. 

 Now we move to the logic center and we add this code with an ASD(add source directly) block in the "onCreate" event.

//Paste this in the "onCreate" event of the activity you want bottom navigation com.google.android.material.bottomnavigation.BottomNavigationView bnv = new com.google.android.material.bottomnavigation.BottomNavigationView(this); //bnv is your bottom navigation view ID bnv.setLayoutParams(new LinearLayout.LayoutParams(-1,-2)); bnv.getMenu().add(Menu.NONE, 1, Menu.NONE, "Home").setIcon(R.drawable.icon_3); bnv.getMenu().add(Menu.NONE, 2, Menu.NONE, "view2").setIcon(R.drawable.icon_2); bnv.getMenu().add(Menu.NONE, 3, Menu.NONE, "view3").setIcon(R.drawable.icon_1); bnv.setOnNavigationItemSelectedListener(new com.google.android.material.bottomnavigation.BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@androidx.annotation.NonNull MenuItem item) { switch (item.getItemId()){ case 1: _view11(); break; case 2: _view22(); break; case 3: _view33(); break; } return true; } }); linear2.addView(bnv); bnv.setSelectedItemId(1);


  All doing that successfully, go to "moreblocks" and add three moreblocks and name them; 'view11, view22 and view33' respectively, and add these blocks to each of them

Moreblocks for Android BottomNavigation

Now run your project and see the success you have achieved. But it is alright if get error or bug either while compiling or running the project in your device, don't panic, just comment below with your error code or contact us and you will get a response in less than 2 hours from one of our team member. Thanks for reading, I hope it helps, share your testimony with others in the comment box below and share this with your friends, have a nice day :D

Comments

Archive

Contact Form

Send