Icons, Borders, Radius ... for Android buttons

Related tags

Button Fancybuttons
Overview

⚠️ This library was made years ago when it wasn't that easy to customize Android buttons like today. I highly recommend you to use Material Design button as it offers the same features and most importantly it's backed by the Android Team.


Fancybuttons

Icons, Borders, Radius ... for Android buttons jCenter jitPack Android Arsenal

Android About Page Cover

Overview

FancyButtons Android

Demo Application : Download APK

Features

  • Border (stroke, radius, color)
  • Background (normal, focus)
  • Icon (Drawable, font Icon)
  • Icon (Position, size)
  • Icon Size
  • Icon Padding

Changelog

  • 1.9.1

    • Fix getting the font
  • 1.9.0

    • Add support for font resources (For text font only)
    • Increase min API level to 14
    • Now you can use these to set text font (res/font/roboto_slab_bold.ttf): android:fontFamily="@font/roboto_slab_bold" fancy:fb_textFontRes="@font/roboto_slab_bold"
    • Add dependency on support library used only when using font resources.
  • 1.8.4

    • Fix Text Gravity
    • Add Ability to define custom radius value for each corner
  • 1.8.3

    • Fixed long searching of font
    • Added ability to use android:text, android:textSize, android:testAllCaps attributes
    • Fixed preview issues with android:* attrs
    • Added opportunity to use android:* attrs in styles
    • Added ability to use custom LayoutParams instead of the default one
    • Force refreshing the view when setEnabled(boolean) is called
    • Minor optimization & refactoring
  • 1.8.2

    • Added ability to disable button
    • Added ability to use system font
  • 1.8.1

    • Fix Bug related to loading custom fonts
  • 1.8

    • Add setIconResource(Drawable)
    • Cache fonts
  • 1.7

    • Fix ripple effect when background is transparent
    • Add capitalization of text
  • 1.6

    • Add ripple effect
    • Upgrade Font Awesome to 4.5.0

Installation

implementation 'com.github.medyo:fancybuttons:1.9.1'

To use font resources add support library to your dependencies:

implementation "com.android.support:appcompat-v7:$support_lib_version"

Usage

1 - Include FancyButtons namespace to the root element :

xmlns:fancy="http://schemas.android.com/apk/res-auto"

2 - Add the FancyButton View with custom params :

<mehdi.sakout.fancybuttons.FancyButton
android:id="@+id/btn_preview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

Supported Attributes

XML Attribute Java Attribute Description
fancy:fb_text setText(String) Text of the button
fancy:fb_textColor setTextColor(int) Text Color of the button
fancy:fb_textSize setTextSize(int) Size of the text
fancy:fb_textFont setCustomTextFont(String) FontFamily of the text
fancy:fb_textFontRes setCustomTextFont(int) FontFamily of the text using font resource. REQUIRES support library
fancy:fb_textGravity setTextGravity(Int) Gravity of the text
fancy:fb_iconResource setIconResource(Drawable) Drawable icon of the button
fancy:fb_iconPosition setIconPosition(int) Position of the icon : Left, Right, Top, Bottom
fancy:fb_fontIconResource setIconResource(String) font icon of the button
fancy:fb_fontIconSize setFontIconSize(int) Size of the icon
fancy:fb_iconFont setCustomIconFont(String) FontFamily of the icon
fancy:fb_borderWidth setBorderWidth(int) Width of the border
fancy:fb_borderColor setBorderColor(int) Color of the border
fancy:fb_defaultColor setBackgroundColor(int) Background color of the button
fancy:fb_focusColor setFocusBackgroundColor(int) Focus Color of button background
fancy:fb_disabledColor setDisableBackgroundColor(int) Disabled Color of button background
fancy:fb_disabledTextColor setDisableTextColor(int) Disabled Color of button text
fancy:fb_disabledBorderColor setDisableBorderColor(int) Disabled Color of button border
fancy:fb_radius setRadius(int) Radius of the button
fancy:fb_radius(TopLeft, TopRight,BottomLeft,BottomRight) setRadius(int[] radius) Custom Radius for each button corner
fancy:fb_iconPaddingLeft setIconPadding(int,int,int,int) Icon Padding
fancy:fb_iconPaddingRight setIconPadding(int,int,int,int) Icon Padding
fancy:fb_iconPaddingTop setIconPadding(int,int,int,int) Icon Padding
fancy:fb_iconPaddingBottom setIconPadding(int,int,int,int) Icon Padding
fancy:fb_ghost setGhost(boolean) Ghost (Hollow)
fancy:fb_useSystemFont setUsingSystemFont(boolean) If enabled, the button title will ignore its custom font and use the default system font

Also you can use Attributes with default prefix (android:) which makes migrating of your project more fast. Default Attributes have more priority than Attributes with prefix fancy.

Supported default Attributes

XML Attribute
android:enabled
android:text
android:textSize
android:textAllCaps
android:fontFamily

Supported Getters

| Function | Description | | ------------- |:-------------:| -----:| | getText() | Returns Text Value of the button| | getTextViewObject() | Returns TextView Object| | getIconFontObject() | Returns icon defined by fb_fontIconResource| | getIconImageObject() | Returns icon defined by fb_iconResource |

Sample

1 - Spotify Button

FancyButton Spotify

<mehdi.sakout.fancybuttons.FancyButton
	android:id="@+id/btn_spotify"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:paddingBottom="10dp"
	android:paddingLeft="20dp"
	android:paddingRight="20dp"
	android:paddingTop="10dp"
	fancy:fb_borderColor="#FFFFFF"
	fancy:fb_borderWidth="1dp"
	fancy:fb_defaultColor="#7ab800"
	fancy:fb_focusColor="#9bd823"
	fancy:fb_fontIconResource="&#xf04b;"
	fancy:fb_iconPosition="left"
	fancy:fb_radius="30dp"
	fancy:fb_text="SHUFFLE PLAY"
	fancy:fb_textColor="#FFFFFF" />

2 - Facebook Button

FancyButton Facebook

FancyButton facebookLoginBtn = new FancyButton(this);
facebookLoginBtn.setText("Login with Facebook");
facebookLoginBtn.setBackgroundColor(Color.parseColor("#3b5998"));
facebookLoginBtn.setFocusBackgroundColor(Color.parseColor("#5474b8"));
facebookLoginBtn.setTextSize(17);
facebookLoginBtn.setRadius(5);
facebookLoginBtn.setIconResource("\uf082");
facebookLoginBtn.setIconPosition(FancyButton.POSITION_LEFT);
facebookLoginBtn.setFontIconSize(30);

See the example project for more samples

Bonus

Fancybuttons is delivered with :


FancyButtons AndroidFancyButtons AndroidFancyButtons Android

FAQ

How to add new fonts ? Just Paste your font inside assets/fonts/ folder for Text fonts or inside assets/iconfonts/ for icon fonts eg : entypo OR for text fonts add it to res/font/ and use android:fontFamily or fancy:fb_textFontRes to use it.

Contributions

Fancybuttons needs you to build the missing features :

  • Supporting Circular buttons
  • Add elevation (Material Design)

Licence

MIT http://opensource.org/licenses/MIT

Developed By

El Mehdi Sakout

Follow @medyo80 on Twitter for the latest news.

For contact, shoot me an email at [email protected]

Comments
  • Error:(1) Attribute

    Error:(1) Attribute "text" has already been defined

    I use Android Studio compile this lib as dependency

    compile 'com.github.medyo:fancybuttons:[email protected]'
    

    then get this error Error:(1) Attribute "text" has already been defined

    enhancement 
    opened by gordonpro 11
  • What does this.setLayoutParams() in initializeButtonContainer() for?

    What does this.setLayoutParams() in initializeButtonContainer() for?

    https://github.com/medyo/fancybuttons/blob/master/fancybuttons_library/src/main/java/mehdi/sakout/fancybuttons/FancyButton.java#L406

    This causes fancybuttons layout incorrect in layouts other than LinearLayout.

    opened by mariotaku 10
  • `Clickable` attribute doesn't work

    `Clickable` attribute doesn't work

    When I set android:clickable and android:focusable attributes to false it doesn't work how it works in standart button. It must pass click event to parent view and not prevent it from further processing. This can be usefull when necessary to set up one clicklistener at whole item like this one: image

    Of course I can set all this in my code, but any way, it should copy this behavior from native android button

    opened by F0RIS 8
  • Icon drawabe is not centered by default?

    Icon drawabe is not centered by default?

    Hi

    I found the icon drawable is not centered, even if I used gravity attribute, see screenshot (the arrow down icon on the top right): image

    I have to use icon padding to do so. Am I using something wrong or this can be improved.

    enhancement 
    opened by tsunamilx 8
  • Padding between fontIcon and text

    Padding between fontIcon and text

    Can you add a parameter to adjust manually the padding between fonticon and text and icon and text?

    Now if the text is large enough, the icon grows in height instead of shrinking the padding between icon and text.

    Thanks.

    opened by druidamix 8
  • Ripple effect not working when defaultColor is set to transparent

    Ripple effect not working when defaultColor is set to transparent

    Ripple effect feature that comes with the version 1.6 is not working when we set the fb_defaultColor to @android:color/transparent. In other words, the color to which we set fb_focusColor, has no effect if default color is transparent. Previous versions do not have such problem. In v1.5, even if default color is set to transparent, focus color has still an effect.

    Could you please solve this problem that occurs in v1.6?

    enhancement 
    opened by ugurcany 7
  • text worng show

    text worng show

    <mehdi.sakout.fancybuttons.FancyButton
        android:id="@+id/item_buy"
        android:layout_width="200dip"
        android:layout_height="38dip"
        fancy:fb_defaultColor="#ff9900"
        fancy:fb_focusColor="#dd8603"
        fancy:fb_radius="4dp"
        fancy:fb_text="SHOW_WRONG"
        />
    

    just show the half top of the content on SAMSUNG GT-I9200

    opened by zhew117 6
  • Graphic scaling

    Graphic scaling

    Does the library support scaling of graphics?

    I have a ImageButtton I'm trying to replace. I have it working with ImageButton with the following:

    <ImageButton

        android:id="@+id/app_list_refresh_button"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_margin="5dp"
        android:adjustViewBounds="false"
        android:padding="1dp"
        android:scaleType="fitCenter"
        android:src="@drawable/button_refresh"
        android:background="@color/button_material_dark"/>
    

    The image is 256x256 and I'm trying to have the button scale it down to fit into the FancyButton. But, I can't get it to scale down.

       <mehdi.sakout.fancybuttons.FancyButton
            android:id="@+id/app_list_refresh_button"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:padding="5dp"
            fancy:fb_iconResource="@drawable/button_refresh"
            fancy:fb_fontIconSize="25dp"
            fancy:fb_iconPaddingLeft="0dp"
            fancy:fb_iconPaddingRight="0dp"
            fancy:fb_defaultColor="#696969"
            fancy:fb_focusColor="#a9a9a9"
            fancy:fb_radius="5dp"/>
    
    opened by ToddManUtah 6
  • Black buttons that only show text

    Black buttons that only show text "Fancy Buttons"

    When I add and design a fancy button in my layout file the result that is outputted seems correct. Like the image in this link. However when I build the app to my phone the exact same button looks like the image shown in this link

    The button displayed here looks like the following in XML:

    
        <mehdi.sakout.fancybuttons.FancyButton
            android:id="@+id/btn_login"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/end_middle_button"
            app:layout_constraintEnd_toStartOf="@+id/end_button_width"
            app:layout_constraintStart_toStartOf="@+id/start_button_width"
            app:layout_constraintTop_toTopOf="@+id/start_middle_button"
            fancy:fb_borderColor="#FFFFFF"
            fancy:fb_borderWidth="1dp"
            fancy:fb_defaultColor="#FFFFFF"
            fancy:fb_focusColor="#EEF2F5"
            fancy:fb_radius="30dp"
            fancy:fb_text="LOGIN"
            fancy:fb_textColor="#000000"
            fancy:fb_textSize="18sp">
        </mehdi.sakout.fancybuttons.FancyButton>
    
    enhancement 
    opened by mikeslinkman 5
  • fancy:fb_focusColor dont work on Adapter

    fancy:fb_focusColor dont work on Adapter

    when i use this widget on android recyclerview adapter and setting setOnClickListener for that i dont see color on fancy:fb_focusColor, clicking on that dont work

    help wanted 
    opened by pishguy 5
  • ClassCastException

    ClassCastException

    Hi can you please tel me why I'm getting class cast exception, it seems to work fine in another activity.

    12-02 23:54:31.010 27853-27853/outletwise.com.twentydresses E/AndroidRuntime: FATAL EXCEPTION: main Process: outletwise.com.twentydresses, PID: 27853 java.lang.ClassCastException: android.widget.LinearLayout$LayoutParams cannot be cast to android.widget.RelativeLayout$LayoutParams at android.widget.RelativeLayout$DependencyGraph.findRoots(RelativeLayout.java:1722) at android.widget.RelativeLayout$DependencyGraph.getSortedViews(RelativeLayout.java:1667) at android.widget.RelativeLayout.sortChildren(RelativeLayout.java:373) at android.widget.RelativeLayout.onMeasure(RelativeLayout.java:381) at android.view.View.measure(View.java:16543) at android.widget.ScrollView.measureChildWithMargins(ScrollView.java:1241) at android.widget.FrameLayout.onMeasure(FrameLayout.java:310) at android.widget.ScrollView.onMeasure(ScrollView.java:326) at android.view.View.measure(View.java:16543) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5147) at android.widget.FrameLayout.onMeasure(FrameLayout.java:310) at android.support.v7.widget.CardView.onMeasure(CardView.java:196) at android.view.View.measure(View.java:16543) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5147) at android.widget.FrameLayout.onMeasure(FrameLayout.java:310) at android.view.View.measure(View.java:16543) at android.widget.RelativeLayout.measureChildHorizontal(RelativeLayout.java:719) at android.widget.RelativeLayout.onMeasure(RelativeLayout.java:455) at android.view.View.measure(View.java:16543) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5147) at android.widget.FrameLayout.onMeasure(FrameLayout.java:310) at android.support.v7.internal.widget.ContentFrameLayout.onMeasure(ContentFrameLayout.java:135) at android.view.View.measure(View.java:16543) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5147) at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1430) at android.widget.LinearLayout.measureVertical(LinearLayout.java:716) at android.widget.LinearLayout.onMeasure(LinearLayout.java:609) at android.view.View.measure(View.java:16543) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5147) at android.widget.FrameLayout.onMeasure(FrameLayout.java:310) at android.view.View.measure(View.java:16543) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5147) at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1430) at android.widget.LinearLayout.measureVertical(LinearLayout.java:716) at android.widget.LinearLayout.onMeasure(LinearLayout.java:609) at android.view.View.measure(View.java:16543) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5147) at android.widget.FrameLayout.onMeasure(FrameLayout.java:310) at com.android.internal.policy.impl.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2327) at android.view.View.measure(View.java:16543) at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:1979) at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1140) at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1331) at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1027) at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:5884) at android.view.Choreographer$CallbackRecord.run(Choreographer.java:780) at android.view.Choreographer.doCallbacks(Choreographer.java:593) at android.view.Choreographer.doFrame(Choreographer.java:562) at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:766) at android.os.Handler.handleCallback(Handler.java:733) at android.os.Handler.dispatchMessage(Handler.java:95) at android.os.Looper.loop(Looper.java:136) at android.app.ActivityThread.main(ActivityThread.java:5253) at java.lang.reflect.Method.invokeNative(Native Method) at java.lang.reflect.Method.invoke(Method.java:515) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:939) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:755) at dalvik.system.NativeStart.main(Native Method)

    question 
    opened by adolfdsilva 5
  • Your library no longer works

    Your library no longer works

    The code I use:

    <mehdi.sakout.fancybuttons.FancyButton
            android:id="@+id/btn_preview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    

    The error I get:

    Class referenced in the layout file, mehdi.sakout.fancybuttons.FancyButton, was not found in the project or the libraries
    Cannot resolve class mehdi.sakout.fancybuttons.FancyButton 
    
    opened by ghost 1
  • fb_textSize , fb_textAllCaps not work

    fb_textSize , fb_textAllCaps not work

    mDefaultTextSize = (int) attrsArray.getDimension(R.styleable.FancyButtonsAttrs_fb_textSize, mDefaultTextSize); mDefaultTextSize = (int) attrsArray.getDimension(R.styleable.FancyButtonsAttrs_android_textSize, mDefaultTextSize);

    mTextAllCaps = attrsArray.getBoolean(R.styleable.FancyButtonsAttrs_fb_textAllCaps, false); mTextAllCaps = attrsArray.getBoolean(R.styleable.FancyButtonsAttrs_android_textAllCaps, false);

    opened by zrq1060 0
  • Method ‘setFontIconSize’  can‘t work when I put my iconresource in drawable and import it by using R.drawable.xxx

    Method ‘setFontIconSize’ can‘t work when I put my iconresource in drawable and import it by using R.drawable.xxx

    but it works in settings below FancyButton foursquareBtn = new FancyButton(this); foursquareBtn.setText("Check in"); foursquareBtn.setBackgroundColor(Color.parseColor("#0072b1")); foursquareBtn.setFocusBackgroundColor(Color.parseColor("#228fcb")); foursquareBtn.setTextSize(17); foursquareBtn.setRadius(5); foursquareBtn.setIconResource("\uf180"); foursquareBtn.setIconPosition(FancyButton.POSITION_TOP); foursquareBtn.setFontIconSize(60); how can I import myself iconresource in a way like "\uf180"

    opened by xiaoxiaoci 1
  • ripple effect doesn't work

    ripple effect doesn't work

    Took example from samples but it has no ripple effect. Am I missing something? <mehdi.sakout.fancybuttons.FancyButton android:id="@+id/btn_instagram" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:layout_marginBottom="8dp" android:padding="10dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/btnAmbientVibes" fancy:fb_defaultColor="#3f729b" fancy:fb_focusColor="#313131" fancy:fb_iconPaddingLeft="0dp" fancy:fb_iconPaddingRight="0dp" fancy:fb_iconResource="@drawable/instagram" fancy:fb_radius="64dp"/>

    opened by IvanKnyaziev 2
Releases(1.9.0)
Owner
Mehdi Sakout
Software Engineer with an entrepreneurial spirit!
Mehdi Sakout
SquircleView is a library which provides you with Squircle views to use for buttons, views, etc.

SquircleView is a library which provides you with Squircle views to use for buttons, views, etc.

Juky 93 Nov 24, 2022
Bootstrap style widgets for Android, with Glyph Icons

Android-Bootstrap Android Bootstrap is an Android library which provides custom views styled according to the Twitter Bootstrap Specification. This al

Bearded Hen 7.3k Nov 18, 2022
Base on android-process-button this is the advanced version of the android-process-button.

Rock Button release log Base on android-process-button this is the advanced version of the android-process-button ##Main Features ActionProcessButton

MDCCLXXVI KPT 119 Nov 25, 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 Nov 22, 2022
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 Nov 26, 2022
FButton - a flat button library for Android

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

Le Van Hoang 1.4k Nov 17, 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 131 Nov 16, 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 133 Dec 1, 2022
AwesomeSwitch is a replacement for the standard Switch(View) android offers, and it offers much more customization than the standard switch component.

AwesomeSwitch AwesomeSwitch is a replacement for the standard Switch(View) android offers, and it offers much more customization than the standard swi

Anoop S S 29 Jun 2, 2022
[] Android floating action button

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

Oleksandr Melnykov 4k Nov 19, 2022
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 Nov 21, 2022
ToggleButton Widget For Android Dev

ToggleButton ToggleButton Widget For Android Developers @Deprecated !!!项目已经停止维护,新项目移至https://github.com/zcweng/SwitchButton !!! How To Use xml

suke 2.1k Nov 23, 2022
Android Floating ActionButton with a progress indicator ring

FabProgress Android Circular floating action button with intergrated progress indicator ring As per material design docs Demo: Demo apk HOW TO ADD TO

Kurt Mbanje 779 Nov 28, 2022
👏 The Medium's Clapping Effect developed in Android

?? MediumClap-Android Built with ❤︎ by Wajahat Karim and contributors A Custom Floating Action Button (FAB) library like clapping effect on Medium ??

Wajahat Karim 494 Nov 10, 2022
[] 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
SwitchButton 是 Android 上的一个开关按钮控件 【Deprecated】【Stop maintenance】

SwitchButton 【Deprecated】【Stop maintenance】停止维护了,推荐使用:https://github.com/zcweng/SwitchButton SwitchButton 是 Android 上的一个开关按钮控件 示例 APP 扫描二维码或点我下载 特性 支持

Nameless 334 Nov 15, 2022
This is a UI lib for Android. Effects like shining.

ShineButton This is a UI lib for Android. Effects like shining. Usage shineButton = (ShineButton) findViewById(R.id.shine_button); shineButton.init(

Chad Song 4.2k Nov 25, 2022
A lightweight iOS switch view style for Android

iOS-SwitchView A lightweight iOS switch view style for Android Usage Add SwitchView into xml layout <vn.luongvo.widget.iosswitchview.SwitchView an

Luong Vo (Lucas) 72 Nov 5, 2022
SegmentedController is an Android UI library for using customizable RadioGroup with RadioButtons.

SegmentedController is an Android UI library for using customizable RadioGroup with RadioButtons.

null 2 Jan 1, 2022