# Create a floating action button

**URL:** <https://community.thunkable.com/t/create-a-floating-action-button/1795294>\
**Category:** Questions about Thunkable X\
**Created:** [March 22, 2022, 12:31am UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294 "2022-03-22T00:31:35Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![jp019178q4xzw](https://avatars.discourse-cdn.com/v4/letter/j/48db29/32.png) [@jp019178q4xzw](https://community.thunkable.com/u/jp019178q4xzw)\
**Post date:** [March 22, 2022, 12:31am UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294/1 "2022-03-22T00:31:35Z")

</div>

Hello, I am new to thunkable and I would like to know how to make a floating action button in thunkable since this option is no longer available in the new interface, if someone could help me I would appreciate it.

a greeting.

---

<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:** [March 22, 2022, 12:32am UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294/2 "2022-03-22T00:32:35Z")

</div>

Can you give an example of this? Maybe a screenshot or link to a post about the old interface?

---

<div class="post-metadata">

**Author:** ![jp019178q4xzw](https://avatars.discourse-cdn.com/v4/letter/j/48db29/32.png) [@jp019178q4xzw](https://community.thunkable.com/u/jp019178q4xzw)\
**Post date:** [March 22, 2022, 12:35am UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294/3 "2022-03-22T00:35:14Z")

</div>

The problem is that I don’t know how to make the floating action button if there is a way to do it since thunkable no longer has this option available in the FAB from what I was looking at.

---

<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:** [March 22, 2022, 1:27am UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294/4 "2022-03-22T01:27:29Z")

</div>

I don’t know what a floating action button is. I was hoping to understand better so I could help you.

---

<div class="post-metadata">

**Author:** ![jp019178q4xzw](https://avatars.discourse-cdn.com/v4/letter/j/48db29/32.png) [@jp019178q4xzw](https://community.thunkable.com/u/jp019178q4xzw)\
**Post date:** [March 22, 2022, 1:38am UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294/5 "2022-03-22T01:38:30Z")

</div>

I mean this:

 ![Screenshot_20220322-013645_Chrome](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/9/d9c481d38bad18f7651f8693458579bcbbd4127c.jpeg)

---

<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:** [March 22, 2022, 1:43am UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294/6 "2022-03-22T01:43:15Z")

</div>

Thanks. Based on this topic, @jared might have some ideas:

> [@How to make a floating action button (10-min solve)](https://community.thunkable.com/t/how-to-make-a-floating-action-button-10-min-solve/568583):
>
> the floating actin button brings you one step closer to the professional app feel! check it out the concept is pretty simple once you try it a few times. place a column on the screen. that becomes your screen now. make the screen not scrollable. make the column scrollable. add any screen content to the column. now add a row, above the column in the component tree. make the row height 8px. st the row positioning to absolute. position the row where you want it. then add a button. [https://x.thun…](https://x.thunkable.com/copy/05710bd4a3ab07c4967e9206b7cb3409)

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [March 22, 2022, 6:56am UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294/7 "2022-03-22T06:56:28Z")

</div>

In the new interface (DnD), just add the button in the place you want it.

Example, If you have a scrolling text box, you can place the button anywhere over the text box and you will be able to scroll the text box and in the same time click the button.

---

<div class="post-metadata">

**Author:** ![jp019178q4xzw](https://avatars.discourse-cdn.com/v4/letter/j/48db29/32.png) [@jp019178q4xzw](https://community.thunkable.com/u/jp019178q4xzw)\
**Post date:** [March 22, 2022, 11:09am UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294/8 "2022-03-22T11:09:44Z")

</div>

Excuse me but I don’t understand, I want it to be as it is in the screenshot.

Could you pass some similar example to be able to what it refers to?

Thank you.

---

<div class="post-metadata">

**Author:** ![jp019178q4xzw](https://avatars.discourse-cdn.com/v4/letter/j/48db29/32.png) [@jp019178q4xzw](https://community.thunkable.com/u/jp019178q4xzw)\
**Post date:** [March 22, 2022, 11:16am UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294/9 "2022-03-22T11:16:14Z")

</div>

thanks for the example, but the FAB button when touching does not display the other buttons, which is what I am looking for as the screenshot.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [March 22, 2022, 11:31am UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294/10 "2022-03-22T11:31:41Z")

</div>

Try this quick demo

[https://x.thunkable.com/projectPage/6239b1a36952010011d1bbac](https://x.thunkable.com/projectPage/6239b1a36952010011d1bbac)

When you click on the button it will toggle the other buttons show/hide status.

---

<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:** [March 22, 2022, 1:36pm UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294/11 "2022-03-22T13:36:26Z")

</div>

This is the problem with giving the bare minimum description in your posts. It’s hard to know exactly what you want. Hopefully, @muneer’s demo will be what you’re looking for.

---

<div class="post-metadata">

**Author:** ![jp019178q4xzw](https://avatars.discourse-cdn.com/v4/letter/j/48db29/32.png) [@jp019178q4xzw](https://community.thunkable.com/u/jp019178q4xzw)\
**Post date:** [March 22, 2022, 11:15pm UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294/12 "2022-03-22T23:15:24Z")

</div>

Thank you very much for the help, I thought it was much more complicated.

---

<div class="post-metadata">

**Author:** ![jp019178q4xzw](https://avatars.discourse-cdn.com/v4/letter/j/48db29/32.png) [@jp019178q4xzw](https://community.thunkable.com/u/jp019178q4xzw)\
**Post date:** [March 22, 2022, 11:17pm UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294/13 "2022-03-22T23:17:03Z")

</div>

Thank you very much for trying to help, I explained it to you and even gave you a screenshot.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [June 20, 2022, 11:17pm UTC](https://community.thunkable.com/t/create-a-floating-action-button/1795294/14 "2022-06-20T23:17:25Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
