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.
Comments