Skip to content

A simple Timeline View that demonstrates the power of ConstraintLayout and RecyclerView. No drawing, just plug in and play.

License

Notifications You must be signed in to change notification settings

bondz/TimeLineView

 
 

Repository files navigation

TimeLineView

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

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.0'
}

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.0</version>
</dependency>

###2. Usage In your XML layout include the Timeline View as afollows:

 <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 itme you want to represent.

Create an Array of your Timelines

 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 teh index

     fun updatItem(timeline: T, position: Int) 
  • Adds a list of items to the list

     fun addItems(vararg items: T)

Changelog

See the changelog file.

License

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

About

A simple Timeline View that demonstrates the power of ConstraintLayout and RecyclerView. No drawing, just plug in and play.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Kotlin 93.6%
  • Java 6.4%