# Show your UI skills

**URL:** <https://community.thunkable.com/t/show-your-ui-skills/1014803>\
**Category:** Off Topic\
**Tags:** design\
**Created:** [December 2, 2020, 1:30pm UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803 "2020-12-02T13:30:39Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![aarav-work](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/aarav-work/32/95738_2.png) [@aarav-work](https://community.thunkable.com/u/aarav-work)\
**Post date:** [February 11, 2021, 6:29am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/26 "2021-02-11T06:29:33Z")

</div>

👍

---

<div class="post-metadata">

**Author:** ![luv.ak.tech](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/luv.ak.tech/32/104896_2.png) [@luv.ak.tech](https://community.thunkable.com/u/luv.ak.tech)\
**Post date:** [February 11, 2021, 6:52am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/27 "2021-02-11T06:52:37Z")

</div>

👍

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [February 11, 2021, 8:06am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/28 "2021-02-11T08:06:24Z")

</div>

@ [eko.devs.aka.apploro](https://community.thunkable.com/u/eko.devs.aka.apploro) I merged your newest topic about UI examples. We can keep any new UI projects in this topic since you’ve already created it and shared here.

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [February 12, 2021, 7:51am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/29 "2021-02-12T07:51:35Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/c/7c7b675036e7bd6bc2f4994b38d9188509bad447.png)  
hows it now?

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [February 12, 2021, 3:25pm UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/32 "2021-02-12T15:25:31Z")

</div>

well i dont see anyone else uploading their ui’s

# music player ui

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/1/a1ed15456c61f1a2dc9fb3a88d8694578bc6ea6b.png)

- DARK UI

proj link:  
[https://x.thunkable.com/copy/0926f76dbb050032a39383cda3e5082e](https://x.thunkable.com/copy/0926f76dbb050032a39383cda3e5082e)

_Poll ([view on site](https://community.thunkable.com/t/show-your-ui-skills/1014803/32))_

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [February 12, 2021, 3:34pm UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/33 "2021-02-12T15:34:06Z")

</div>

> [@eko.devs.apploroceo](#):
>
> ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/1/a1ed15456c61f1a2dc9fb3a88d8694578bc6ea6b.png)
> 
> - DARK UI

This looks nice! we had a question earlier in the week about the blocks for an audio progress bar link this. Do you think that is something you would want to add to this?

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [February 12, 2021, 3:36pm UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/34 "2021-02-12T15:36:35Z")

</div>

well  
@domhnallohanlon ill check can pls give link  
moreover for music player i will do a recording  
i made it in 10 mins originally

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [February 12, 2021, 3:36pm UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/35 "2021-02-12T15:36:48Z")

</div>

CALCULATOR UI  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/e/de7da4e0afff2db211e5a300610cdbf59bd4d665.png)  
DARK UI

---

<div class="post-metadata">

**Author:** ![chilledtimes.edition](https://avatars.discourse-cdn.com/v4/letter/c/edb3f5/32.png) [@chilledtimes.edition](https://community.thunkable.com/u/chilledtimes.edition)\
**Post date:** [February 13, 2021, 7:40am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/36 "2021-02-13T07:40:41Z")

</div>

hi @eko.devs.apploroceo ,  
pls share your knowledge on how to make a **moving bar** as the music progresses, and how your varying the time taken for completing it according to the music

---

<div class="post-metadata">

**Author:** ![luv.ak.tech](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/luv.ak.tech/32/104896_2.png) [@luv.ak.tech](https://community.thunkable.com/u/luv.ak.tech)\
**Post date:** [February 13, 2021, 9:55am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/37 "2021-02-13T09:55:50Z")

</div>

i think you should know that it is just UI he has not code anything

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [February 13, 2021, 10:39am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/38 "2021-02-13T10:39:04Z")

</div>

still its a challenge i give it a try  
@chilledtimes.edition

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [February 22, 2021, 11:10am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/39 "2021-02-22T11:10:30Z")

</div>

hi all i made a new dialog\_ui

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/5/45e4174369d6c466eb7ce48e0901d8ed87b9e586.png)  
made on leagacy ui

pls rate and like my work

---

<div class="post-metadata">

**Author:** ![juschan0605](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/juschan0605/32/98033_2.png) [@juschan0605](https://community.thunkable.com/u/juschan0605)\
**Post date:** [February 23, 2021, 4:37am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/40 "2021-02-23T04:37:26Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/d/4da3dd288e51a23d76e05448dfa7f9ebb3de1498.jpeg)  
Task Reminder dark ui  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/a/6a1a81835baba3b4a57c8da332d961c8307706ab.jpeg)  
Settings list dark ui

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [February 23, 2021, 4:38am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/41 "2021-02-23T04:38:56Z")

</div>

That’s some beautiful UI @juschan0605! How did you divide your Drawer Navigator into different section and customize it by adding switches and images? It would be really helpful if you could tell me.

---

<div class="post-metadata">

**Author:** ![juschan0605](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/juschan0605/32/98033_2.png) [@juschan0605](https://community.thunkable.com/u/juschan0605)\
**Post date:** [February 23, 2021, 4:40am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/42 "2021-02-23T04:40:20Z")

</div>

I just use a column for the drawer navigator and set the visibility in blocks. The main screen is another column which has a top navigator and some info. So basically u just drag items into that column to make it a custom drawer navigator

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [February 23, 2021, 7:58am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/43 "2021-02-23T07:58:18Z")

</div>

btw can i know how u made those switches?

---

<div class="post-metadata">

**Author:** ![juschan0605](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/juschan0605/32/98033_2.png) [@juschan0605](https://community.thunkable.com/u/juschan0605)\
**Post date:** [February 23, 2021, 9:43am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/44 "2021-02-23T09:43:14Z")

</div>

Theres a thunkable component called switch, so u basically just drag it into the ui and it’s done, no coding is needed.  
For more info:  
[https://docs.thunkable.com/switch](https://docs.thunkable.com/switch)

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [February 23, 2021, 9:56am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/45 "2021-02-23T09:56:42Z")

</div>

oh ok u test in ios  
i meant for android

---

<div class="post-metadata">

**Author:** ![juschan0605](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/juschan0605/32/98033_2.png) [@juschan0605](https://community.thunkable.com/u/juschan0605)\
**Post date:** [February 23, 2021, 10:19am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/46 "2021-02-23T10:19:03Z")

</div>

It’s the same I think, switch also works in android

---

<div class="post-metadata">

**Author:** ![luv.ak.tech](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/luv.ak.tech/32/104896_2.png) [@luv.ak.tech](https://community.thunkable.com/u/luv.ak.tech)\
**Post date:** [February 23, 2021, 10:23am UTC](https://community.thunkable.com/t/show-your-ui-skills/1014803/47 "2021-02-23T10:23:28Z")

</div>

> [@juschan0605](#):
>
> I think, switch also works in android

no need of thinking it definitely works in android unless there is a bug

[Previous page](https://community.thunkable.com/t/show-your-ui-skills/1014803.md?page=1)

[Next page](https://community.thunkable.com/t/show-your-ui-skills/1014803.md?page=3)
