Skip to main content

Build a beautiful user interface in Sketchware

This tutorial will give you some tips to help you build a nice, professional looking interface in Sketchware. If you are still a new user, you might want to read this article on how to start building your interface in Sketchware.

We will cover:

1. Corner radii with gradient
2. Rounded corners
3. Adding shadow to a view
4. Add gradient and rounded corners

CORNER RADII WITH GRADIENT IN SKETCHWARE


Start by adding a linear to your layout. I have given my linear a width of 150 and a height of 150. 



I have added an add source directly block on my onCreate and I have typed in the following code:

android.graphics.drawable.GradientDrawable gd = new android.graphics.drawable.GradientDrawable(android.graphics.drawable.GradientDrawable.Orientation.RIGHT_LEFT,new int[]{ 0xFF6B32E1,//Top Color 0xFFA130E2 //Bottom Color }); gd.setCornerRadii(new float[] {0, 0, 0, 0, 0, 0, 390, 390 }); linear4.setBackgroundDrawable(gd);

ROUNDED CORNERS

If you want to add rounded corners to a widget like I have done in the image above, place the following code in your onCreate



android.graphics.drawable.GradientDrawable s = new android.graphics.drawable.GradientDrawable(); s.setColor(Color.parseColor("#FFCFD8DC")); s.setCornerRadius(25); linear4.setBackground(s);

You can change the colour code and the corner radius to make it even more round.


ADDING A SHADOW TO A VIEW



This feature elevates a view making it look 3 dimensional by creating a shadow around it. To add this, simply add the following code in an add source directly block:

linear1.setElevation(5f);

Linear 1 is the name or ID of the linear that we want to apply this to. This can be applied to a textview or other widgets as well. You can also change the number in brackets to increase or decrease the shadow.


ADD GRADIENT & ROUNDED CORNERS



The above image is a linear with a gradient made by two colours. This can be easily created using the code below. Simply place an add source directly block onCreate then add the following code.

android.graphics.drawable.GradientDrawable gd = new android.graphics.drawable.GradientDrawable(android.graphics.drawable.GradientDrawable.Orientation.RIGHT_LEFT, new int[]{ 0xFF009688, //Top Color 0xFF45C6A7 //Bottom Color }); gd.setCornerRadius(90f); linear4.setBackgroundDrawable(gd);

Please note that in the example above, you can change the colour by changing the color codes 0xFF009688 to your own color. To get the color codes you can click on a widget in Sketchware and then go to background color on the properties menu.


Labels:

Comments

creativesuzi33 said…
Can I use a blue component "Toast" to add the code up for a colored corner?
20 October 2020 at 11:39
Post a Comment

Popular posts from this blog

How to easily create background notifications in Sketchware(original)

How to easily create background notifications in Sketchware(original) One of the keys to building a successful app is to find mechanisms that will keep your users engaged. You can do this by using background notifications. This tutorial will show you how to do that in Sketchware. We will cover: 1. How to create notifications in Sketchware 2. How to show these notifications even when the app is closed.
7 comments
Read more

Happy Birthday Memes: Laugh Your Way to Someone's Heart

Happy Birthday Memes: Laugh Your Way to Someone's Heart Introduction Birthdays are a special occasion to celebrate another year of life, and what better way to do it than with a good laugh? That's where happy birthday memes come in! These hilarious images are the perfect way to put a smile on someone's face and let them know you're thinking of them on their special day. Why Memes Are the Best Birthday Greetings * Relatable:  Memes often tap into universal experiences and emotions, making them instantly relatable to a wide audience. * Quick and Easy:  Sharing a meme is a hassle-free way to send birthday wishes, perfect for those last-minute greetings. * Memorable:  A funny meme is more likely to stick in someone's mind, making your birthday wishes unforgettable. * Versatile:  There's a meme for every type of person and occasion, from silly and goofy to heartfelt and sentimental. How to Use Happy Birthday Memes * Share on Social Media:  Spread ...
Post a Comment
Read more

Cybersecurity Essentials: How To Stay Safe On The Internet

  Hi there, my name's Likhwa and welcome to Building Africa's Next Tech Unicorn. on this platform I give a behind the scenes look at what it takes to build a startup within the African context. In today's video, I'll be doing something different- I'll be talking about how you can stay safe online. This isn't meant to scare you or get you all paranoid, but to help you be more vigilant in protecting yourself and your loved ones from cyber threats.  Most people underestimate the dangers of the internet, but the more I am exposed to it, the more I wish I didn't need it. At times I wish I could just disconnect, get rid of all my devices and not have to worry about the constant threats that come with being online. I believe some of us are fortunate by default- especially those who live in countries like my Zimbabwe- because we hardly use credit cards to transact online and even when we do, its not like we have a lot of money- otherwise we would be a hacker's g...
Post a Comment
Read more