# Adobe XD to Glide

**URL:** <https://community.glideapps.com/t/adobe-xd-to-glide/28361>\
**Category:** Ask for Help\
**Created:** [June 25, 2021, 10:20pm UTC](https://community.glideapps.com/t/adobe-xd-to-glide/28361 "2021-06-25T22:20:19Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [June 25, 2021, 10:20pm UTC](https://community.glideapps.com/t/adobe-xd-to-glide/28361/1 "2021-06-25T22:20:19Z")

</div>

Is it possible to make a floating bar like this? Of not being able to be. Can the color of the bar of my app be changed?

 ![glide](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/f/afb3e633514358d3cad94c5f85809d933a65da7a.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 25, 2021, 11:42pm UTC](https://community.glideapps.com/t/adobe-xd-to-glide/28361/2 "2021-06-25T23:42:04Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/a/8ad5759135944b868cda1a59efe2d5a65ecc85c8.png)

I think this is the closest I can get.

```auto
<pre><span><style>

[id="tabBar"] .tbs-inner {
width: 90%;
background-color: cyan;
border-radius: 15px;
}

```

The filling for each icon and text is more tricky since there’s active and inactive states so I don’t include it here.

Also, you would have to include the code in every details screen.

---

<div class="post-metadata">

**Author:** ![Mauricio\_Paz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mauricio_paz/32/17751_2.png) [@Mauricio\_Paz](https://community.glideapps.com/u/Mauricio_Paz)\
**Post date:** [June 25, 2021, 11:44pm UTC](https://community.glideapps.com/t/adobe-xd-to-glide/28361/3 "2021-06-25T23:44:50Z")

</div>

![Screenshot_2021-06-25-18-43-37-338_com.android.chrome](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/9/b956229b0b37edc256bba4a8810a57a0f453c50b.jpeg)  
I have some css for this, as soon as it is on my computer I write it here.

---

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [June 25, 2021, 11:44pm UTC](https://community.glideapps.com/t/adobe-xd-to-glide/28361/4 "2021-06-25T23:44:58Z")

</div>

That really looks great. It is not exactly the same but it looks excellent. Thanks friend!

---

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [June 25, 2021, 11:45pm UTC](https://community.glideapps.com/t/adobe-xd-to-glide/28361/5 "2021-06-25T23:45:31Z")

</div>

Ok, this seriously looks a lot better. Do you share the method?

---

<div class="post-metadata">

**Author:** ![Mauricio\_Paz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mauricio_paz/32/17751_2.png) [@Mauricio\_Paz](https://community.glideapps.com/u/Mauricio_Paz)\
**Post date:** [June 26, 2021, 12:00am UTC](https://community.glideapps.com/t/adobe-xd-to-glide/28361/6 "2021-06-26T00:00:26Z")

</div>

```auto
<pre><span><style>

[id="tabBar"]{
    margin-right: 10px;
    margin-left: 10px;
    height: 75px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: [COLOR];
    border-radius: 30px;
}

```

 ![Captura de Pantalla 2021-06-25 a la(s) 18.56.12](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/8/183951e93fd72af695efa2c96238ee38985325b0.jpeg)

---

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [June 26, 2021, 12:55am UTC](https://community.glideapps.com/t/adobe-xd-to-glide/28361/7 "2021-06-26T00:55:49Z")

</div>

You are very good with CSS. Congratulations and thanks for sharing!

Another query. How do you give the buttons that round look?

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [June 26, 2021, 2:20am UTC](https://community.glideapps.com/t/adobe-xd-to-glide/28361/8 "2021-06-26T02:20:32Z")

</div>

Umm… I’d love [Figma](https://figma.com) to Glide

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/d/7d11128841457d03c5c383d4d576fddb1b4a44cf.jpeg)

---

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [June 26, 2021, 2:26am UTC](https://community.glideapps.com/t/adobe-xd-to-glide/28361/9 "2021-06-26T02:26:49Z")

</div>

It would be amazing.