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
ExpandableSelector is an Android library created to show a list of Button/ImageButton widgets inside a animated container which can be collapsed or expanded.

ExpandableSelector ExpandableSelector is an Android library created to show a list of Button/ImageButton widgets inside a animated container which can

Karumi 699 Nov 19, 2022
Parallax everywhere is a library with alternative android widgets with parallax effects.

Parallax Everywhere# Parallax everywhere (PEW) is a library with alternative android views using parallax effects. Demo You can try the demo app on go

fmSirvent 712 Nov 14, 2022
IconicDroid is a custom Android Drawable which allows to draw icons from several iconic fonts.

IconicDroid IconicDroid is a custom Android Drawable which allows to draw icons from several iconic fonts. Try out the sample application on the Googl

Artur Termenji 387 Nov 20, 2022
A set of widgets to create smooth slideshows with ease.

Android SlideShow Widget A set of widgets to create smooth slide shows with ease. The slide show components are fully customizable and are not limited

MarvinLabs 211 Nov 20, 2022
Floating label input widgets

Android Floating Label Widgets A set of input widgets with a hint label that floats when input is not empty. Demo A demo of the widget is worth a thou

MarvinLabs 450 Nov 25, 2022
Make your native android Toasts Fancy. A library that takes the standard Android toast to the next level with a variety of styling options. Style your toast from code.

FancyToast-Android Prerequisites Add this in your root build.gradle file (not your module build.gradle file): allprojects { repositories { ... ma

Shashank Singhal 1.2k Dec 26, 2022
Make your native android Dialog Fancy. A library that takes the standard Android Dialog to the next level with a variety of styling options. Style your dialog from code.

FancyAlertDialog-Android Prerequisites Add this in your root build.gradle file (not your module build.gradle file): allprojects { repositories { ..

Shashank Singhal 350 Dec 9, 2022
A util for setting status bar style on Android App.

StatusBarUtil A util for setting status bar style on Android App. It can work above API 19(KitKat 4.4). 中文版点我 Sample Download StatusBarUtil-Demo Chang

Jaeger 8.8k Jan 7, 2023
An Android custom view to display digits rendered as dots in a grid, with a style like a 1970s LED clock.

#DotMatrixView This is an Android library project providing a custom view that can display things on a grid of dots. When the displayed value changes,

Mark Roberts 48 Apr 21, 2022
Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube graphic component.

Draggable Panel DEPRECATED. This project is not maintained anymore. Draggable Panel is an Android library created to build a draggable user interface

Pedro Vicente Gómez Sánchez 3k Dec 6, 2022
TourGuide is an Android library that aims to provide an easy way to add pointers with animations over a desired Android View

TourGuide TourGuide is an Android library. It lets you add pointer, overlay and tooltip easily, guiding users on how to use your app. Refer to the exa

Tan Jun Rong 2.6k Jan 5, 2023
Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your development.

Bubbles for Android Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your

Txus Ballesteros 1.5k Jan 2, 2023
View that imitates Ripple Effect on click which was introduced in Android L (for Android 2.3+)

RippleView View that imitates Ripple Effect on click which was introduced in Android L. Usage For a working implementation, Have a look at the Sample

Muthuramakrishnan Viswanathan 1.2k Dec 30, 2022
A new canvas drawing library for Android. Aims to be the Fabric.js for Android. Supports text, images, and hand/stylus drawing input. The library has a website and API docs, check it out

FabricView - A new canvas drawing library for Android. The library was born as part of a project in SD Hacks (www.sdhacks.io) on October 3rd. It is cu

Antwan Gaggi 1k Dec 13, 2022
MarkdownView is an Android webview with the capablity of loading Markdown text or file and display it as HTML, it uses MarkdownJ and extends Android webview.

About MarkdownView (Markdown For Android) is an Android library that helps you display Markdown text or files (local/remote) as formatted HTML, and st

Feras Alnatsheh 1k Dec 20, 2022
SwipeBack for Android Activities to do pretty the same as the android "back-button" will do, but in a really intuitive way by using a swipe gesture

SwipeBack SwipeBack is for Android Activities to do pretty the same as the android "back-button" will do, but in a really intuitive way by using a swi

Hannes Dorfmann 697 Dec 14, 2022
A backport of the SwitchPreference component that was introduced on Android 4 (ICS / level 14). This port works on Android 2.1+ (Eclair MR1 / level 7).

Android Switch Preference Backport A backport of the SwitchPreference component that was introduced on Android 4 (ICS / level 14). This port works on

Benoit Lubek 498 Dec 29, 2022
Wizard Pager is a library that provides an example implementation of a Wizard UI on Android, it's based of Roman Nurik's wizard pager (https://github.com/romannurik/android-wizardpager)

Wizard Pager Wizard Pager is a library that provides an example implementation of a Wizard UI on Android, it's based of Roman Nurik's wizard pager (ht

Julián Suárez 520 Nov 11, 2022