All Projects β†’ JoaquimLey β†’ Faboptions

JoaquimLey / Faboptions

Licence: apache-2.0
A multi-functional FAB component with customizable options

Programming Languages

java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to Faboptions

React Component Library
A project skeleton to get your very own React Component Library up and running using Rollup, Typescript, SASS + Storybook
Stars: ✭ 313 (-70.47%)
Mutual labels:  library, component
Ngx Ui
πŸš€ Style and Component Library for Angular
Stars: ✭ 534 (-49.62%)
Mutual labels:  library, component
Fabsmenu
A simple library to use a menu of FloatingActionButtons from Design Support Library that follow Material Design Guidelines
Stars: ✭ 324 (-69.43%)
Mutual labels:  fab, materialdesign
React Modern Library Boilerplate
Boilerplate for publishing modern React modules with Rollup
Stars: ✭ 285 (-73.11%)
Mutual labels:  library, component
Morph Bottom Navigation
This library represents a Bottom Navigation with an awesome morph effect on top of the selected item
Stars: ✭ 803 (-24.25%)
Mutual labels:  library, materialdesign
Paper Onboarding
PaperOnboarding is a material design UI slider. Swift UI library by @Ramotion
Stars: ✭ 3,147 (+196.89%)
Mutual labels:  library, component
React Native Blurhash
πŸ–ΌοΈ A library to show colorful blurry placeholders while your content loads.
Stars: ✭ 430 (-59.43%)
Mutual labels:  library, component
Navigation Stack
NavigationStack is a stack-modeled UI navigation controller. Swift UI library made by @Ramotion
Stars: ✭ 2,289 (+115.94%)
Mutual labels:  library, component
Expanding Collection
ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion
Stars: ✭ 5,456 (+414.72%)
Mutual labels:  library, component
Vuesax
New Framework Components for Vue.js 2
Stars: ✭ 5,293 (+399.34%)
Mutual labels:  library, component
Paper Switch
🎚 RAMPaperSwitch is a Swift material design UI module which paints over the parent view when the switch is turned on. iOS library by @Ramotion
Stars: ✭ 2,902 (+173.77%)
Mutual labels:  library, component
Hellobooks
A Single-Page Library Management App built with nodejs, express and react and redux
Stars: ✭ 37 (-96.51%)
Mutual labels:  library, component
Reel Search
πŸ” RAMReel is a UI controller that allows you to choose options from a list. Swift UI library made by @Ramotion
Stars: ✭ 2,533 (+138.96%)
Mutual labels:  library, component
Circle Menu
⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion
Stars: ✭ 3,306 (+211.89%)
Mutual labels:  library, component
Fabulousfilter
Android library to animate Floating Action Button to Bottom Sheet Dialog and vice-versa
Stars: ✭ 2,477 (+133.68%)
Mutual labels:  library, fab
Create React Library
⚑CLI for creating reusable react libraries.
Stars: ✭ 4,554 (+329.62%)
Mutual labels:  library, component
Garland View Android
≑ GarlandView seamlessly transitions between multiple lists of content. Made by @Ramotion
Stars: ✭ 1,855 (+75%)
Mutual labels:  library, component
React Trading Ui
Component library for trading applications πŸ˜°πŸ“‰πŸ’Έ
Stars: ✭ 166 (-84.34%)
Mutual labels:  library, component
Folding Cell Android
πŸ“ƒ FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion
Stars: ✭ 4,859 (+358.4%)
Mutual labels:  library, component
Egjs
Javascript components group that brings easiest and fastest way to build a web application in your way.
Stars: ✭ 871 (-17.83%)
Mutual labels:  library, component

AppIcon

FabOptions

Android Arsenal MaterialUp Bintray minSdkVersion compileSdkVersion

Special thanks to AndrΓ© Mion for the help provided on building this component. Original concept by Praveen Bisht posted on MaterialUp, turned into code into open source library.

Gif concept sample

Android implementation

Gif android sample

How to use

  • Import gradle dependency:

      dependencies {
         	compile 'com.github.joaquimley:faboptions:1.2.0'
      }
    
  • Add the component to your layout:

<com.joaquimley.faboptions.FabOptions
	android:id="@+id/fab_options"
 	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
  	android:layout_gravity="bottom" />
  • Define a menu.xml file with your buttons information e.g.
<menu>
    <item
        android:id="@+id/faboptions_favorite"
        android:icon="@drawable/ic_favorite"
        android:title="Favorite" />
	
    <item
        android:id="@+id/faboptions_textsms"
        android:icon="@drawable/ic_textsms"
        android:title="Message" />
	
    <item
        android:id="@+id/faboptions_download"
        android:icon="@drawable/ic_file_download"
        android:title="Download" />
	
	
    <item
        android:id="@+id/faboptions_share"
        android:icon="@drawable/ic_share"
        android:title="Share" />
</menu>

XML:

  • Bind the buttons menu by adding the custom attribute app:button_menu="@menu/your_fab_buttons" to your component XML.

Programmatically

  • Bind the buttons menu on your FabOptions instance with FabOptions#setMenu(Menu).
FabOptions fabOptions = (FabOptions) findViewById(R.id.fab_options);
fabOptions.setButtonsMenu(R.menu.your_fab_buttons);

Listening for click events

  • Set your FabOptions instance click listener.

  • Handle the click events for each button id defined on the menu.xml.

Customizing

You can change the color of the component, both the FAB and the "background" individually, unless specified the background will always adopt the same value as the app:fab_color attribute (default is the theme's accent color).

 <com.joaquimley.faboptions.FabOptions
        android:id="@+id/fab_options"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:background_color="@color/fabOptionsBackgroundColor"
        app:fab_color="@color/fabOptionsFabColor" />

You can also use Java

fabOptions.setFabColor(R.color.fabOptionsFabColor);
fabOptions.setBackgroundColor(R.color.fabOptionsBackgroundColor);

Note: One is not dependent on the other, you can set individually.

Changing button color

fabOptions.setButtonColor(R.id.faboptions_favorite, R.color.colorAccent)

This will return a boolean value if it's able to change the color.

The sample is also available on the Playstore

Get it on Google Play

Issues: Fell free to open a new issue. Follow the ISSUE_TEMPLATE.MD

Changelog

1.2.0

  • Ability to open and close the component with new exposed open()/close() methods. - #35
  • Change the background color setBackgroundColor() through @ColorInt - #41

1.1.2

  • Fix a bug where buttons were clickable even when hidden - #25

1.1.1

  • Fix a resurfaced issue with related to Snackbar behaviour - #8

1.1.0

  • Backport to API 14 - #21
  • Change button color at runtime with the new #setButtonColor(int) - #22
  • Bug fix on Menu not displayed correctly - #17
  • Customize both background + fab colors. - #16

1.0.2

  • Fix layout measure
  • The component now reacts when a snackbar dismissed by user - #8

1.0.1

  • Fix slight vertical offset on the button's icon - #2

Contributing

Contributions are always welcome!

Follow the "fork-and-pull" Git workflow.

  1. Fork the repo on GitHub
  2. Clone the project to your own machine
  3. Commit changes to your own branch
  4. Merge with current development branch
  5. Push your work back up to your fork
  6. Submit a Pull request your changes can be reviewed (please refere the issue if reported)

Prevent code-style related changes (at least run Ctrl+βŒ₯+O, βŒ₯+⌘+L) before commiting.

License

Copyright Β© 2016 Joaquim Ley

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 
implied.
See the License for the specific language governing permissions and
limitations under the License.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].