FButton - a flat button library for Android

Related tags

Button android fbutton
Overview

FButton Maven Central

FButton is a custom Button of Android with "Flat UI" concept. FButton's design get inspiration from designmono. This library is very small and highly customizable.

Demo application on playstore: https://play.google.com/store/apps/details?id=info.hoang8f.fbutton.demo

Screenshot

Including in your project

###Using Maven FButton Library is pushed to Maven Central, so you just need to add the following dependency to your build.gradle.

dependencies {
    compile 'info.hoang8f:fbutton:1.0.5'
}

###Manually Copy/merge the following files to corresponding folder/file:

  • info/hoang8f/widget/FButton.java
  • res/values/attrs.xml
  • res/values/colors.xml
  • res/values/dimens.xml

Customizable attributes

Attribute default value xml java
button color #3eadeb buttonColor setButtonColor(int color)
enable shadow true shadowEnabled setShadowEnabled(boolean isEnabled)
shadow color Automatically generated
from button color
shadowColor setShadowColor(int color)
shadow height 4dp shadowHeight setShadowHeight(int height)
corner radius 8dp cornerRadius setCornerRadius(int radius)

Usage

If the default values of custom attribues did not meet your requirement, you can easily re-config that attributes. This is sample code that you can refer. you can also browse demo app for more details.

via xml (sample)

  • Define xmlns:fbutton="http://schemas.android.com/apk/res-auto" on root of your xml file
<info.hoang8f.widget.FButton
    ...
   fbutton:buttonColor="@color/color_concrete"
   fbutton:shadowColor="@color/color_asbestos"
   fbutton:shadowEnabled="true"
   fbutton:shadowHeight="5dp"
   fbutton:cornerRadius="5dp"
    ...
     />

via code (sample)

disabledBtn.setButtonColor(getResources().getColor(R.color.color_concrete));
disabledBtn.setShadowColor(getResources().getColor(R.color.color_asbestos));
disabledBtn.setShadowEnabled(true);
disabledBtn.setShadowHeight(5);
disabledBtn.setCornerRadius(5);

Color Swatches

For your convenience Swatches Preset by designmono are also defined in this library

 //Color Swatches provided by http://designmodo.github.io/Flat-UI/
<color name="fbutton_color_turquoise">#1abc9c</color>
<color name="fbutton_color_green_sea">#16a085</color>
<color name="fbutton_color_emerald">#2ecc71</color>
<color name="fbutton_color_nephritis">#27ae60</color>
<color name="fbutton_color_peter_river">#3498db</color>
<color name="fbutton_color_belize_hole">#2980b9</color>
<color name="fbutton_color_amethyst">#9b59b6</color>
<color name="fbutton_color_wisteria">#8e44ad</color>
<color name="fbutton_color_wet_asphalt">#34495e</color>
<color name="fbutton_color_midnight_blue">#2c3e50</color>
<color name="fbutton_color_sun_flower">#f1c40f</color>
<color name="fbutton_color_orange">#f39c12</color>
<color name="fbutton_color_carrot">#e67e22</color>
<color name="fbutton_color_pumpkin">#d35400</color>
<color name="fbutton_color_alizarin">#e74c3c</color>
<color name="fbutton_color_pomegranate">#c0392b</color>
<color name="fbutton_color_clouds">#ecf0f1</color>
<color name="fbutton_color_silver">#bdc3c7</color>
<color name="fbutton_color_concrete">#95a5a6</color>
<color name="fbutton_color_asbestos">#7f8c8d</color>

Developed By

Le Van Hoang (@hoang8f)

License

   Copyright {2014} {Le Van Hoang}

   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.
Comments
  • Sluggish animation

    Sluggish animation

    Hi

    I am using your component in a new app we are prototyping right now, and i noticed that all the button animations are a bit sluggish - the text goes down before, then the top of the button and only then the shadow part. The behaviour is exactly the same you have in the animated GIF in the github page (https://raw.githubusercontent.com/hoang8f/android-flat-button/master/screenshot/screenshot.gif).

    However, i have installer your demo app and all the buttons work perfectly there, smooth and intuitive.

    Are you using a different version in your flat button demo app or am i doing somthing wrong?

    bug 
    opened by manuelgomes2 9
  • Buttons look very slim on android 2.3 (Paddings are ignored?)

    Buttons look very slim on android 2.3 (Paddings are ignored?)

    Buttons look like they have no padding on Android 2.3.7 (Samsung galaxy SII). any ideas what I'm doing wrong?

    Galaxy SII (2.3.7): 2014-07-24 13_52_03-genymotion for personal use - samsung galaxy s2 - 2 3 7 - api 10 - 480x800 480x

    HTC One (4.3): 2014-07-24 15_56_23-genymotion for personal use - htc one - 4 3 - api 18 - 1080x1920 720x1280 320d

    Button:

        <info.hoang8f.widget.FButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:gravity="center"
            android:padding="20dp"
            android:text="@string/signIn"
            android:textColor="@color/white"
            app:buttonColor="@color/fbutton_color_nephritis"
            app:cornerRadius="4dp"
            app:shadowEnabled="false"/>
    
    opened by ghost 3
  • Button click doesn't hide shadow when pressed

    Button click doesn't hide shadow when pressed

    I have found that the shadow doesn't disappear when its clicked.

    <com.package.FButton android:id="@+id/button" android:layout_width="match_parent" android:layout_height="80dip" android:drawableLeft="@drawable/twitter" android:drawablePadding="0dp" android:paddingTop="-5dp" android:text="Twitter" android:textColor="@android:color/white" fbutton:cornerRadius="0dp" fbutton:shadowEnabled="true" fbutton:shadowHeight="16dp" />

    opened by SamsonAkisanya 2
  • Proper handle of transparent button

    Proper handle of transparent button

    So far if you set transparent background of button you will get black button because of shadow. This should fix it and give possibility to make semitransparent button with proper shadow.

    opened by WojciechKo 1
  • ERROR: Unable to resolve dependency for ':app@debug/compileClasspath':Could not resolve com.github.jd-alexander:android-flat-button:v1.1.

    ERROR: Unable to resolve dependency for ':app@debug/compileClasspath':Could not resolve com.github.jd-alexander:android-flat-button:v1.1.

    here is my build.appapply plugin: 'com.android.application'

    android { compileSdkVersion 29 buildToolsVersion "29.0.2" defaultConfig { applicationId "com.example.fastfoodv2" minSdkVersion 21 targetSdkVersion 29 versionCode 1 versionName "1.0" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' } } }

    dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'androidx.appcompat:appcompat:1.1.0' implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta4' testImplementation 'junit:junit:4.13' implementation 'androidx.test.ext:junit:1.1.2-alpha03' androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0-alpha03' implementation 'com.google.firebase:firebase-analytics:17.2.2'

    //Libraries
    implementation 'com.google.firebase:firebase-core:17.2.2'
    implementation 'com.google.firebase:firebase-database:19.2.0'
    implementation 'com.rengwuxian.materialedittext:library:2.1.4'
    implementation 'com.android.support:support-annotations:28.0.0'
    implementation 'com.github.jd-alexander:android-flat-button:v1.1'
    

    }

    apply plugin: 'com.google.gms.google-services'

    and my build.gradle // Top-level build file where you can add configuration options common to all sub-projects/modules.

    buildscript { repositories { google() mavenCentral() jcenter() maven { url "https://oss.sonatype.org/content/repositories/snapshots" name 'Google' }

        maven { url 'https://maven.google.com/'
                name 'Google'
        }
    }
    
    
    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.3'
        classpath 'com.google.gms:google-services:4.3.2'
        classpath 'com.github.dcendents:android-maven-gradle-plugin:1.5'
    
    
    
    
    
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
    

    }

    allprojects { repositories { google() maven { url 'https:/jitpac.io' } jcenter() maven { url "https://oss.sonatype.org/content/repositories/snapshots" name 'Google'

            //task clean(type: Delete) {
            //delete rootProject.buildDir
            // }
        }
    
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
    

    } apply plugin: 'android-reporting'

    i try everything and again libray dosent work

    opened by Jsamouil 0
  • Button click color change

    Button click color change

    Hello, I couldn't figure out how to do color change on click. I am adding the button programmatically. Can you provide the code to set the color to change color when holding button?

    opened by yigitserin 0
  • Add definition file for the AboutLibraries

    Add definition file for the AboutLibraries

    Add definition file for the AboutLibraries library so devs can give proper credits with ease. You can find further information here: -- https://github.com/mikepenz/AboutLibraries

    opened by mikepenz 0
  • Fbutton is not showing animation on click in fragment

    Fbutton is not showing animation on click in fragment

    I am using FButton in Linear Layout but it does not show push animation on click. However onclick event is performed but push animation is not shown in a fragment.

    opened by Dhruvkanani 0
  • i have this error and cause my progam to crash

    i have this error and cause my progam to crash

    2020-02-02 12:00:21.504 16953-16953/com.example.fastfood1 E/AndroidRuntime: FATAL EXCEPTION: main Process: com.example.fastfood1, PID: 16953 android.view.InflateException: Binary XML file line #12: Attempt to invoke virtual method 'boolean java.lang.String.equals(java.lang.Object)' on a null object reference Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'boolean java.lang.String.equals(java.lang.Object)' on a null object reference at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:768) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:734) at android.view.LayoutInflater.rInflate(LayoutInflater.java:867) at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:828) at android.view.LayoutInflater.inflate(LayoutInflater.java:519) at android.view.LayoutInflater.inflate(LayoutInflater.java:427) at com.example.fastfood1.Adapter.MyBeastDealsAdapter.inflateView(MyBeastDealsAdapter.java:38) at com.asksira.loopingviewpager.LoopingPagerAdapter.instantiateItem(LoopingPagerAdapter.java:76) at androidx.viewpager.widget.ViewPager.addNewItem(ViewPager.java:1010) at androidx.viewpager.widget.ViewPager.populate(ViewPager.java:1158) at androidx.viewpager.widget.ViewPager.populate(ViewPager.java:1092) at androidx.viewpager.widget.ViewPager.setAdapter(ViewPager.java:540) at com.asksira.loopingviewpager.LoopingViewPager.setAdapter(LoopingViewPager.java:214) at com.example.fastfood1.ui.home.HomeFragment.lambda$onCreateView$1$HomeFragment(HomeFragment.java:57) at com.example.fastfood1.ui.home.-$$Lambda$HomeFragment$08hSC5SwHI-e3mXM6hOsJKuNgEI.onChanged(Unknown Source:4) at androidx.lifecycle.LiveData.considerNotify(LiveData.java:131) at androidx.lifecycle.LiveData.dispatchingValue(LiveData.java:149) at androidx.lifecycle.LiveData.setValue(LiveData.java:307) at androidx.lifecycle.MutableLiveData.setValue(MutableLiveData.java:50) at com.example.fastfood1.ui.home.HomeViewModel.onBestDealLoadSuccess(HomeViewModel.java:123) at com.example.fastfood1.ui.home.HomeViewModel$1.onDataChange(HomeViewModel.java:60) at com.google.firebase.database.Query$1.onDataChange(com.google.firebase:firebase-database@@19.2.0:179) at com.google.firebase.database.core.ValueEventRegistration.fireEvent(com.google.firebase:firebase-database@@19.2.0:75) at com.google.firebase.database.core.view.DataEvent.fire(com.google.firebase:firebase-database@@19.2.0:63) at com.google.firebase.database.core.view.EventRaiser$1.run(com.google.firebase:firebase-database@@19.2.0:55) at android.os.Handler.handleCallback(Handler.java:873) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:201) at android.app.ActivityThread.main(ActivityThread.java:6864) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:547) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:873)

    opened by Jsamouil 1
  • Drawable alignment

    Drawable alignment

    I'm trying to add an image to the button, so I've added a drawablePaddingTop, but when pressed it does not move accordingly with the button. Any help?

    opened by bryan-ibrahim 0
Owner
Le Van Hoang
developer at @kaopiz
Le Van Hoang
[] An Android library for an expandable button menu

ExpandableButtonMenu ExpandableButtonMenu is an Android library which implements an expandable button that can be used as a substitute of a fixed size

Lemon Labs 325 Nov 14, 2022
Android library providing an implementation of the Material Design Floating Action Button Speed Dial.

Android library providing an implementation of the Material Design Floating Action Button Speed Dial.

Sanyam Mehta 6 Dec 24, 2022
➕ An efficient and beaufitul Multi Float action button library based on Twitter implemented in Jetpack Compose 🚀

Multi Float Action Button ➕ An efficient and beaufitul Multi Float action button library based on Twitter implemented in Jetpack Compose ?? Including

Geovani Amaral 8 Oct 15, 2022
Android Circular Progress Button

?? Before using this library, read information below ?? This library is not more supported. If you want to add new feature or fix a bug, grab source

Dmytro Danylyk 5.6k Jan 7, 2023
Circle button widget for Android

DEPRECATED This library is deprecated and no new development is taking place. Consider using a FAB(Floating action button) instead. E.g. the Android D

Markus Hintersteiner 1.5k Dec 9, 2022
Android button which moves in eight direction.

Moving Button Android button which moves in eight direction. Preview Sample Demo You can download demo movie file here : demo.mov It's also on Youtube

Leonardo Taehwan Kim 130 Nov 22, 2022
Button for android with animations for transition and error states.

Transition Button Android Preview Expand animation: Shake animation: Installation Gradle dependencies { implementation 'com.royrodriguez:transitionbu

Roy Rodriguez 137 Jan 3, 2023
[] Android floating action button

DEPRECATED Use the FloatingActionButton from the support library instead. FloatingActionButton Description Android floating action button which reacts

Oleksandr Melnykov 4k Jan 5, 2023
Floating Action Button for Android based on Material Design specification

FloatingActionButton Yet another library for drawing Material Design promoted actions. Features Support for normal 56dp and mini 40dp buttons. Customi

Zendesk 6.4k Dec 26, 2022
A cute widget of Switch Button for you to create beautiful and friendly UI.

SwitchButton To get a quick preview, you can get Demo apk in Google Play or Directly download. This project provides you a convenient way to use and c

kyleduo 4.6k Dec 31, 2022
A simple Floating Action Button that shows an anchored Navigation View

Floating Navigation View A simple Floating Action Button that shows an anchored Navigation View and was inspired by Menu Material Fixed created by Tom

André Mion 1.3k Dec 29, 2022
A download button with pretty cool animation

ArrowDownloadButton A download button with pretty cool animation, this is an implemention of https://dribbble.com/shots/2012292-Download-Animation Enj

Rongchan Liu 966 Nov 29, 2022
Button which is visible while user holds it. Main use case is controlling audio recording state (like in Telegram, Viber, VK).

HoldingButton Button which is visible while user holds it. Main use case is controlling audio recording state (like in Telegram, Viber, VK). Getting s

Artem Hluhovskyi 594 Jan 1, 2023
This is a Material Design loading button

This is a library project with a custom view that implements concept of Send Comment (https://dribbble.com/shots/1986254-Send-Comment-Shoppr) made by

DevinShine 295 Jul 31, 2022
comtomize view submit button which you use for submit operation or download operation and so on.

This is library project with a custom view that implements concept of Submit Button (https://dribbble.com/shots/1426764-Submit-Button?list=likes&offse

ZhangLei 129 Feb 5, 2021
A raised button that lowers down to 0dp of elevation

RaiflatButton A raised button that lowers down to 0dp of elevation. From my blog post: https://rubensousa.github.io/2016/10/raiflatbutton It behaves l

Rúben Sousa 328 Sep 11, 2022
A shopping cart button with a telescopic displacement rotation animation ...一个带伸缩位移旋转动画的购物车按钮

AnimShopButton A shopping cart button with a telescopic displacement rotation animation ... 一个仿饿了么 带伸缩位移旋转动画的购物车按钮 注意,本控件非继承自ViewGroup,而是纯自定义View,实现的仿

张旭童 1.3k Nov 10, 2022
Kotlin Expanding Floating Action button

Kotlin-Expanding-Floating-Action_button Home Screen As you can see there is only a siongle floating button with + icon Expanding Fab button When we cl

Akshay Teli 0 Nov 3, 2021
Floating Action Button But Moveable And Expandalbe

MeFab todo add the maven bacge here Floating Action Button but MOVEABLE and EXPA

Hussien Fahmy 6 Dec 30, 2022