Visit GitHub Repo
Grid 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 Pro in Android by watching videos