A simple Timeline View that demonstrates the power of ConstraintLayout and RecyclerView. No drawing, just plug in and play.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.idea fix : update readme Dec 7, 2017
app fix : merge conflicts and readme.md Jan 5, 2018
gradle/wrapper
sc fix : update readme Dec 7, 2017
timelineview
.gitignore Initial commit Oct 18, 2017
.travis.yml fix : failing tests Jan 5, 2018
CHANGELOG.md fix : merge conflicts and readme.md Jan 5, 2018
LICENSE.md
README.md Enable syntax highlighting for code snippets. Improve indentation. Jun 5, 2018
build.gradle enable jacoco test coverage Jan 5, 2018
gradle.properties
gradlew Initial commit Oct 18, 2017
gradlew.bat Initial commit Oct 18, 2017
settings.gradle feat : add jitpack Oct 18, 2017

README.md

TimeLineView

Android Timeline View Library demonstrate the the power of ConstraintnLayout and RecyclerView.

Build Status codecov Codacy Badge Android Arsenal License

Showcase

ExampleMain      ExampleMain      ExampleMain

Quick Setup

1. Include library

Using Gradle

TimelineView is currently available in on Jitpack so add the following line before every other thing if you have not done that already.

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

Then add the following line

dependencies {
  compile 'com.github.po10cio:TimeLineView:1.0.2'
}

Using Maven

Also add the following lines before adding the maven dependency

<repositories>
  <repository>
    <id>jitpack.io</id>
    <url>https://jitpack.io</url>
  </repository>
</repositories>

Then add the dependency

<dependency>
  <groupId>com.github.po10cio</groupId>
  <artifactId>TimeLineView</artifactId>
  <version>1.0.2</version>
</dependency>

2. Usage

In your XML layout include the TimelineView as follows:

<me.jerryhanks.stepview.TimeLineView
  android:id="@+id/timelineView"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_marginBottom="8dp"
  android:layout_marginLeft="8dp"
  android:layout_marginRight="8dp"
  android:layout_marginTop="16dp">
      

Then in your Kotlin code, do the following:

Create a class that extends TimeLine

class MyTimeLine(status: Status, var title: String?, var content: String?) : TimeLine(status) {
  override fun equals(other: Any?): Boolean {
    if (this === other) return true
    if (javaClass != other?.javaClass) return false
        other as MyTimeLine
    
    if (title != other.title) return false
    if (content != other.content) return false

    return true
  }
  
  override fun hashCode(): Int {
    var result = if (title != null) title!!.hashCode() else 0
    result = 31 * result + if (content != null) content!!.hashCode() else 0
    
    return result
  }

  override fun toString(): String {
    return "MyTimeLine{" +
      "title='" + title + '\'' +
      ", content='" + content + '\'' +
      '}'
  }
}

TimeLine has three Statuses:

  • Status.COMPLETED
  • Status.UN_COMPLETED
  • Status.ATTENTION

You can choose from any of the statuses depending on the status of the item you want to represent.

Create an Array of your TimeLine

val timeLines = mutableListOf<MyTimeLine>()
  .apply {
    add(MyTimeLine(Status.COMPLETED, getString(R.string.s_title_1), getString(R.string.s_content_1)))
    add(MyTimeLine(Status.COMPLETED, getString(R.string.s_title_2), getString(R.string.s_content_2)))
    add(MyTimeLine(Status.COMPLETED, getString(R.string.s_title_3), getString(R.string.s_content_3)))
    add(MyTimeLine(Status.COMPLETED, getString(R.string.s_title_4), getString(R.string.s_content_4)))
    add(MyTimeLine(Status.COMPLETED, getString(R.string.s_title_5), getString(R.string.s_content_5)))
    add(MyTimeLine(Status.COMPLETED, getString(R.string.s_title_6), getString(R.string.s_content_6)))
    add(MyTimeLine(Status.COMPLETED, getString(R.string.s_title_7), getString(R.string.s_content_7)))
  }

Create the IndicatorAdapter and add it to the TimeLineView

val adapter = IndicatorAdapter(mutableListOf(), this, object : TimeLineViewCallback<MyTimeLine> {
  override fun onBindView(model: MyTimeLine, container: FrameLayout, position: Int): View {
    val view = layoutInflater
      .inflate(R.layout.sample_time_line,
      container, false)
      
    (view.findViewById<TextView>(R.id.tv_title)).text = model.title
    (view.findViewById<TextView>(R.id.tv_content)).text = model.content
   
    return view
  }
})

timelineView.setIndicatorAdapter(adapter)
adapter.swapItems(timeLines)

IndicatorAdapter This extends RecyclerView.Adapter and exposes the following functions:

  • Swaps the old items with the new items
fun swapItems(timeLines: List<T>)
  • Update a single item given the index
fun updateItem(timeline: T, position: Int) 
  • Adds a list of items to the list starting from the given index
fun addItems(vararg items: T, index: Int = itemCount)

Changelog

See the changelog file.

License

TimeLineView is distributed under the MIT license. See LICENSE for details.