Git Product home page Git Product logo

omfm's Introduction

OneMoreFabMenu

Another floating action button menu with expand/collapse behavior.

Download

Android Arsenal

Example gif

What's new:

Version 1.1.1 (02/03/2018)

  • [Fix] Bug fixes
    • Main button label shows with not text when text is โ€œโ€ (empty)

Version 1.1.0 (01/25/2018)

  • [Feature] Add parameter in the layout to background text label
  • [Feature] Add parameter in the layout to color text label
  • [Feature] Add parameter in the layout to add label to the main button
  • [Feature] Add parameter in the layout to add action to the main button
  • [Feature] Add parameter in the layout to add drawable to the main button when opened
  • [Enhancement] Increase padding left/right of the label
  • [Enhancement] Update sample to have different example images

How to use

This library have 1 main layout param and 12 optionals

  • <app:content_options> [Required]
    • Resource "menu" file with the options that the menu will show
  • <app:color_main_button> [optional]
    • Color of the main button
  • <app:color_secondary_buttons> [optional]
    • Color of the other options buttons
  • <app:expanded_background_color> [optional]
    • Color of the background when the component expands
  • <app:rotate_main_button> [optional, default=true]
    • Flag to enable/disable the rotation of main button
  • <app:size_main_button> [optional]
    • Size of the main button. Can use the already defined size: @integer/omfm_fab_size_normal
  • <app:size_secondary_buttons> [optional]
    • Size of the secondary buttons. Can use the already defined size: @integer/omfm_fab_size_mini
  • <app:close_on_click> [optional, default=false]
    • Flag to enable/disable the close menu when some option is clicked
  • <app:label_background_color> [optional, default=white]
    • Background color of the label
  • <app:label_background_drawable> [optional]
    • If you want a drawable instead of color in the label's background
  • <app:label_text_color> [optional, default=black]
    • Color of the label's text
  • <app:enable_main_as_action> [optional, default=false]
    • Flag to enable/disable the main button as an action when the menu is expanded
  • <app:main_action_drawable> [optional, default=icon defined in the content menu file]
    • Drawable of the main button when it is set as an action.
Example of usage
   <com.dekoservidoni.omfm.OneMoreFabMenu
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:content_options="@menu/omfm_content_options"
        app:close_on_click="true"
        app:color_main_button="@color/colorPrimaryDark"
        app:color_secondary_buttons="@color/colorPrimary"
        app:expanded_background_color="@color/omfm_expanded_background_sample"
        app:rotate_main_button="false"
        app:size_main_button="@integer/omfm_fab_size_normal"
        app:size_secondary_buttons="@integer/omfm_fab_size_mini"
        app:label_text_color="@color/colorPrimary"
        app:enable_main_as_action="true"
        app:main_action_drawable="@mipmap/ic_launcher"/>

Menu resource example

The menu is structure from top to bottom, for example, the first one is the main button and the others will be the first option, second option and etc.

The first item don't need to have a text because only the options have labels.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- First button is the initial Fab of the menu -->
    <!-- Title here can be empty if you don't to add any action in the main button -->
    <item
        android:id="@+id/main_option"
        android:icon="@drawable/ic_add_white_24px"
        android:title=""/>

    <!-- Options buttons of the Fab menu -->
    <item
        android:id="@+id/option1"
        android:icon="@drawable/ic_alarm_white_24px"
        android:title="@string/options_1" />

    <item
        android:id="@+id/option2"
        android:icon="@drawable/ic_alarm_white_24px"
        android:title="@string/options_2" />

    <item
        android:id="@+id/option3"
        android:icon="@drawable/ic_room_service_white_24px"
        android:title="@string/options_3" />

    <item
        android:id="@+id/option4"
        android:icon="@drawable/ic_room_service_white_24px"
        android:title="@string/options_4" />

</menu>

Integrating with Gradle

To integrate with your project, just add the following line to your app <build.gradle> file

compile 'com.github.dekoservidoni:omfm:1.1.1'

Important!

Please make sure your project have Kotlin support:

Top-level build.gradle:

classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.1.51"

Module build.gradle:

apply plugin: 'kotlin-android' 
apply plugin: 'kotlin-android-extensions'
dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:1.1.51"

Licence

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.

omfm's People

Contributors

dekoservidoni avatar aolivafaura avatar f3yisayo avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.