Bootstrap style widgets for Android, with Glyph Icons

Overview

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!

Comments
  • Android Studio Preview Issue

    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...

    bug clarification_needed 
    opened by fmakdemir 20
  • Error on statement... App Crashes

    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

    clarification_needed 
    opened by nicknagi 11
  • Added rounded and square image thumbnails

    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.

    opened by theDazzler 11
  • BootstrapCircleThumbnail is not displayed correctly

    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

    bug 
    opened by hatim-haffane 10
  • BootstrapButton created by code not visible

    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.

    bug 
    opened by WestLink 10
  • Gradient Buttons

    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

    opened by theDazzler 9
  • BootstrapGroupButton BootstrapButton type radio act as Toggle button ?

    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

    bug 
    opened by khalid-mahmood 8
  • BootstrapCircleThumbnail Error parsing XML: unbound prefix

    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>
    
    opened by hatim-haffane 8
  • Updated to fontawesome 4.1 and rotation animation added for BootstrapButtons

    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
    opened by fmakdemir 8
  • Fixed bugs and implemented Material icons, progress bar group

    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

    opened by tom-beardedhen 7
  • Bootstrap buttons not streching to fill the requred space

    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>
    
    bug 
    opened by clinton2111 7
  • Rounded corners of ProgressBarGroup breaks if maximum

    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>`
    
    opened by theisgroenbech 0
  • Cannot show or hide Bootstrap button (visibility change)

    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?

    opened by CazimirRoman 4
  • BootstrapProgressBar crashed when setting maxProgress

    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)
    
    opened by ankitdubey021 0
  • Bootstrap Dropdown doesn't work programmatically

    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>
    
    opened by interwap 0
Releases(2.3.1)
Owner
Bearded Hen
Bearded Hen
Materially inspired widgets and views that expose RxJava bindings.

Rx.Widgets Materially inspired widgets and views. Use ExpandableButtonGroup Add the widget to your view: <io.andref.rx.widgets.ExpandableButtonGro

Andrefio 12 Mar 12, 2018
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
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

Zagumennyi Evgenii 2.3k Dec 17, 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 Jan 7, 2023
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

Dmytro Danylyk 3k Dec 29, 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 Dec 9, 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 Dec 12, 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
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 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
ToggleButton Widget For Android Dev

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

suke 2.1k Dec 19, 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 493 Dec 7, 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 Dec 21, 2022