How to use Color Gradient in Kodular and other App Inventor based platforms?

Hey guys, welcome back to a new Kodular tutorial. Today, I shall share a method by which you can add Color Gradient to components in Kodular, Thunkable, AppyBuilder etc. The use of modern color gradient styles has increased recently in App Design and Kodular users cannot lag behind. Use of gradient is more useful in button design, cards, action bar etc.

The method I am going to share is totally free and you don't have to buy any extension. So let's begin.

One method to use gradient in components is to use a background image with gradient color (which you can easily download from https://gradienthunt.com/). But if that is the solution, then there is no point to write this article. So, there is another method in our stock.

To be able to use gradient in Kodular or other app creators, you have to download the extension called KIO4 Gradient developed by kio4.com. We'll talk more about KIO4 Gradient and its use, but before that, please download it from below:

Download KIO4 Gradient
Mirror

KIO4 Gradient is a very simple extension to use. It is a non-visible component and is used with the layout components: Vertical Arrangement and Horizontal Arrangement.

How to use KIO4 Gradient

After inserting KIO Gradient component in your project you'll see its design view and blocks.

In design view you'll have:

Corner Radius: Using this property one can add rounded corners to vertical and horizontal arrangements. At least the background will have rounded corners.

Shape: For this property you can use intergers from 0 to 3 for Line, Oval, Rectangle and Ring shapes respectively. But in our testing we found that only the values 0 and 1 worked for Rectangle and Oval shapes respectively.

0 => Rectangle
1 => Oval

Type: Using this property one can select the style of gradient i.e., Linear Gradient, Radial Gradient and Sweep Gradient for the values 0, 1 and 2 respectively. But we found only Linear and Sweep Gradient to work in our testing.

0 => Linear Gradient
2 => Sweep Gradient

And in its main block (i.e. call KIO4_Gradient.Gradient) you'll have:

Layout: In this, you have to connect the block for your Vertical or Horizontal arrangement where you want to show the gradient.

List Of Colors: Here you have to create a list using the list block and there you have to add different colors as list items to show the gradient.

Orientation: You can have eight orientations for you color gradient. It can have an integer block with value from 1 to 8 for orientations defined in developer.android.com:

1 => BL_TR (Bottom Left to Top Right)
2 => BOTTOM_TOP (Bottom to Top)
3 => BR_TL (Bottm Right to Top Left)
4 => LEFT_RIGHT (Left to Right)
5 => RIGHT_LEFT (Right to Left)
6 => TL_BR (Top Left to Bottom Right)
7 => TOP_BOTTOM (Top to Bottom)
8 => TR_BL (Top Right to Bottom Left)
And with value 0 you'll have TOP_BOTTOM.

So, by understanding the use of each attribute, property and block you can create amazing gradient effects for your projects.

Yes, for Color Gradient ides you can use the website: https://mycolor.space/ or you can use the android app: Material Color.

Video Tutorial

Here is a video tutorials on how to use this extension to create awesome UI design:

How to Use Custom Hex Colors with Color Gradient Extension

Well, it's not easy to use any color you like with this extension directly. You'll find that you'll be able to use only the predefined colors in the blocks section.

Yes, there is an option to use custom RGB (Red, Green and Blue) or RGBA (RGB with Alpha or Transparency) with "Make Color" block. But, that also doesn't seem to work by default.

So, is it not possible to use custom colors with KIO4 Gradient Extension? Should we have to contend with the limited colors available?

The answer is No. Yes, there are some tricks using which we can overcome this limitation of this extension.

Hence, we have come up with three such tricks or methods. Let's discuss them one by one.

1. The KIO4 Method

This method is shared officially by kio4.com the developer of this extension. In the official site all the calculations and extra details is given. But, here I will try to explain it in a brief and easy to understand method.

So, we know that the default color blocks work with extension. So let's try to find what value do those color blocks carry by using some random colors. [To do this run you app in the companion and on the color block: Right Click >> Do It]

We find that these color blocks carry some negative value.

Now let's check that value for "Make Color" block for generating the same colors:

Here we find some positive values for the same colors. Maybe this the the reason for "make color" block not working with the gradient extension.

So, we find that the KIO4 Gradient extension works with negative value of colors.

As, in both ways colors are same then there must be some relation between these two values.

After doing some sum we find the relation:

Used Red Color: 4294967296 - 65536 = 4294901760  or  4294901760 - 4294967296 = -65536
Used Green Color: 4294967296 - 13382656 = 4281584640  or  4281584640 - 4294967296 = -13382656
Used Blue Color: 4294967296 - 13421569 = 4281545727  or  4281545727 - 4294967296 = -13421569

So we got a constant number:

4294967296

Subtracting this number from the make color RGB value will give the value for the color block. Hence we try this:

So, by using the subtract block we can make the KIO4 Gradient extension work with RGB colors. You just have to remember this constant value: 4294967296

2. Import Colors from Design View

Well, as you know that Design also offers the option to add colors to to the components. And the best thing is that it supports color hex codes. So let's try to import these custom colors to the Blocks section. How to do that?

Keep reading to find out!

Here we'll use a visible component to import colors to the Blocks view. Here we'll use an Horizontal Arrangement, but you can use any component that supports color customization.

As you know, we can change the background color of Horizontal Arrangement from the Design view. So, we add a Horizontal Arrangement to the project and change its Background Color to the color we want to use in the gradient (here we can also use hex codes).

As we have to use its color to a Gradient effect we need one more color. So, add one more Horizontal Arrangement in the similar way. Change its color to your liking but different from the previous one.
Also don't forget to disable visibility if these components as they may clutter your app UI.

Next go to the blocks section, and use the block "Horizontal_Arrangement(Any No.).Background Color" in place of "Color Block" with the KIO4 Gradient Block. Similar to the image below.

You can use as many colors as you like by using more components in the design view. Check out the video tutorial for better understanding.

3. Using PaletteColor Extension

In this method we shall use an extension called PaletteColor developed by Andres Cotes. First download it from here. Import and add it to your project.

Now we get started with the next steps.

After adding it to your project you will see in the design view that it has a full set of Palettes for adding different colors using Hex Codes.

You can add your predefined hex codes to the provided attributes like ButtonColor, CheckColor and so on. Here we have used the Color100HEX and Color200HEX to use in the Gradient Design.

Then in the Block section we use the same block from PaletteColor1 component and use it as shown below.

In this method also we can use as many colors as we like but this time without cluttering the UI. Check out the video tutorial above to see it in action.

Hence, these were the three methods or tricks to use Custom Hex Colors with KIO4 Gradient Extension for Kodular, Thunkable, AppyBuilder, App inventor etc.

Hope, you liked the article. Do let me know your thoughts in the comment section.