Skip to main content

How to add Professional Sidebar in Kodular Creator?

How to add Professional Sidebar in Kodular Creator?

How to add Professional Sidebar in Kodular Creator?

Welcome to Learn Web Series of Kodular App Development Series. As you have seen in title today we are going are going to learn how to add Sidebar in Kodular Project. So, without wasting any more time Firstly we discuss about some FAQ's about Sidebar in Android.

FAQ's about Sidebar

1. What is Sidebar?

You may have seen in many apps that a layout appear sliding containing many option in it, this layout is called sidebar. In Kodular we get a dedicated component for this sidebar. So, by this we can easily add sidebar in our app. In today's tutorial we are going to learn How to design and make this sidebar working in our Kodular Project? I think now you are excited about this component and How to use it. 

2. Benefits of adding Sidebar:

There are many benefits of using this component in your project. This component makes your app more user friendly and attractive. There are also many other benefits such as it makes navigation throughout our application easy for our users. This component also improve UI and UX for our application. We can also give many options which can be easily accessed from here to our user and doesn't confuse our users in our application.

Now we should move to our Tutorial....

1. How to implement Sidebar component in our app?

Step 1: Check for Layout option and click on Navigation option.

Step 2: Now you will find there Side Menu Layout. So, simply drag and drop this component to your app.
OR
Search For Side menu layout in components and find the Side menu Layout component there. Then simply drag and drop this Component to your project.

So, until here we have completed the implementation of sidebar in our app.

1. Properties of Side Menu Layout:

1. Background Color: 
This option sets the Background image of the side menu layout.

2. Circle Image Header:
This Crops and shows the image of Header of Sidebar as Circle.

3. Disabled Color:
This sets the color of Disabled option in Sidebar.

4. Enabled Color:
This sets the color of the Enabled option in Sidebar.

5. Header background Picture:
This is used to select the Background picture of header of Sidebar.

6. Header Picture:
This shows the provided image in the Header.

7. Header Subtitle:
This adds a subtitle that is to be shown in the header.

8. Header Title:
This is used to add a title in the header of Sidebar.

9. Selected option:
This sets the color of option that is selected.

Blocks of Side Menu Layout:

1.Add Item to Sidebar:
Kodular block no. 1
This blocks add option to a sidebar. You have to add this block multiple times to add multiple items. 
Options:
1. Title:
This sets title of the Item to be added.
2. Image:
This adds the image as icon for option before Title.
3.  Enabled:
This sets the option as clickable or not.
4. Checked
This sets the item being added as selected.
5. Group:
This adds the item to a given number.

2. Remove Item:
Kodular Side Menu layout block no. 2
This remove item with the Provided title in Side Menu layout.

3. When item selected:
Kodular Side Menu layout block no. 2
This handles the action when any option is selected. You can handle this situation with if then else block such as,
Kodular Side Menu layout block no. 4

So this was all about Sidebar in Kodular. Using this you can easily add professional sidebar in Kodular. This was for today we will be back with a new tutorial again. Till then....

Happy Koding......


Labels:

Comments

Post a Comment

Popular posts from this blog

Kodular Basics- Getting started with Kodular

What Is Kodular? Kodular is a online software which allows us to make android apps without any programming knowledge. Kodular's enable us to make fantastic android apps using their blocks-type editor.We can make our apps stand out with the material design UI. Using Kodular we can make android apps just by dragging and dropping components provided in Kodular Creator.We also need not to write any code to make our app working. We just have to specify blocks in kodular creator and we are out of the tension to write Codes. Getting Started With Kodular :   For making apps you just need to go to Kodular's Creator and sign up there with your email and activate your account.You can create Kodular account and make apps for free. There aren't any charges to use Kodular Creator. So just go Kodular.io and sign up there and start happy coding and app making.  Kodular Dashboard: After you have signed up for Kodular creator,select the option "Create Apps" and you will be redirect...
Post a Comment
Read

How to use dynamic component in Kodular Creator ?

How to use dynamic components in Kodular Creator? Welcome back my dear friends, today we are back again with a complete new tutorial. Today we are going to learn How to use Dynamic components in Kodular Creator? As of all our tutorials I assure you you will find this tutorial very useful while developing any of you application which the no. of components are not fixed. So, we use dynamic components to add as much as number of components as we want. So, here we start our tutorial with some of FAQ's that will help you to learn what is concept of dynamic components if you didn't understood "What does dynamic components mean?"  FAQ's about Dynamic components 1. What are dynamic components? Dynamic components are the components which allows us to show as much as number of components in our application as we want. So, that we need not to update app to add any component in our application. This is useful when we are developing any application like Shopping application in...
Post a Comment
Read

How to use Lottie Animations in Kodular Creator?

  Welcome back my friends, today we are back with our new tutorial. In today's tutorial we will be learning How to use Lottie Animations in Kodular? Before we start our tutorial we should discuss about the FAQ's related to Lottie in Kodular. So, here are the main FAQ's about Lottie animations Component in Kodular creator. FAQ's about Kodular Creator 1. What are Lottie animation Component? Lottie animation is a component provided in Kodular Creator. Simply we can say that Lottie animations is a components that allows us to show any animation from Lottie to use in our app. We can show any of animation listed on the website of Lottie files. We can search for thousands of animations there and then we get a json file which we can download and use in our app by uploading it in assets of our app. In this tutorial we are going to learn everything about how to use Lottie animations kodular creator. Now, I think you might have got what we are going to learn about. I assure that y...
Post a Comment
Read