{"id":13610652,"url":"https://github.com/lriccardo/TimelineView","last_synced_at":"2025-04-13T01:32:19.993Z","repository":{"id":44571444,"uuid":"436271156","full_name":"lriccardo/TimelineView","owner":"lriccardo","description":"A customizable and easy-to-use Timeline View library for Android. Works as a RecyclerView decorator (ItemDecoration)","archived":false,"fork":false,"pushed_at":"2022-02-07T17:26:23.000Z","size":6065,"stargazers_count":223,"open_issues_count":3,"forks_count":12,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-01T19:55:27.760Z","etag":null,"topics":["android","itemdecoration","kotlin","kotlin-android","library","recyclerview","recyclerview-item-decoration","timeline","timelineview","view"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lriccardo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-08T14:10:50.000Z","updated_at":"2024-07-18T14:16:50.000Z","dependencies_parsed_at":"2022-07-18T21:49:11.300Z","dependency_job_id":null,"html_url":"https://github.com/lriccardo/TimelineView","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lriccardo%2FTimelineView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lriccardo%2FTimelineView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lriccardo%2FTimelineView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lriccardo%2FTimelineView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lriccardo","download_url":"https://codeload.github.com/lriccardo/TimelineView/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223558249,"owners_count":17165096,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","itemdecoration","kotlin","kotlin-android","library","recyclerview","recyclerview-item-decoration","timeline","timelineview","view"],"created_at":"2024-08-01T19:01:46.720Z","updated_at":"2024-11-07T17:30:22.031Z","avatar_url":"https://github.com/lriccardo.png","language":"Kotlin","funding_links":[],"categories":["Kotlin"],"sub_categories":[],"readme":"# TimelineView\n[![](https://jitpack.io/v/lriccardo/TimelineView.svg)](https://jitpack.io/#lriccardo/TimelineView)\n[![API](https://img.shields.io/badge/API-21%2B-brightgreen.svg?style=flat)](https://android-arsenal.com/api?level=21)\n\n[![Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-TimelineView-brightgreen.svg?style=flat)](https://android-arsenal.com/details/1/8268)\n[![AndroidWeekly](https://androidweekly.net/issues/issue-498/badge)](https://androidweekly.net/issues/issue-498)\n\nA customizable and easy-to-use Timeline View library for Android\n\nCan be used as a standalone view or as a RecyclerView decorator\n\n![header](https://raw.githubusercontent.com/lriccardo/TimelineView/main/screens/header.png)\n\n## Previews\n\n\u003ctable\u003e\n    \u003cth\u003eAutomatically adapts to the item height and supports expand animations\u003c/th\u003e\n    \u003cth\u003eView type\u003c/th\u003e\n    \u003cth\u003ePreview\u003c/th\u003e\n    \u003cth\u003eView type\u003c/th\u003e\n    \u003cth\u003ePreview\u003c/th\u003e\n    \u003cth\u003eView type\u003c/th\u003e\n    \u003cth\u003ePreview\u003c/th\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"center\" rowspan=\"2\"\u003e\u003cimg src=\"https://github.com/lriccardo/TimelineView/raw/main/screens/demo.gif\" alt=\"demo\" width=\"250\"/\u003e\u003c/td\u003e\n        \u003ctd\u003efirst\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"https://github.com/lriccardo/TimelineView/raw/main/screens/first.jpg\" alt=\"first\" width=\"200\"/\u003e\u003c/td\u003e\n        \u003ctd\u003emiddle\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"https://github.com/lriccardo/TimelineView/raw/main/screens/middle.jpg\" alt=\"middle\" width=\"200\"/\u003e\u003c/td\u003e\n        \u003ctd\u003echecked\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"https://github.com/lriccardo/TimelineView/raw/main/screens/middle_checked.jpg\" alt=\"checked\" width=\"200\"/\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003elast\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"https://github.com/lriccardo/TimelineView/raw/main/screens/last.jpg\" alt=\"last\" width=\"200\"/\u003e\u003c/td\u003e\n        \u003ctd\u003espacer\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"https://github.com/lriccardo/TimelineView/raw/main/screens/spacer.jpg\" alt=\"spacer\" width=\"200\"/\u003e\u003c/td\u003e\n        \u003ctd\u003edashed\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"https://github.com/lriccardo/TimelineView/raw/main/screens/middle_dashed.jpg\" alt=\"dashed\" width=\"200\"/\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n## Setup\n\n### 1. Add Jitpack to your root build.gradle\n\n```gradle\nallprojects {\n    repositories {\n        maven { url \"https://jitpack.io\" }\n    }\n}\n```\n\n### 2. Add the dependency\n\n```gradle\ndependencies {\n    implementation 'com.github.lriccardo:TimelineView:1.1.2'\n}\n```\n\n## Usage\n\n### RecyclerView Decorator\n```kotlin\nrecyclerView.addItemDecoration(\n    TimelineDecorator(\n        indicatorSize = 24f,\n        lineWidth = 15f,\n        padding = 48f,\n        position = TimelineDecorator.Position.Left,\n        indicatorColor = Color.RED,\n        lineColor = Color.RED\n    )\n)\n```\n\n- Customization\n\n    You can provide a custom drawable for the indicators using `indicatorDrawable` or `indicatorDrawableRes` (`indicatorDrawable` overrides `indicatorDrawableRes`), if both are `null` a circle will be drawn (using the other customization parameters).\n\n    If you pass a drawable reference (`indicatorDrawableRes`), `ContextCompat.getDrawable()` will be used internally.\n\n    \u003ctable\u003e\n        \u003cth\u003eField\u003c/th\u003e\n        \u003cth\u003eAccepted values\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eindicatorStyle\u003c/td\u003e\n            \u003ctd\u003eIndicatorStyle (Filled | Empty | Checked)\u003c/td\u003e\n            \u003ctd\u003eFilled\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eindicatorDrawable\u003c/td\u003e\n            \u003ctd\u003eDrawable\u003c/td\u003e\n            \u003ctd\u003enull\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eindicatorDrawableRes\u003c/td\u003e\n            \u003ctd\u003e@DrawableRes Int\u003c/td\u003e\n            \u003ctd\u003enull\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eindicatorSize\u003c/td\u003e\n            \u003ctd\u003eFloat\u003c/td\u003e\n            \u003ctd\u003e24f\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n             \u003ctd\u003eindicatorYPosition\u003c/td\u003e\n             \u003ctd\u003ePercentage (0.0f - 1.0f)\u003c/td\u003e\n             \u003ctd\u003e0.5f\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003echeckedIndicatorSize\u003c/td\u003e\n            \u003ctd\u003eFloat\u003c/td\u003e\n            \u003ctd\u003eTimelineView default value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003echeckedIndicatorStrokeWidth\u003c/td\u003e\n            \u003ctd\u003eFloat\u003c/td\u003e\n            \u003ctd\u003e4dp\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003elineStyle\u003c/td\u003e\n            \u003ctd\u003eNormal (Normal | Dashed)\u003c/td\u003e\n            \u003ctd\u003eTimelineView default value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003elinePadding\u003c/td\u003e\n            \u003ctd\u003eFloat\u003c/td\u003e\n            \u003ctd\u003eTimelineView default value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n             \u003ctd\u003elineDashLength\u003c/td\u003e\n             \u003ctd\u003eFloat\u003c/td\u003e\n             \u003ctd\u003eTimelineView default value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003elineDashGap\u003c/td\u003e\n            \u003ctd\u003eFloat\u003c/td\u003e\n            \u003ctd\u003eTimelineView default value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003elineWidth\u003c/td\u003e\n            \u003ctd\u003eFloat\u003c/td\u003e\n            \u003ctd\u003eTimelineView default value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003epadding\u003c/td\u003e\n            \u003ctd\u003eFloat\u003c/td\u003e\n            \u003ctd\u003e16dp\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eposition\u003c/td\u003e\n            \u003ctd\u003ePosition (Left | Right)\u003c/td\u003e\n            \u003ctd\u003eLeft\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eindicatorColor\u003c/td\u003e\n            \u003ctd\u003e@ColorInt\u003c/td\u003e\n            \u003ctd\u003eTimelineView default value\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003c/tr\u003e\n            \u003ctr\u003e\n            \u003ctd\u003elineColor\u003c/td\u003e\n            \u003ctd\u003e@ColorInt\u003c/td\u003e\n            \u003ctd\u003eTimelineView default value\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/table\u003e\n    \n- Advanced customization\n    \n    If your `RecyclerView.Adapter` implements `TimelineAdapter` you can customize how each item of your list is drawn.\n    Implementing one or more of these methods, allows you to use the `position` argument to return a different customization for some of your items.\n    ```kotlin\n    interface TimelineAdapter {\n        fun getTimelineViewType(position: Int): TimelineView.ViewType?\n        fun getIndicatorDrawable(position: Int): Drawable?\n        @DrawableRes fun getIndicatorDrawableRes(position: Int): Int?\n        fun getIndicatorStyle(position: Int): TimelineView.IndicatorStyle?\n        fun getIndicatorColor(position: Int): Int?\n        fun getLineColor(position: Int): Int?\n        fun getLineStyle(position: Int): TimelineView.LineStyle?\n        fun getLinePadding(position: Int): Float?\n    }\n    ```\n### Standalone view\n```xml\n\u003ccom.lriccardo.timelineview.TimelineView\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"match_parent\"\n    app:timeline_item_type=\"first\"\n    app:indicator_size=\"12dp\"\n    app:line_width=\"8dp\"\n    app:indicator_color=\"@color/teal_700\"\n    app:line_color=\"@color/teal_700\" /\u003e\n```\n\n- Customization\n\n    \u003ctable\u003e\n        \u003cth\u003eAttribute\u003c/th\u003e\n        \u003cth\u003eAccepted values\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eapp:timeline_item_type\u003c/td\u003e\n            \u003ctd\u003efirst | middle | last | spacer\u003c/td\u003e\n            \u003ctd\u003efirst\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eapp:indicator_style\u003c/td\u003e\n            \u003ctd\u003efilled | empty | checked\u003c/td\u003e\n            \u003ctd\u003efilled\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eapp:indicator_drawable\u003c/td\u003e\n            \u003ctd\u003eDrawable\u003c/td\u003e\n            \u003ctd\u003enull\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eapp:indicator_size\u003c/td\u003e\n            \u003ctd\u003eDimension\u003c/td\u003e\n            \u003ctd\u003e12dp\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eapp:indicator_color\u003c/td\u003e\n            \u003ctd\u003eColor\u003c/td\u003e\n            \u003ctd\u003eColor.RED\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n             \u003ctd\u003eapp:indicator_y_position\u003c/td\u003e\n             \u003ctd\u003ePercentage (0.0 - 1.0)\u003c/td\u003e\n             \u003ctd\u003e0.5f\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eapp:checked_indicator_size\u003c/td\u003e\n            \u003ctd\u003eDimension\u003c/td\u003e\n            \u003ctd\u003e6dp\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eapp:checked_indicator_stroke_width\u003c/td\u003e\n            \u003ctd\u003eDimension\u003c/td\u003e\n            \u003ctd\u003e4dp\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eapp:line_style\u003c/td\u003e\n            \u003ctd\u003enormal | dashed\u003c/td\u003e\n            \u003ctd\u003enormal\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eapp:line_width\u003c/td\u003e\n            \u003ctd\u003eDimension\u003c/td\u003e\n            \u003ctd\u003e8dp\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003c/tr\u003e\n            \u003ctr\u003e\n            \u003ctd\u003eapp:line_color\u003c/td\u003e\n            \u003ctd\u003eColor\u003c/td\u003e\n            \u003ctd\u003eColor.RED\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eapp:line_dash_length\u003c/td\u003e\n            \u003ctd\u003eDimension\u003c/td\u003e\n            \u003ctd\u003e18\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eapp:line_dash_gap\u003c/td\u003e\n            \u003ctd\u003eDimension\u003c/td\u003e\n            \u003ctd\u003e12\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/table\u003e\n    \n# License\n\n```\nCopyright 2022 Riccardo Lattarulo\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flriccardo%2FTimelineView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flriccardo%2FTimelineView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flriccardo%2FTimelineView/lists"}