How to Make Whatsapp Menu In Sketchware Pro

Hello everyone, welcome to my blog. this is my first article in Tutorial Series building chatting app like whatsapp on youtube channel. 

Getting Started

In this case, I used sketchware pro. If you don't have it download the app here.Now open our app then Create New Project, I'm going to make project name as Tab Layout.

Next, click save button. It will take you on main.xml of sketchware. Let's prepare our widget that we need to build whatsapp menu. Add widget Tab Layout and Viewpager like image below.

After that, go to event menu and click onCreate Event.  Inside of onCreate Event add Tab Layout Block like shown image below.

If you don't have such as my block, download it first in the end of article or my Youtube Channel.  It would be easy to follow step by step. Ok back again to main.xml, click menu on the right side of the corner and select View. 

It will take to View Manager, in here we will make pages like chat, status, and call. I'm going to make page1 as chat, page2 as status, and page3 as call. Follow my instructions below to make pages from Fragment Activity

Making Fragment

Firstly, I'm going to make the first page like images below. Uncheck default view of activity such as Toolbar and Statusbar. It should be hidden.

Make sure you have name of the page(1), you select type of Fragment Activity(3).  Then uncheck both of them (2). Next step, repeat again make it 3 three pages as shown images below.

Let's go back to main.xml and select the Component Menu. We will create Event in this component. Dialog PopUp list of component will appear and select Fragment component. 

Click for selecting component. If you succeed to follow the step, it should looks like an image below.

Ok next, before we are going to setup logic, create content inside activity of fragment as you want. In this article I made title of the pages. Looks like an images below.

Ya, we have just finished setup layout and widget the last step is Setup Logic. Let's go.

Logic Setup

Remind again to setup logic you should have a Tab Layout Block.  Now go to component menu, select Fragment Component. Add all of event component onTabAdded & Fragment Added.

Let's add block onTabAdded & onTab like images below. If variable position equal to 0 it will return page 1. Same things position 1 will return page 2, then position equal to 2  it will return page 3.

Nice, We have finished setup logic. One step again activate AppCompat & Design in sketchware menu of the the right side corner. If we did'nt do this. Our app would be error while building.

Move back to View Menu then click run to build our app. Let's see the magic.

Thanks for visit my blog. See you on the next tutorial. For better understanding here my youtube video.