# \[TUTORIAL\] Custom Android widgets/dashboard using API Builder app, Tasker & KWGT

**URL:** <https://community.homey.app/t/tutorial-custom-android-widgets-dashboard-using-api-builder-app-tasker-kwgt/66614>\
**Category:** Tutorials\
**Tags:** app, tutorial, dashboard, homey, widgets\
**Created:** [July 28, 2022, 11:13am UTC](https://community.homey.app/t/tutorial-custom-android-widgets-dashboard-using-api-builder-app-tasker-kwgt/66614 "2022-07-28T11:13:38Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![norenz](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/norenz/32/16887_2.png) [@norenz](https://community.homey.app/u/norenz)\
**Post date:** [July 28, 2022, 11:13am UTC](https://community.homey.app/t/tutorial-custom-android-widgets-dashboard-using-api-builder-app-tasker-kwgt/66614/1 "2022-07-28T11:13:38Z")

</div>

**In this tutorial, I’ll show you how you can build custom widgets on your Android phone using Homey + API Builder app, Tasker and KWGT.**

Demo on what easily can be done

 ![295600519_754112162458987_8576047398537313888_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/e/4ea5105eea93c97fe58b287fe19761ad8bbe0715.jpeg)

**API Builder** : [API Builder App för Homey | Homey](https://homey.app/sv-se/app/se.adamnoren.apibuilder/API-Builder)  
**Tasker** : [https://play.google.com/store/apps/details?id=net.dinglisch.android.taskerm](https://play.google.com/store/apps/details?id=net.dinglisch.android.taskerm)  
**KWGT Kusom Widget Maker** : [https://play.google.com/store/apps/details?id=org.kustom.widget](https://play.google.com/store/apps/details?id=org.kustom.widget)

Start by installing the API Builder app and follow the instructions in the app settings on how to get your unique internet-exposed URL.

When you’re done and you’ve got a unique URL in the app settings, it’s time to create your first endpoint!

To do this, create a new flow.  
Add the endpoint trigger in the “When” section.  
Method can be either **GET** or **POST**. Data can optionally be sent in with the request as body and then used with the “Body data” tag.

 ![295593522_455492459514243_3696507542566402992_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/a/7/a72be883fbbdcc1f8e217a9ec184beb7881bd5f4.jpeg)

Add a response in the “Then” section. This is the flow card that returns the response to the requester with data. Here you can ender any valid JSON you want.

 ![295464314_3310277219241607_1393948109070964943_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/f/0/f07738e6a5d33aed576ef51389c2b24ecdce13bd.jpeg)

Save the flow.

 ![296044764_575376497388342_2816925345445413428_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/b/0/b0a48c30afc7104151bff25e8abab7b1f634ca08.jpeg)

Let’s test our endpoint!  
Copy your unique url and paste it in your browser. Add the endpoint to it and the api\_key parameter including your API key aswell.  
Example: [https://5c13b342210a4b650.itconnects.se/getTemp?api\_key=sub\_RfHilhtTYeb1LQBJYGYlaqw](https://5c13b342210a4b650.itconnects.se/getTemp?api_key=sub_RfHilhtTYeb1LQBJYGYlaqw)

The results should show your response like below:

 ![295806713_447661767265988_2977259861115265405_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/f/6/f6c24b8c0e445533b3fd6ccb299491e0f5cd65e8.jpeg)

Let’s head over to Tasker to get that data every time we unlock our phone and send it to our custom widget!

Open up Tasker and go to “Tasks” tab and press Add (+) att the bottom. Name the task whatever you want and save.

 ![296408723_370054055092704_5358055504055096398_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/3/1/3193c84df885ec9d21d0e4836847e8ea1e659c29.jpeg)

Now add a new action. Add Net → HTTP Request.  
Select Method: GET  
URL: Add your full url here including endpoint and api key (like above).  
Press Back button to save and exit.

 ![295995078_2059039134493938_3274234607516539715_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/2/e/2e5e8f6f0b512b3ea19d2eb171a8b9fe4a1c621e.jpeg)

Add another action Plugin → Kustom Widget → KWGT Send Variable  
Edit the Configuration like below and save and then press Back button to save and exit.

 ![295637106_570693981183813_2815379934847534391_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/5/4/540d76f4fad2ac808fe6ad6ba3a16bbda0006501.jpeg)

Press play button at the bottom left to test that it works.

 ![295855137_1098751850727360_4455847878287941897_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/3/8/381cd81ab0ed1b2fffbe008ab4db5dc514348fa1.jpeg)

It should show green dots at each action if successfull.

 ![295397420_1047705096116410_1147642245391976360_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/6/a/6a9cf55aca5ba15b0857fab8218c6a0bf368cf2e.jpeg)

Go back to “Profiles” tab. Create a new profile.  
Choose Event → Display → Display Unlocked  
Priority can stay as Normal  
Press back button to save.  
Select “Temp” in the dropdown that appears and then save by pressing the checkmark in the top right.

Now we’re done in Tasker, let’s create our widget!

Start by adding a Kustom Widget on your homescreen. Select 1x1 widget.

 ![295526937_1039725973581762_7051809112048837407_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/e/d/ed2ade368a31ceb08df28cee243d49dab9f2aa0d.jpeg)

Then press the widget to edit it. Press “Create” to start edit the widget.

We won’t go into details here since designing widgets can be as advanced as you’d like it to be. There are many guides on the internet on how to do this, so I’ll just show how you can add your data to text for now.

Press the + at the top right and add Text.

 ![295934255_580704063630086_7367076800581898977_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/7/a/7a5d881260cb46dd9b64ea65e53ab154348215a3.jpeg)

Then press the text layer to edit it

 ![295628215_1217662002358347_8381314405415556259_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/9/2/9240436c865b2cfd6664c0f35deb51d22d1abd71.jpeg)

Press Text

 ![295934256_462310218731875_4485390778441078286_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/5/c5ae20197d6d97393a9c9d454cc376d3d864dc7f.jpeg)

In the Formel field, type below to fetch the data from Tasker  
**$br(tasker, temp)$°C**  
If successful, the value will show up in realtime in “Results”-field. Press save.

 ![296250252_937976340928014_85609755086059030_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/7/7/77d07cdfd694371a43749a266fbdf276fc5abd50.jpeg)

Press the disc in the top right to save the widget.

 ![295456595_1117598008827366_359957391255767921_n](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/0/7/07cb6c60e794055ec3a36d5731dd9b70b6753903.jpeg)

Done! Head back to your homescreen to see the results.  
The value will be updated each time you unlock your phone!

Now go ahead and improve the design and add more endpoints/data to your homescreen.

---

<div class="post-metadata">

**Author:** ![Saftig](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/saftig/32/35530_2.png) [@Saftig](https://community.homey.app/u/Saftig)\
**Post date:** [August 17, 2022, 12:44pm UTC](https://community.homey.app/t/tutorial-custom-android-widgets-dashboard-using-api-builder-app-tasker-kwgt/66614/2 "2022-08-17T12:44:16Z")

</div>

How do I make a widget which I can click so it changes something. Let’s say I want to controll a light. When the light is off the widget background is gray, and when I click the widget (or the light is turned on by any other thing) the background of the widget turns yellow.

---

<div class="post-metadata">

**Author:** ![Dennis\_van\_Dinter](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/dennis_van_dinter/32/28180_2.png) [@Dennis\_van\_Dinter](https://community.homey.app/u/Dennis_van_Dinter)\
**Post date:** [October 7, 2022, 6:40am UTC](https://community.homey.app/t/tutorial-custom-android-widgets-dashboard-using-api-builder-app-tasker-kwgt/66614/3 "2022-10-07T06:40:27Z")

</div>

Great tutorial! I was looking for a way other than the standard webhook to let KWGT communicate with Homey.

Thanks!

---

<div class="post-metadata">

**Author:** ![OlleB](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/olleb/32/80095_2.png) [@OlleB](https://community.homey.app/u/OlleB)\
**Post date:** [November 9, 2023, 5:21pm UTC](https://community.homey.app/t/tutorial-custom-android-widgets-dashboard-using-api-builder-app-tasker-kwgt/66614/4 "2023-11-09T17:21:48Z")

</div>

These simple widgets shpuld be built in with the Homey app.

---

<div class="post-metadata">

**Author:** ![OlleB](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/olleb/32/80095_2.png) [@OlleB](https://community.homey.app/u/OlleB)\
**Post date:** [November 9, 2023, 6:40pm UTC](https://community.homey.app/t/tutorial-custom-android-widgets-dashboard-using-api-builder-app-tasker-kwgt/66614/5 "2023-11-09T18:40:41Z")

</div>

Can you save what you create in Tasker and KWGT and load that onto another phone (so that my wife can install this without going thru all steps)?  
@norenz

---

<div class="post-metadata">

**Author:** ![Ferdinand99](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ferdinand99/32/79353_2.png) [@Ferdinand99](https://community.homey.app/u/Ferdinand99)\
**Post date:** [November 30, 2023, 9:52am UTC](https://community.homey.app/t/tutorial-custom-android-widgets-dashboard-using-api-builder-app-tasker-kwgt/66614/6 "2023-11-30T09:52:18Z")

</div>

The API-Builder doesn’t work for me. I get an error code when pasting in the API Key after starting a trial
