{"id":28955548,"url":"https://github.com/sangcomz/stickytimeline","last_synced_at":"2025-06-23T20:07:47.637Z","repository":{"id":43115273,"uuid":"111376324","full_name":"sangcomz/StickyTimeLine","owner":"sangcomz","description":":book:StickyTimeLine is timeline view for android.","archived":false,"fork":false,"pushed_at":"2025-05-29T04:24:45.000Z","size":18835,"stargazers_count":584,"open_issues_count":4,"forks_count":80,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-29T04:31:21.264Z","etag":null,"topics":["android","horizontal","kotlin","sticky","stickyheader","timeline","timelineview","vertical"],"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/sangcomz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-11-20T07:27:30.000Z","updated_at":"2025-05-29T04:24:49.000Z","dependencies_parsed_at":"2024-11-15T03:32:16.189Z","dependency_job_id":"c4ca8d81-c211-4212-9968-fc384fe8b60f","html_url":"https://github.com/sangcomz/StickyTimeLine","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/sangcomz/StickyTimeLine","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sangcomz%2FStickyTimeLine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sangcomz%2FStickyTimeLine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sangcomz%2FStickyTimeLine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sangcomz%2FStickyTimeLine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sangcomz","download_url":"https://codeload.github.com/sangcomz/StickyTimeLine/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sangcomz%2FStickyTimeLine/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261548735,"owners_count":23175495,"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","horizontal","kotlin","sticky","stickyheader","timeline","timelineview","vertical"],"created_at":"2025-06-23T20:07:44.844Z","updated_at":"2025-06-23T20:07:47.610Z","avatar_url":"https://github.com/sangcomz.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# StickyTimeLine\n\n[![Maven Central](https://img.shields.io/maven-central/v/io.github.sangcomz/stickytimeline-compose)](https://search.maven.org/artifact/io.github.sangcomz/stickytimeline-compose)\n[![Maven Central](https://img.shields.io/maven-central/v/io.github.sangcomz/StickyTimeLine)](https://search.maven.org/artifact/io.github.sangcomz/StickyTimeLine)\n\nStickyTimeLine is timeline view for android. Now supports both View system and Jetpack Compose!\n\n## What's New? :tada:\n- [New] Jetpack Compose version released! 🎉\n- [New] Add benchmark module for performance measurement\n\n ## Result Screen\n \n Feel free to send me a pull request with your app and I'll link you here:\n ### Jetpack Compose\n|                                                                                                                                                   Sample                                                                                                                                                   |\n |:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|\n|                                                                                                                          \u003cimg width=\"auto\" height=\"500px\" src=\"/pic/compose.gif\"\u003e                                                                                                                          |\n\n### View System\n | Sample \u003cp style=\"float:left;\"\u003e  \u003ca href=\"https://play.google.com/store/apps/details?id=xyz.sangcomz.stickytimeline\"\u003e  \u003cimg HEIGHT=\"40\" WIDTH=\"135\" alt=\"Get it on Google Play\" src=\"https://play.google.com/intl/en_us/badges/images/apps/en-play-badge.png\" /\u003e\u003c/a\u003e\u003c/p\u003e   | AlleysMap \u003cp style=\"float:left;\"\u003e \u003ca href=\"https://play.google.com/store/apps/details?id=co.alleys.android\"\u003e \u003cimg HEIGHT=\"40\" WIDTH=\"135\" alt=\"Get it on Google Play\" src=\"https://play.google.com/intl/en_us/badges/images/apps/en-play-badge.png\" /\u003e \u003c/a\u003e\u003c/p\u003e | StockRoom \u003cp style=\"float:left;\"\u003e \u003ca href=\"https://play.google.com/store/apps/details?id=com.thecloudsite.stockroom\"\u003e \u003cimg HEIGHT=\"40\" WIDTH=\"135\" alt=\"Get it on Google Play\" src=\"https://play.google.com/intl/en_us/badges/images/apps/en-play-badge.png\" /\u003e\u003c/a\u003e\u003c/p\u003e   |\n |:---------------------------------:|:--------------------------------:|:--------------------------------:|\n | \u003cimg src=\"/pic/sample_result.gif\"\u003e|\u003cimg src=\"/pic/alleys_result.gif\"\u003e|\u003cimg width=\"auto\" height=\"500px\" src=\"/pic/stockroom_result.gif\"\u003e|\n\n## How to Use\n\n### Gradle\n\n#### View System\n```groovy\n    dependencies {\n        implementation 'io.github.sangcomz:StickyTimeLine:x.x.x'\n    }\n```\n\n#### Jetpack Compose\n```groovy\n    dependencies {\n        implementation 'io.github.sangcomz:stickytimeline-compose:x.x.x'\n    }\n```\n### Usage\n\n#### Jetpack Compose Usage\n\n##### Basic Usage - LazyColumn\n```kotlin\n@Composable\nfun TimeLineExample() {\n    val musicList = remember { MusicRepo().musicList }\n    val sortedMusicList = musicList.sortedWith(\n        compareBy(\n            { it.year.toIntOrNull() ?: 0 },\n            { it.month.toIntOrNull() ?: 0 }\n        )\n    )\n    \n    StickyTimeLineLazyColumn(\n        items = sortedMusicList,\n        groupBy = { it.year },\n        makeHeaderItem = { key, _ -\u003e key },\n        sectionHeader = { year -\u003e\n            Column(\n                modifier = Modifier\n                    .background(Color.White)\n                    .padding(8.dp)\n                    .fillMaxWidth()\n            ) {\n                Text(\n                    text = year,\n                    style = TextStyle(\n                        fontSize = 18.sp,\n                        fontWeight = FontWeight.Bold,\n                        color = Color(0xFF414FCA)\n                    )\n                )\n                Text(\n                    text = \"Popular Music\",\n                    style = TextStyle(\n                        fontSize = 14.sp,\n                        color = Color(0xFFD16767)\n                    )\n                )\n            }\n        },\n        itemContent = { music -\u003e\n            Card(\n                modifier = Modifier.fillMaxWidth(),\n                shape = MaterialTheme.shapes.medium,\n                elevation = CardDefaults.cardElevation(4.dp)\n            ) {\n                Column(modifier = Modifier.padding(16.dp)) {\n                    Text(music.title, style = MaterialTheme.typography.titleMedium)\n                    Text(music.artist, style = MaterialTheme.typography.bodyMedium)\n                }\n            }\n        },\n        timeLineDot = {\n            Box(\n                modifier = Modifier\n                    .size(24.dp)\n                    .background(\n                        Color.Gray,\n                        shape = CircleShape\n                    )\n            )\n        }\n    )\n}\n```\n\n##### Basic Usage - LazyRow\n```kotlin\n@Composable\nfun TimeLineRowExample() {\n    val musicList = remember { MusicRepo().musicList }\n    val sortedMusicList = musicList.sortedWith(\n        compareBy(\n            { it.year.toIntOrNull() ?: 0 },\n            { it.month.toIntOrNull() ?: 0 }\n        )\n    )\n    \n    StickyTimeLineLazyRow(\n        items = sortedMusicList,\n        lineColor = Color(0xFF51ae45),\n        lineWidth = 2.dp,\n        groupBy = { it.year },\n        makeHeaderItem = { key, _ -\u003e key },\n        headerContent = { year -\u003e\n            Column(\n                modifier = Modifier\n                    .wrapContentSize()\n                    .padding(horizontal = 8.dp)\n            ) {\n                Text(\n                    text = year,\n                    style = TextStyle(\n                        fontSize = 18.sp,\n                        fontWeight = FontWeight.Bold,\n                        color = Color(0xFF414FCA)\n                    )\n                )\n                Text(\n                    text = \"Popular Music\",\n                    style = TextStyle(\n                        fontSize = 14.sp,\n                        color = Color(0xFFD16767)\n                    )\n                )\n            }\n        },\n        itemContent = { music -\u003e\n            Card(\n                modifier = Modifier.wrapContentWidth(),\n                shape = MaterialTheme.shapes.medium,\n                elevation = CardDefaults.cardElevation(4.dp)\n            ) {\n                Column(modifier = Modifier.padding(16.dp)) {\n                    Text(music.title, style = MaterialTheme.typography.titleMedium)\n                    Text(music.artist, style = MaterialTheme.typography.bodyMedium)\n                }\n            }\n        },\n        dotContent = { _ -\u003e\n            Box(\n                modifier = Modifier\n                    .size(24.dp)\n                    .background(\n                        Color.Gray,\n                        shape = CircleShape\n                    )\n            )\n        }\n    )\n}\n```\n\n##### Parameters - StickyTimeLineLazyColumn\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `modifier` | `Modifier` | `Modifier` | Modifier for the component |\n| `items` | `List\u003cT\u003e` | - | List of items to display in the timeline |\n| `groupBy` | `(T) -\u003e String` | - | Function to group items by section (returns section key) |\n| `makeHeaderItem` | `(key: String, items: List\u003cT\u003e) -\u003e G` | - | Function to create header item from section key and items |\n| `generateItemKey` | `(T) -\u003e Any` | `{ it.hashCode() }` | Function to generate unique key for each item (for recomposition optimization) |\n| `contentBackgroundColor` | `Color` | `Color.White` | Background color of the content area |\n| `lineColor` | `Color` | `Color.Blue` | Color of the timeline line |\n| `lineWidth` | `Dp` | `2.dp` | Width of the timeline line |\n| `verticalSpaceBy` | `Dp` | `12.dp` | Vertical spacing between items |\n| `timeLineHorizontalPadding` | `Dp` | `0.dp` | Horizontal padding for the timeline |\n| `timeLineDot` | `@Composable () -\u003e Unit` | - | Composable for timeline dot |\n| `sectionHeader` | `@Composable (headerItem: G) -\u003e Unit` | - | Composable for section header |\n| `itemContent` | `@Composable (item: T) -\u003e Unit` | - | Composable content for each item |\n\n##### Parameters - StickyTimeLineLazyRow\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `modifier` | `Modifier` | `Modifier` | Modifier for the component |\n| `items` | `List\u003cT\u003e` | - | List of items to display in the timeline |\n| `groupBy` | `(T) -\u003e String` | - | Function to group items by section (returns section key) |\n| `makeHeaderItem` | `(key: String, items: List\u003cT\u003e) -\u003e G` | - | Function to create header item from section key and items |\n| `generateItemKey` | `(T) -\u003e Any` | `{ it.hashCode() }` | Function to generate unique key for each item (for recomposition optimization) |\n| `headerContent` | `@Composable (headerItem: G) -\u003e Unit` | - | Composable for section header |\n| `itemContent` | `@Composable (item: T) -\u003e Unit` | - | Composable content for each item |\n| `dotContent` | `@Composable (group: String) -\u003e Unit` | Default blue circle | Composable for timeline dot |\n| `lineColor` | `Color` | `Color.Blue` | Color of the timeline line |\n| `lineWidth` | `Dp` | `2.dp` | Width of the timeline line |\n| `horizontalSpaceBy` | `Dp` | `12.dp` | Horizontal spacing between items |\n| `contentPaddingValues` | `PaddingValues` | `PaddingValues(horizontal = 8.dp)` | Padding values for the content |\n\n#### View System Usage\n\n##### activity_main.xml\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003candroid.support.constraint.ConstraintLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n    xmlns:tools=\"http://schemas.android.com/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\"xyz.sangcomz.stickytimeline.MainActivity\"\u003e\n\n    \u003cxyz.sangcomz.stickytimelineview.TimeLineRecyclerView\n        android:id=\"@+id/recycler_view\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\" /\u003e\n\u003c/android.support.constraint.ConstraintLayout\u003e\n```\n#### MainActivity.kt\n```kotlin\nclass MainActivity : AppCompatActivity() {\n\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContentView(R.layout.activity_main)\n        \n        val recyclerView: TimeLineRecyclerView = findViewById(R.id.recycler_view)\n        \n        //Currently only LinearLayoutManager is supported.\n        recyclerView.layoutManager = LinearLayoutManager(this,\n                LinearLayoutManager.VERTICAL,\n                false)\n\n        //Get data\n        val singerList = getSingerList()\n\n\n        //Add RecyclerSectionItemDecoration.SectionCallback\n        recyclerView.addItemDecoration(getSectionCallback(singerList))\n        \n        //Set Adapter\n        recyclerView.adapter = SingerAdapter(layoutInflater,\n                singerList,\n                R.layout.recycler_row)\n    }\n\n    //Get data method\n    private fun getSingerList(): List\u003cSinger\u003e = SingerRepo().singerList\n\n\n    //Get SectionCallback method\n    private fun getSectionCallback(singerList: List\u003cSinger\u003e): RecyclerSectionItemDecoration.SectionCallback {\n        return object : RecyclerSectionItemDecoration.SectionCallback {\n            //In your data, implement a method to determine if this is a section.\n            override fun isSection(position: Int): Boolean =\n                    singerList[position].debuted != singerList[position - 1].debuted\n\n            //Implement a method that returns a SectionHeader.\n            override fun getSectionHeader(position: Int): SectionInfo? =\n                    SectionInfo(singerList[position].debuted, singerList[position].group)\n        }\n    }\n}\n```\n\n#### JavaExampleActivity.java\n```java\npublic class JavaExampleActivity extends AppCompatActivity {\n\n    private Drawable icFinkl, icBuzz, icWannaOne, icGirlsGeneration, icSolo;\n\n    @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_main);\n        initDrawable();\n\n        TimeLineRecyclerView recyclerView = findViewById(R.id.recycler_view);\n\n        recyclerView.setLayoutManager(new LinearLayoutManager(this,\n                RecyclerView.VERTICAL,\n                false));\n\n        List\u003cSinger\u003e singerList = getSingerList();\n\n        recyclerView.addItemDecoration(getSectionCallback(singerList));\n\n        recyclerView.setAdapter(new SingerAdapter(getLayoutInflater(), singerList, R.layout.recycler_row));\n    }\n\n    private RecyclerSectionItemDecoration.SectionCallback getSectionCallback(final List\u003cSinger\u003e singerList) {\n        return new RecyclerSectionItemDecoration.SectionCallback() {\n\n            @Nullable\n            @Override\n            public SectionInfo getSectionHeader(int position) {\n                Singer singer = singerList.get(position);\n                Drawable dot;\n                switch (singer.getGroup()) {\n                    case \"FIN.K.L\": {\n                        dot = icFinkl;\n                        break;\n                    }\n                    case \"Girls' Generation\": {\n                        dot = icGirlsGeneration;\n                        break;\n                    }\n                    case \"Buzz\": {\n                        dot = icBuzz;\n                        break;\n                    }\n                    case \"Wanna One\": {\n                        dot = icWannaOne;\n                        break;\n                    }\n                    default: {\n                        dot = icSolo;\n                    }\n                }\n                return new SectionInfo(singer.getDebuted(), singer.getGroup(), dot);\n            }\n\n            @Override\n            public boolean isSection(int position) {\n                return !singerList.get(position).getDebuted().equals(singerList.get(position - 1).getDebuted());\n            }\n        };\n    }\n\n    private List\u003cSinger\u003e getSingerList() {\n        return new SingerRepo().getSingerList();\n    }\n\n    private void initDrawable() {\n        icFinkl = AppCompatResources.getDrawable(this, R.drawable.ic_finkl);\n        icBuzz = AppCompatResources.getDrawable(this, R.drawable.ic_buzz);\n        icWannaOne = AppCompatResources.getDrawable(this, R.drawable.ic_wannaone);\n        icGirlsGeneration = AppCompatResources.getDrawable(this, R.drawable.ic_girlsgeneration);\n        icSolo = AppCompatResources.getDrawable(this, R.drawable.ic_wannaone);\n    }\n}\n```\n##### caution\n- *Currently only LinearLayoutManager is supported.*\n\n#### recycler_row.xml\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003c!--Don't set margin value in the parent view--\u003e\n\u003candroid.support.v7.widget.CardView xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:tools=\"http://schemas.android.com/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\u003e\n\n    \u003cTextView\n        android:id=\"@+id/full_name_tv\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:padding=\"10dp\" /\u003e\n\n\u003c/android.support.v7.widget.CardView\u003e\n```\n\n##### caution\n- *Don't set margin value in the parent view.*\n\n#### attribute\n\n|        Method Name       | Description                                           | Default Value |\n|:------------------------:|-------------------------------------------------------|:-------------:|\n|sectionBackgroundColor    | To change section section background color            |    #f9f9f9    |\n|sectionTitleTextColor     | To change section title color                         |    #414fca    |\n|sectionSubTitleTextColor  | To change section sub title color                     |    #d16767    |\n|timeLineColor             | To change line color in timeline                      |    #51ae45    |\n|timeLineDotColor          | To change dot color in timeline                       |    #51ae45    |\n|timeLineCircleStrokeColor | To change dot stroke color in timeline                |    #f9f9f9    |\n|sectionTitleTextSize      | To change section title text size                     |      14sp     |\n|sectionSubTitleTextSize   | To change section sub title text size                 |      12sp     |\n|timeLineWidth             | To change line width in timeline                      |      4dp      |\n|isSticky                  | To change Sticky functionality in the Timeline        |      true     |\n|customDotDrawable         | To change the circle to custom drawable               |      null     |\n|sectionBackgroundColorMode| To change section background area(for horizontal mode)|    MODE_FULL  |\n|timeLineDotRadius         | To change dot radius                                  |      8dp      |\n|timeLineDotStrokeSize     | To change dot stroke size                             |      4dp      |\n\n# Contribute\nWe welcome any contributions.\n\n# Inspired by\n * [tim.paetz](https://github.com/paetztm), I was inspired by his code. And I used some of his code in the library.\n\n# License\n\n    Copyright 2019 Jeong Seok-Won\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n        http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsangcomz%2Fstickytimeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsangcomz%2Fstickytimeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsangcomz%2Fstickytimeline/lists"}