The above image is the login page for my Sable App, which I created using Sketchware. In this tutorial I will take you through the basics of how to create a screen/user interface.
Start by creating a new project. If you're not sure how to create a new project then click here learn how to create a new Sketchware Project
Positioning your items
Positioning your items
I'm sure by now you know that Sketchware uses a simple drag and drop method to position items on the main screen. You might however want to position your items in a specific way.
Secondly, you must note that each layout and widget has properties which you can change. If you click on any widget on your project screen, the properties menu will appear at the bottom of the screen. These will include *width, height, padding, gravity, colour, rotation* and so on. You can edit these to create your own custom look and feel. Since there are numerous properties I will not go into much detail about each of them but will encourage you to play around and see what difference each one makes when you adjust it.
The last thing I would like us to note when building layouts is that we want our app to look good on all screens. You should therefore choose carefully which items you will give a fixed width or length. This is where the *Weight* property comes in. Think of weight as a ratio. A weight of 1 means that the item should take up all the remaining space on the screen. Weight total or sum is the total sum that a specific layout can hold. For example a weight sum of 2 means I can place 2 items with a weight of one each. If I place one item it will only take up half the space.
In some cases you might need to use a *Scrollview.* This allows the user to scroll and might work best for lists, Tables and games.
In the image above, A shows items placed inside a linear horizontal and B shows items placed inside a Linear vertical. You can alsoposition *layouts* within *layouts*. For example if I want to create a screen with a heading and two buttons horizontally aligned below it- I can use a *Linear V*(vertical) and then place my *textview* inside it, to hold the heading. I can then place a *linear H*(horizontal) inside the first linear and under the textview. In the second linear, I can then drag two buttons and place them side by side.
Customizing the widgets and layouts
The last thing I would like us to note when building layouts is that we want our app to look good on all screens. You should therefore choose carefully which items you will give a fixed width or length. This is where the *Weight* property comes in. Think of weight as a ratio. A weight of 1 means that the item should take up all the remaining space on the screen. Weight total or sum is the total sum that a specific layout can hold. For example a weight sum of 2 means I can place 2 items with a weight of one each. If I place one item it will only take up half the space.
In some cases you might need to use a *Scrollview.* This allows the user to scroll and might work best for lists, Tables and games.
You can check out more tips on how to customize your widgets and create a beautiful user interface in Sketchware here
*Illustration*
I have attached two screens. One is how my screen is set up in Sketchware and the other is how it's set up, once its running on a tablet.
As always, feel free to ask any questions
*Illustration*
I have attached two screens. One is how my screen is set up in Sketchware and the other is how it's set up, once its running on a tablet.
As always, feel free to ask any questions
Comments