Material Fancy Button

README in Bahasa Indonesia : README-ID.md

Beautiful Fancy Button on endorphins.

Icons, Borders, Radius ... for Android buttons. With selectable 21 Icon Fonts precompiled!

No need to manually using  for icon font character anymore!

Overview

Demo Application : Download APK

Features

• Border (stroke, radius, color)
  • Top left border
  • Top right border
  • Bottom left border
  • Bottom right border
• Background (normal, focus)
• Icon (Drawable, font icon)
  • Community Material
  • Devicon
  • Dripicons
  • Entypo
  • Fontawesome
  • Foundation Icons
  • Glyphicons Halflings
  • Google Material Design Icons
  • Ionicons
  • Material Design Iconic Font
  • MFGLabs Iconset
  • Meteocons
  • Mobirise Icons
  • Octicons
  • Open Iconic
  • PICOL
  • Pixden7Stroke
  • Themify Icons
  • Typeicons
  • Vaadin Icons
  • Weather Icons
  • Custom font
• Icon (Position, size)
  • right
  • left
  • top
  • bottom
• Icon Size
• Icon Padding

Installation

compile 'com.rilixtech:materialfancybuttons:1.8.8'

Add maven to your build.gradle:

maven {
      url "http://dl.bintray.com/rilixtech/maven"
    }

Choose your desired icon fonts from a precompiled font list, add the font that you want to use from below list:

compile 'com.rilixtech:community-material-typeface:1.9.32.2'
compile 'com.rilixtech:devicon-typeface:2.0.0.3'
compile 'com.rilixtech:dripicons-typeface:2.0.0'
compile 'com.rilixtech:entypo-typeface:1.0.0.3'
compile 'com.rilixtech:fontawesome-typeface:4.7.0.4'
compile 'com.rilixtech:foundation-icons-typeface:3.0.0.3'
compile 'com.rilixtech:glyphicons-halflings-typeface:1.0.0'
compile 'com.rilixtech:google-material-typeface:3.0.1.1.original'
compile 'com.rilixtech:mfglabs-iconset-typeface:1.0'
compile 'com.rilixtech:material-design-iconic-typeface:2.2.0.3'
compile 'com.rilixtech:meteocons-typeface:1.1.0.3'
compile 'com.rilixtech:mobirise-icons-typeface:1.0.0'
compile 'com.rilixtech:ionicons-typeface:2.0.1.3'
compile 'com.rilixtech:octicons-typeface:3.2.0.3'
compile 'com.rilixtech:open-iconic-typeface:1.1.1'
compile 'com.rilixtech:picol-typeface:1.0.0'
compile 'com.rilixtech:pixeden-7-stroke-typeface:1.2.0.1'
compile 'com.rilixtech:themify-icons-typeface:0.1.2'
compile 'com.rilixtech:typicons-typeface:2.0.7.3'
compile 'com.rilixtech:vaadin-icons-typeface:4.1.0'
compile 'com.rilixtech:weather-icons-typeface:2.0.10.3'

Icon Font List:

The following list is within this format:

• Font Icon link
  • "Prefix", this is prefix for each icon in the font
  • compile 'com.rilixtech:...', this is the dependency to use the icon font.

Icon List:

• Community Material

  • "cmdi"
  • compile 'com.rilixtech:community-material-typeface:1.9.32.2'

• Devicon

  • "devi"
  • compile 'com.rilixtech:devicon-typeface:2.0.0.3'

• Dripicons

  • "drpi"
  • compile 'com.rilixtech:dripicons-typeface:2.0.0'

• Entypo

  • "enti"
  • compile 'com.rilixtech:entypo-typeface:1.0.0.3'

• Fontawesome

  • "fawi"
  • compile 'com.rilixtech:fontawesome-typeface:4.7.0.4'

• Foundation Icons

  • "foui"
  • compile 'com.rilixtech:foundation-icons-typeface:3.0.0.3'

• Glyphicons Halflings

  • "glyi"
  • compile 'com.rilixtech:glyphicons-halflings-typeface:1.0.0'

• Google Material Design Icons

  • "gmdi"
  • compile 'com.rilixtech:google-material-typeface:3.0.1.1.original'

• Ionicons

  • "ioni"
  • compile 'com.rilixtech:ionicons-typeface:2.0.1.3'

• Material Design Iconic Font

  • "gmii"
  • Google Material Iconic
  • compile 'com.rilixtech:material-design-iconic-typeface:2.2.0.3'

• MFGLabs Iconset

  • "mfgi"
  • compile 'com.rilixtech:mfglabs-iconset-typeface:1.0'

• Meteocons

  • "meti"
  • compile 'com.rilixtech:meteocons-typeface:1.1.0.3'

• Mobirise Icons

  • "mbri"
  • compile 'com.rilixtech:mobirise-icons-typeface:1.0.0'

• Octicons

  • "octi"
  • compile 'com.rilixtech:octicons-typeface:3.2.0.3'

• Open Iconic

  • "opic"
  • compile 'com.rilixtech:open-iconic-typeface:1.1.1'

• PICOL

  • "pici"
  • compile 'com.rilixtech:picol-typeface:1.0.0'

• Pixden7Stroke

  • "pe7i"
  • compile 'com.rilixtech:pixeden-7-stroke-typeface:1.2.0.1'

• Themify Icons

  • "thei"
  • compile 'com.rilixtech:themify-icons-typeface:0.1.2'

• Typeicons

  • "typi"
  • compile 'com.rilixtech:typicons-typeface:2.0.7.3'

• Vaadin Icons

  • "vaai"
  • compile 'com.rilixtech:vaadin-icons-typeface:4.1.0'

• Weather Icons

  • "wici"
  • compile 'com.rilixtech:weather-icons-typeface:2.0.10.3'

Licenses for all included fonts are linked inside the class or can be found on the corresponding repositories.

Basic Usage Example

1 - Add MaterialFancyButton to your dependencies:

compile 'com.rilixtech:materialfancybuttons:1.8.7'

2 - Include MaterialFancyButton namespace to the root element:

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

3 - Add the MaterialFancyButton View:

<com.rilixtech.materialfancybutton.MaterialFancyButton
    android:id="@+id/btn_preview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

4 - Select the font that you desire, for example FontAwesome. Add it as dependencies:

compile 'com.rilixtech:fontawesome-typeface:4.7.0.4'

All icon font characters will be included in String Resource.

5 - Add the attribute for icon font character that you want, for example star icon. It should be in prefix_icon_name format. Because we use FontAwesome the prefix is fawi and the icon character is fawi_star. Use fancy:mfb_icon attribute:

fancy:mfb_icon="@string/fawi_star"

So it become:

<com.rilixtech.materialfancybutton.MaterialFancyButton
    android:id="@+id/btn_preview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fancy:mfb_icon="@string/fawi_star"/>

This is the recommended way, so you don't need to manually copy the font and remembering all the characters of the font, which is very tedious and error prone.

Custom Font

If you want to use custom Font, follow this easy steps:

1 - Paste your font inside assets/fonts/ folder for Text fonts or inside assets/iconfonts/ for icon fonts eg : fontawesome

2 - Then add the following attribute:

For text:

fancy:mfb_textFont="robotothin.ttf"
fancy:mfb_text="your text"

so it will be look like this:

<com.rilixtech.materialfancybutton.MaterialFancyButton
    android:id="@+id/btn_preview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fancy:mfb_textFont="robotothin.ttf"
    fancy:mfb_text="your text"/>

For icon:

fancy:mfb_iconFont="fontawesome.ttf"
fancy:mfb_fontIconResource=""

so it will be look like this:

<com.rilixtech.materialfancybutton.MaterialFancyButton
   android:id="@+id/btn_preview"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   fancy:mfb_iconFont="fontawesome.ttf"
   fancy:mfb_fontIconResource="&#xf087;"/>

Please be noted that when using fancy:mfb_icon you don't need to use fancy:mfb_iconFont and fancy:mfb_fontIconResource. If both value is present, they will be override and ignored.

Supported Attributes

For setting the radius of the button, you can also use setRadius(int radiusTopLeft, int radiusTopRight, int radiusBottomLeft, int radiusBottomRight)

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

Supported Getters

Sample

1 - Spotify Button

<com.rilixtech.materialfancybutton.MaterialFancyButton
 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"
 android:textStyle="bold"
 fancy:mfb_borderColor="#FFFFFF"
 fancy:mfb_borderWidth="1dp"
 fancy:mfb_defaultColor="#7ab800"
 fancy:mfb_focusColor="#9bd823"
 fancy:mfb_iconFont="fontawesome.ttf"
 fancy:mfb_fontIconResource="&#xf04b;"
 fancy:mfb_iconPosition="left"
 fancy:mfb_radius="30dp"
 fancy:mfb_text="SHUFFLE PLAY"
 fancy:mfb_textColor="#FFFFFF" />

2 - Facebook Button

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

See the example project for more samples

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

Contributions

MaterialFancyButtons needs you to build the missing features:

• Supporting Circular buttons
• Add elevation (Material Design)

Credits

• El Mehdi Sakout The creator of FancyButtons which is the origin of this project.
• mikepenz.com He is the creator of Android-Iconics which is the origin of the icon font project.

Developed By

• Joielechong

License

Copyright 2017 Joielechong

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.