Bootstrap style widgets for Android, with Glyph Icons

Last update: May 18, 2022

Android-Bootstrap

Android Bootstrap is an Android library which provides custom views styled according to the Twitter Bootstrap Specification. This allows you to spend more time on development rather than trying to get a consistent theme across your app, especially if you are already familiar with the Bootstrap Framework.

Quick Start

Maven Central CircleCI

Add the following dependency to your build.gradle, ensuring you replace 'X.X.X' with the latest version on the button above:

dependencies {
   compile 'com.beardedhen:androidbootstrap:{X.X.X}'
}

You should also override your application class with the following:

public class SampleApplication extends Application {
    @Override public void onCreate() {
        super.onCreate();
        TypefaceProvider.registerDefaultIconSets();
    }
}

You should then checkout the library and investigate the sample code, which covers most of the features. The sample app is also available on Google Play.

Support

If you have a question about how to use the project, please ask a question on StackOverflow, using the tag android-bootstrap-widgets.

If you think you have found a bug in the library, you should create a new issue instead.

Javadoc

The javadoc for the project is hosted on Github.

Examples

BootstrapButton

A button that supports Glyph icons, and is themeable using Bootstrap Brands.

<com.beardedhen.androidbootstrap.BootstrapButton
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="BootstrapButton"
 app:bootstrapBrand="success"
 app:bootstrapSize="lg"
 app:buttonMode="regular"
 app:showOutline="false"
 app:roundedCorners="true"
 />

BootstrapButton

###BootstrapButtonGroup Allows BootstrapButtons to be grouped together and their attributes controlled en masse.

<com.beardedhen.androidbootstrap.BootstrapButtonGroup
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="BootstrapButtonGroup"
 android:orientation="vertical"
 app:bootstrapBrand="success"
 app:bootstrapSize="lg"
 app:roundedCorners="true"
 >
 <com.beardedhen.androidbootstrap.BootstrapButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="BootstrapButton 1"
    />
 <com.beardedhen.androidbootstrap.BootstrapButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="BootstrapButton 2"
    />
</com.beardedhen.androidbootstrap.BootstrapButtonGroup>

BootstrapButtonGroup

AwesomeTextView

A text widget that displays Glyph icons, and is themeable using Bootstrap Brands.

<com.beardedhen.androidbootstrap.AwesomeTextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:bootstrapBrand="success"
 app:fontAwesomeIcon="fa_android"
 />

AwesomeTextView

###BootstrapProgressBar Displays progress in a bar from 0-100, and animates updates to the current progress.

<com.beardedhen.androidbootstrap.BootstrapProgressBar
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:animated="true"
 app:bootstrapBrand="warning"
 app:progress="78"
 app:striped="true"
 />

BootstrapProgressBar

BootstrapProgressBarGroup

Allows BootstrapProgressBars to be group together to have the effect of stacked progress bar.

     <com.beardedhen.androidbootstrap.BootstrapProgressBarGroup
         android:id="@+id/example_progress_bar_group_round_group"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="center_vertical"
         app:bootstrapSize="md"
         app:bootstrapMaxProgress="100">

         <com.beardedhen.androidbootstrap.BootstrapProgressBar
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             app:bootstrapBrand="success"
             app:bootstrapProgress="20"
             />

         <com.beardedhen.androidbootstrap.BootstrapProgressBar
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             app:bootstrapBrand="danger"
             app:bootstrapProgress="20"
             />

         </com.beardedhen.androidbootstrap.BootstrapProgressBarGroup>

BootstrapProgressBarGroup

###BootstrapLabel Displays non-clickable text in a widget similar to the BootstrapButton, sizable using H1-H6 elements.

<com.beardedhen.androidbootstrap.BootstrapLabel
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:bootstrapBrand="primary"
 app:bootstrapHeading="h3"
 app:roundedCorners="true"
 android:text="Bootstrap Label"
 />

BootstrapLabel

BootstrapEditText

Allows editing of text in a widget themed using BootstrapBrand.

<com.beardedhen.androidbootstrap.BootstrapEditText
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:bootstrapSize="md"
 app:bootstrapBrand="info"
 />

BootstrapEditText

###BootstrapCircleThumbnail Displays images in a center-cropped Circular View, themed with BootstrapBrand.

<com.beardedhen.androidbootstrap.BootstrapCircleThumbnail
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@drawable/my_drawable"
 app:bootstrapBrand="danger"
 app:hasBorder="true"
 />

BootstrapCircleThumbnail

BootstrapThumbnail

Displays images in a rectangular View, themed with BootstrapBrand.

<com.beardedhen.androidbootstrap.BootstrapThumbnail
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@drawable/my_drawable"
 app:bootstrapBrand="info"
 app:hasBorder="true"
 />

BootstrapThumbnail

###BootstrapWell Displays a view in a themed container.

<com.beardedhen.androidbootstrap.BootstrapWell
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        app:bootstrapSize="xl">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:text="Look, I'm in a large well!"
            />
    </com.beardedhen.androidbootstrap.BootstrapWell>

BootstrapWell

###BootstrapDropDown Displays a view with dropdown options, supplied by an array of strings.

<com.beardedhen.androidbootstrap.BootstrapDropDown
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                app:bootstrapText="Medium {fa_thumbs_o_up}"
                app:bootstrapBrand="regular"
                app:roundedCorners="true"
                app:bootstrapSize="md"
                app:dropdownResource="@array/bootstrap_dropdown_example_data"
                app:bootstrapExpandDirection="down"/>

BootstrapDropdown

Custom Styles

Custom styles can be applied to any of the views in this library by creating a class which implements BootstrapBrand, and setting it on the View. Please see the sample code of BootstrapButton for more detail.

    class CustomBootstrapStyle implements BootstrapBrand {
        // specify desired colors here
    }

    BootstrapButton btn = new BootstrapButton(context);
    btn.setBootstrapBrand(new CustomBootstrapStyle(this);

Contributing

Contributions are very welcome! There are 3 main ways you can help out:

  1. Add more Icon Typefaces, using the instructions here
  2. Help implement views which are present in the Twitter Bootstrap Specification but are not yet in this library.
  3. Raise an issue if you see a bug or are unsure on how something works, or even better - send a pull-request with a fix!

Versioning

This project uses Semantic Versioning. There are several breaking changes in V2.X of the library, including:

  • AwesomeTextView replaces FontAwesomeText
  • Various altered method signatures/attributes for views
  • Global BootstrapBrand/BootstrapSize attributes replace view-specific enums

Please consider what effect these changes might have on your app before upgrading!

Contact

If you have any questions, issues, or just want to let us know where you're using Android Bootstrap tweet us at @BeardedHen, email [email protected], or head over to our website to see more of our creations.

Hall of Fame

Checkout AppBrain to see some of the apps which use Android Bootstrap!

GitHub

https://github.com/Bearded-Hen/Android-Bootstrap
Comments
  • 1. Android Studio Preview Issue

    There was an issue with maven plugin version of Android-Bootstrap. After updating to Android Studio 1.0 its previews started giving NullPointerException because of setBootstrapType. I couldn't make any debugging without being able to see code so imported as module but now everything works fine.

    Is there a way for me to test maven plugin so I can try to find why preview has been broken? If I can't preview it then it is like blind shooting views...

    Reviewed by fmakdemir at 2014-12-21 22:54
  • 2. Error on statement... App Crashes

    bLabel1 = (BootstrapButton)findViewById(R.id.bLabel1); bLabel2 = (BootstrapButton)findViewById(R.id.bLabel2); bLabel3 = (BootstrapButton)findViewById(R.id.bLabel3); bLabel1.setFontAwesomeIcon("fa_times");

    on the last statement the app crashes.. ie, bLabel1.setFontAwesomeIcon("fa_times"); throws an android runtime exception

    Reviewed by nicknagi at 2015-10-09 18:39
  • 3. Added rounded and square image thumbnails

    Added round and square corner image thumbnails. This should probably go through more testing. I tested it on a Samsung Galaxy S4. The default style is grey with the image dimensions inside. If an image is provided, it will fill the inside. NOTE: I added a new class called AutoResizeTextView, which is not my code. It is from http://stackoverflow.com/questions/5033012/auto-scale-textview-text-to-fit-within-bounds/17782522#17782522. I made a comment in the code to source where it is from. It resizes the dimensions text(200x150) to fit the size of the thumbnail. The smaller the thumbnail, the smaller the font gets.

    Rounded thumbnails_rounded

    Square thumbnails_square

    Here is how to create a default thumbnail and a thumbnail with a provided image

           <com.beardedhen.androidbootstrap.BootstrapThumbnail
                android:id="@+id/thumbnailTwo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                bootstrapthumbnail:bt_width="150dp"
                bootstrapthumbnail:bt_height="110dp"
                android:layout_margin="10dp"/>
    
            <com.beardedhen.androidbootstrap.BootstrapThumbnail
                android:id="@+id/thumbnailTwo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                bootstrapthumbnail:bt_width="150dp"
                bootstrapthumbnail:bt_height="110dp"
                android:layout_margin="10dp"
                bootstrapthumbnail:bt_image="@drawable/bbuton_danger"/>
    

    You can set the image programmatically as well by calling setImage(). Let me know if there are any features I should add.

    Reviewed by theDazzler at 2013-12-03 05:30
  • 4. BootstrapCircleThumbnail is not displayed correctly

    hello , i'm tryng to show an image on a BootstrapCircleThumbnail , but the image show's on the top of the thumbs . see the image ,

    thumbs

    her is my xml code , the image size is : 920x360 <com.beardedhen.androidbootstrap.BootstrapCircleThumbnail android:id="@+id/img_user" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dp" android:layout_gravity="center_horizontal" BootstrapCircleThumbnail:bt_image="@drawable/bg_articles_list_row_image_placeholder" BootstrapCircleThumbnail:bct_size="large"/>

    thanks

    Reviewed by hatim-haffane at 2014-11-19 12:07
  • 5. BootstrapButton created by code not visible

    I create button by following code

    BootstrapButton button = new BootstrapButton(getApplicationContext()); button.setText("Test"); button.setBootstrapType("default"); button.setLeftIcon("fa-heart");

    container.addView(button);

    but not visible.

    icon or text is still invisible after calling setText or setLeftIcon.

    Reviewed by WestLink at 2014-01-17 07:24
  • 6. Gradient Buttons

    I'm making a new issue for each feature I added to discuss it because I added too many features at once in my fork. Here are the gradient buttons I added:

    2013-12-12 03 28 44 2013-12-12 03 28 21

    To use a gradient button, you just set the attribute "gradient" to true in xml. There are gradient square buttons as well, just not pictured

    Reviewed by theDazzler at 2013-12-12 03:32
  • 7. BootstrapGroupButton BootstrapButton type radio act as Toggle button ?

    BoostrapGroupButton BootstrapButton type "radio" acting as toggle button. Radio button behaviour one should always checked !! how it is possible ? Thanks

    Reviewed by khalid-mahmood at 2016-08-04 12:49
  • 8. BootstrapCircleThumbnail Error parsing XML: unbound prefix

    hello i'm trying to integrate the BootstrapCircleThumbnail on my list item , but when i call it i get this error error: Error parsing XML: unbound prefix.

    Here is my code

                <com.beardedhen.androidbootstrap.BootstrapCircleThumbnail
                    android:id="@+id/txt_long_desc"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    bootstrap:bct_image="@drawable/ic_taxi_detail_phone"
                    bootstrap:bct_size="large" />
         </LinearLayout>
    
    Reviewed by hatim-haffane at 2014-11-14 23:04
  • 9. Updated to fontawesome 4.1 and rotation animation added for BootstrapButtons

    • Updated to Font Awesome 4.1
    • Changed padding calculation for BootstrapButton so rotation animation can be used
    • Added rotation animation to control BootstrapButton icons seperately
    • Changed bbutton_size and bbutton_type attribute types to enum so IDE will give an error if wrong type is given
    • Fixed for some example problems like size was set as "warning"
    • A new layout added to show rotating BootstrapButton icons
    Reviewed by fmakdemir at 2014-08-14 11:57
  • 10. Fixed bugs and implemented Material icons, progress bar group

    Fixed issues: #164 #162 #161 #155 #119 Added Material Icon font #166 Added progress bar group to allow for stacked progress bars, and added progress % label see #165

    Reviewed by tom-beardedhen at 2016-06-01 10:24
  • 11. Bootstrap buttons not streching to fill the requred space

    Hi..im using your library in my project.. i want to show 2 buttons side by side and want them to take up the whole width of the screen,ive included your library as you said but the buttons do not stretch to fill the screen. If i try the code with normal android buttons they stretch to fill the space.can u figure out how i can overcome this. ive tried using android:layout_weight="1" but the buttons just shift to the left and do not strech 1

    this is the code of the button part

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="10"
        android:gravity="center_horizontal|top"
        android:orientation="horizontal" >
    
        <com.beardedhen.androidbootstrap.BootstrapButton
            android:id="@+id/b_yes"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:gravity="center"
            android:text="YES"
            bootstrapbutton:bb_icon_right="fa-check"
            bootstrapbutton:bb_roundedCorners="true"
            bootstrapbutton:bb_type="success" />
    
        <com.beardedhen.androidbootstrap.BootstrapButton
            android:id="@+id/b_no"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:gravity="center"
            android:text="NO"
            bootstrapbutton:bb_icon_right="fa-times"
            bootstrapbutton:bb_roundedCorners="true"
            bootstrapbutton:bb_type="primary" />
    </LinearLayout>
    
    Reviewed by clinton2111 at 2014-11-24 06:56
  • 12. Rounded corners of ProgressBarGroup breaks if maximum

    This code will make the left of the bargroup round, however the right will be squared.

    `<com.beardedhen.androidbootstrap.BootstrapProgressBarGroup android:id="@+id/barGroup" android:layout_width="match_parent" android:layout_height="12dp" android:layout_gravity="bottom" app:bootstrapMaxProgress="100" app:bootstrapSize="lg" app:roundedCorners="true">

        <com.beardedhen.androidbootstrap.BootstrapProgressBar
            android:id="@+id/homeBar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:bootstrapBrand="danger"
            app:bootstrapProgress="30"
            app:roundedCorners="true" />
    
        <com.beardedhen.androidbootstrap.BootstrapProgressBar
            android:id="@+id/awayBar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:bootstrapBrand="warning"
            app:bootstrapProgress="70"
            app:roundedCorners="true" />
    </com.beardedhen.androidbootstrap.BootstrapProgressBarGroup>`
    
    Reviewed by theisgroenbech at 2019-01-14 13:59
  • 13. Cannot show or hide Bootstrap button (visibility change)

    Hi,

    Calling setVisibility(View.GONE) or setVisibility(View.VISIBLE) does not have any effect on a BootstrapButton object. Also setting these flags in the XML does not change the visibility. The only option as I see it is to change the width to Odp. Thoughts?

    Reviewed by CazimirRoman at 2018-08-14 22:31
  • 14. BootstrapProgressBar crashed when setting maxProgress

    here is what i actually got at this line : bootstrapProgressBar.setMaxProgress(200);

    Caused by: java.lang.ClassCastException: android.support.constraint.ConstraintLayout cannot be cast to com.beardedhen.androidbootstrap.BootstrapProgressBarGroup
                          at com.beardedhen.androidbootstrap.BootstrapProgressBar.setMaxProgress(BootstrapProgressBar.java:591)
                          at com.ebiztechnocrats.humanresource.Login$override.onCreate(Login.java:136)
    
    Reviewed by ankitdubey021 at 2018-04-27 08:25
  • 15. Bootstrap Dropdown doesn't work programmatically

    I'm trying to attach a dropdown to an activity programmatically but it just doesnt work. The bootstrap edit text works fine but the dropdown crashes everytime. I have even had to switch versions just to try and get it to work but it doesnt.

    BootstrapDropDown bootstrapDropDown = new BootstrapDropDown( this.context ); bootstrapDropDown.setDropdownData( values ); parent.addView( bootstrapDropDown );

    where values is a string array. I get hit with this error android.content.res.Resources$NotFoundException: String array resource ID #0xffffffff.

    I even add a string array to my strings.xml values event that didnt work using resources. Anyone had luck with this?

    <string-array name="bootstap_dropdown_example_data">
            <item>Physical Injuries</item>
            <item>Pollution</item>
        </string-array>
    
    Reviewed by interwap at 2018-04-20 08:45
Icons, Borders, Radius ... for Android buttons
Icons, Borders, Radius ... for Android buttons

⚠️ 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 but

Apr 26, 2022
A lightweight iOS switch view style for Android
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

May 1, 2022
Google launcher-style implementation of switch (enable/disable) icon
Google launcher-style implementation of switch (enable/disable) icon

Android-SwitchIcon Google launcher-style implementation of switch (enable/disable) icon Compatibility This library is compatible from API 15 (Android

May 17, 2022
Base on android-process-button this is the advanced version of the android-process-button.
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

Apr 22, 2022
Android Circular Progress Button
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

May 17, 2022
Android Buttons With Built-in Progress Meters.
Android Buttons With Built-in Progress Meters.

Description Android Buttons With Built-in Progress Meters. Wiki Home Screenshots User Guide Integration The lib is available on Maven Central, you can

May 10, 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

May 16, 2022
FButton - a flat button library for Android
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

Apr 11, 2022
Android button which moves in eight direction.
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

Feb 15, 2022
Button for android with animations for transition and error states.
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

May 14, 2022
AwesomeSwitch is a replacement for the standard Switch(View) android offers, and it offers much more customization than the standard switch component.
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

May 3, 2022
[] Android floating action button
[] Android floating action button

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

May 17, 2022
Floating Action Button for Android based on Material Design specification
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

May 20, 2022
ToggleButton Widget For Android Dev
ToggleButton Widget For Android Dev

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

May 8, 2022
Android Floating ActionButton with a progress indicator ring
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

May 12, 2022
👏 The Medium's Clapping Effect developed in Android
👏 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 ??

May 12, 2022
[] An Android library for an expandable button menu
[] 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

Aug 16, 2021
SwitchButton 是 Android 上的一个开关按钮控件 【Deprecated】【Stop maintenance】
SwitchButton 是 Android 上的一个开关按钮控件 【Deprecated】【Stop maintenance】

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

Feb 18, 2022
This is a UI lib for Android. Effects like shining.
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(

May 21, 2022