{"id":18521561,"url":"https://github.com/transferwise/sequence-layout","last_synced_at":"2025-04-12T14:19:05.633Z","repository":{"id":30955010,"uuid":"125848356","full_name":"transferwise/sequence-layout","owner":"transferwise","description":"A vertical sequence UI component for Android","archived":false,"fork":false,"pushed_at":"2023-12-25T12:06:05.000Z","size":271,"stargazers_count":481,"open_issues_count":8,"forks_count":59,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-04-03T13:16:46.959Z","etag":null,"topics":["android","layout","progress-bar"],"latest_commit_sha":null,"homepage":null,"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/transferwise.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":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-19T11:38:50.000Z","updated_at":"2025-03-02T17:35:43.000Z","dependencies_parsed_at":"2023-02-10T10:30:28.785Z","dependency_job_id":"e2d4974f-c34b-460e-8445-3fc062886cd1","html_url":"https://github.com/transferwise/sequence-layout","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transferwise%2Fsequence-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transferwise%2Fsequence-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transferwise%2Fsequence-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transferwise%2Fsequence-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/transferwise","download_url":"https://codeload.github.com/transferwise/sequence-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248578876,"owners_count":21127714,"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","layout","progress-bar"],"created_at":"2024-11-06T17:26:31.981Z","updated_at":"2025-04-12T14:19:05.612Z","avatar_url":"https://github.com/transferwise.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sequence-layout [![](https://jitpack.io/v/transferwise/sequence-layout.svg)](https://jitpack.io/#transferwise/sequence-layout)\n\u003cimg align=\"right\" src=\"https://media.giphy.com/media/TGaDOPfTrX749uhD0L/giphy.gif\"\u003e\nA vertical sequence UI component for Android.\n\nAnimates a progress bar to the first active step in the sequence and then periodically runs a pulse animation on that step.\n\n## Setup\n\nAdd the JitPack maven repository to your root `build.gradle`:\n```groovy\nallprojects {\n    repositories {\n      maven { url \"https://jitpack.io\" }\n    }\n}\n```\n\nAnd then the actual library dependency to your module's `build.gradle`:\n\n```groovy\ndependencies {\n    implementation 'com.github.transferwise:sequence-layout:... // use latest version'\n}\n```\n\n## Usage\n\nTake a look at the `sample` app in this repository.\n\n### In XML layout\nYou can define steps in your XML layout:\n\n```xml\n\u003ccom.transferwise.sequencelayout.SequenceLayout\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\u003e\n\n    \u003ccom.transferwise.sequencelayout.SequenceStep\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        app:anchor=\"30 Nov\"\n        app:title=\"First step\"/\u003e\n\n    \u003ccom.transferwise.sequencelayout.SequenceStep\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        app:title=\"Second step\"/\u003e\n\n    \u003ccom.transferwise.sequencelayout.SequenceStep\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        app:active=\"true\"\n        app:anchor=\"Today\"\n        app:subtitle=\"Subtitle of this step.\"\n        app:title=\"Third step\"\n        app:titleTextAppearance=\"@style/TextAppearance.AppCompat.Title\"/\u003e\n\n    \u003ccom.transferwise.sequencelayout.SequenceStep\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        app:title=\"Fourth step\"/\u003e\n\n    \u003ccom.transferwise.sequencelayout.SequenceStep\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        app:anchor=\"2 Dec\"\n        app:title=\"Fifth step\"/\u003e\n\u003c/com.transferwise.sequencelayout.SequenceLayout\u003e\n```\n\nCustom attributes for `SequenceLayout`:\n\n| Attribute | Description |\n| --- | --- |\n| `progressForegroundColor` | foreground color of the progress bar |\n| `progressBackgroundColor` | background color of the progress bar |\n\nCustom attributes for `SequenceStep`:\n\n| Attribute | Description |\n| --- | --- |\n| `active` | boolean to indicate if step is active. There should only be one active step per `SequenceLayout`. |\n| `anchor` | text for the left side of the step |\n| `anchorMinWidth` | minimum width for the left side of the step |\n| `anchorMaxWidth` | maximum width for the left side of the step |\n| `anchorTextAppearance` | styling for the left side of the step |\n| `title` | title of the step |\n| `titleTextAppearance` | styling for the title of the step |\n| `subtitle` | subtitle of the step |\n| `subtitleTextAppearance` | styling for the subtitle of the step |\n\n### Programmatically\n\nAlternatively, define an adapter that extends `SequenceAdapter\u003cT\u003e`, like this:\n\n```kotlin\nclass MyAdapter(private val items: List\u003cMyItem\u003e) : SequenceAdapter\u003cMyAdapter.MyItem\u003e() {\n\n    override fun getCount(): Int {\n        return items.size\n    }\n\n    override fun getItem(position: Int): MyItem {\n        return items[position]\n    }\n\n    override fun bindView(sequenceStep: SequenceStep, item: MyItem) {\n        with(sequenceStep) {\n            setActive(item.isActive)\n            setAnchor(item.formattedDate)\n            setAnchorTextAppearance(...)\n            setTitle(item.title)\n            setTitleTextAppearance()\n            setSubtitle(...)\n            setSubtitleTextAppearance(...)\n        }\n    }\n\n    data class MyItem(val isActive: Boolean,\n                      val formattedDate: String,\n                      val title: String)\n}\n```\n\n... and use it for a `SequenceLayout`:\n\n```kotlin\nval items = listOf(MyItem(...), MyItem(...), MyItem(...))\nsequenceLayout.setAdapter(MyAdapter(items))\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftransferwise%2Fsequence-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftransferwise%2Fsequence-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftransferwise%2Fsequence-layout/lists"}