[TIMOB-19431] Android: Support Floating Action Button

GitHub Issue	n/a
Type	New Feature
Priority	High
Status	Closed
Resolution	Done
Resolution Date	2018-08-02T07:09:55.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Android
Labels	SupportTeam, hyperloop
Reporter	Kgomotso Rantao
Assignee	Hans Knöchel
Created	2015-03-31T15:30:37.000+0000
Updated	2018-08-06T17:34:51.000+0000

Description

Requesting to support Floating Action Button * http://www.google.com/design/spec/components/buttons-floating-action-button.html * http://www.materialdoc.com/floating-action-button/ ---- I'm trying to create a transparent view on top (in front) of the main view. I want the main view (at the back) to have 100% width and height. The second view is placed at the bottom 20% height an 100% width . The second view is transparent with multiple circular button or images which i'll use as buttons. Currently I can't get views to overlap (one on infront (top) and one at the back) they just get aligned next to each other (top, bottom, left or right). I've attached an example with one button on the left

Attachments

File	Date	Size
Floating button.jpg	2015-03-31T15:30:37.000+0000	83998
Video.MOV	2015-04-06T11:11:53.000+0000	1144412

Comments

Amimul Hossain 2015-04-06

Hello, Kgomotso Rantao Are you trying to do something like this?

   var win = Ti.UI.createWindow({
       fullscreen: true
   });
   
   var view1 = Titanium.UI.createView({
      backgroundColor:'white',
      width:Ti.UI.FILL,
      height:Ti.UI.FILL
   });
   
   win.add(view1);
   
   var view2 = Titanium.UI.createView({
      backgroundColor:'red',
      width:70,
      height:70,
      left: 50,
      bottom: 50,
      borderRadius: 35,
      viewShadowRadius : 4,
      viewShadowColor : 'gray'
   });
   
   view1.add(view2);
   
   win.open();

Reply with your requirements. Thanks.

Kgomotso Rantao 2015-04-06

The button on the bottom right doesn't move, it's as if it's "floating" on top of the other view
Kgomotso Rantao 2015-04-06

Hi Amimul Hossain You have the same idea in mind but with a different result. I attached a video using a more common application. The Android gmail app and the floating button on the bottom right. I'll incorporate the code you added in the comment above to explain: View1 is vertically scrollable (Scrollview with vertical layout) like the example in the video. View2 two is part of the display but doesn't move with View1 scrolling movement. So this simply means it's not added onto View1 (e.g view1.add(view2)) it's "floating" on top of View1 as it scrolls. Check the video example attached of the Android Gmail App. The button/view on the bottom right keeps it's position.
Amimul Hossain 2015-06-29

Hello, [~KRantao] Now i understand what you are asking for, Similar to Android floating action buttons. This has no support for Appcelerator yet. Maybe you need to develop a module on this feature to support with Appcelerator. You can follow this community [link](https://community.appcelerator.com/topic/714/help-us-prioritize-the-new-features-to-be-implemented-in-the-appcelerator-titanium-sdk) where people are talking about these features. Thanks.
Chee Kiat Ng 2016-01-20

To be considered for implementation via hyperloop
Dirlei Dionísio 2017-01-30

Hi guys, any plans do implement this feature?
Dirlei Dionísio 2017-01-30
ILAY SENER 2017-03-17

I have implemented something using animation based on 'onTouchEnd' to get the new position dimensions. Seems to work OK on simulator, but not perfect. Yet to test it on a device. Would be something like below: //this function gets triggered upon onTouchEnd function btnTouchEnd(e) { // console.log("x & y coordinates are " + e.x + " - " + e.y); var t1 = Ti.UI.create2DMatrix(); t1 = t1.translate(e.x, e.y); var a1 = Ti.UI.createAnimation(); a1.transform = t1; $.floatBtn.animate(a1); //floatBtn is my view }
Hans Knöchel 2017-05-19

I have a Proof-of-Concept working with Hyperloop and will create a module for it this sprint. Basic requirements: * Size * Color (background & riffle) * Image * Actions * Show / Hide
Guillermo Figueras 2017-09-21

Any news on this?
Hans Knöchel 2018-08-02

There is an open source module available to support this functionality and all possible configuration. Please refer to [Ti.FAB](https://github.com/loop-modules/Ti.FAB) for details and examples. Since this is an Android-only API, it should be hooked into the project if needed, but will not be shipped with the cross-platform core that focusses on native parity across the platforms.
Eric Merriman 2018-08-06

Closed as completed. If this is in error, please reopen.

JSON Source