Visit GitHub RepoGrid Views

Maven Central API
Android Arsenal


Note: you need to use the gradle dependency, cloning the repository will probably not compile as it is a work in progress.

SpannableBar is a Grid-style spannable bar, that is useful when you need a way to span a bar over columns. The view allows you to set the starting column, the span, the number of columns, and more.

I have personally spent days to GridView, GridLayout and TableLayout but have been unable to SIMPLY make a 'bar' that spans over a couple of columns, with the possibility to set the start as well. Even if that would work, those views would be too over complicated with a lot of features I did not need.

I decided to create a custom view that does only what I needed it to be.

The following example usage is from the TimeTable repository Here you can see a timetable where SpannableBars are used in each row item.

example application


Include the following in your build.gradle as a dependency:

dependencies {
  compile 'com.github.greasemonk:spannablebar:1.0.2'

If this fails, make sure to check if you have synchronized your local repositories.

In IntelliJ or Android Studio, you can find this under Settings>Build,Execution,Deployment>Build Tools>Maven>Repositories.


Include the layout in your XML:


Some optional XML properties include:


app:barText="my text"
app:barTextColor="@android:color/white"         // Default is DEFAULT_TEXT_COLOR -> Color.WHITE
app:barColor="@android:color/holo_blue_light"   // Default is DEFAULT_BAR_COLOR -> Color.LTGRAY

Set the bar's properties:

SpannableBar bar = (SpannableBar) findViewById(;

// Sets all the properties in one go
bar.setProperties(int start, int span, int columnCount);

bar.setColumnCount(int numColumns);   // Default is SpannableBar.DEFAULT_COLUMN_COUNT -> 7
bar.setStart(int start);              // Default is SpannableBar.DEFAULT_START -> 0
bar.setSpan(int span);                // Default is SpannableBar.DEFAULT_SPAN -> 7

// Optionally set the corner radius (for all corners)
bar.setRadius(float radius)           // Default is 0  (this will be fixed later, should be SpannableBar.DEFAULT_RADIUS -> 8f  for 48dp
bar.setColor(int color)
bar.setTextAlignment(Paint.Align align)
bar.setShowCellLines(boolean show)
bar.setCellLineColor(int color)
bar.setTextTypeface(Typeface typeface)

// Set the cell background color
// Example:  bar.setColumnColor(0,Color.argb(48,0,0,0)); will make it light gray.
bar.setColumnColor(int row, int color) 
Become a better Android Developer
Millions of developers are learning at MindOrks

Online Training Program

Featured Blogs

Our Team

MindOrks is Certainly one of the best online blog to stay on top of all the Android development news, coding and design patterns. Finally a blog I can count on to keep myself updated with latest and greatest things happening in Android world.

Vipul Shah
Android Developer

Become Pro in Android by watching videos