{"id":27918391,"url":"https://github.com/imablanco/parallax","last_synced_at":"2025-05-06T18:21:56.676Z","repository":{"id":49316055,"uuid":"97520095","full_name":"imablanco/Parallax","owner":"imablanco","description":"Easy parallax View for Android simulating Apple TV App Icons","archived":false,"fork":false,"pushed_at":"2017-07-17T23:10:16.000Z","size":5161,"stargazers_count":297,"open_issues_count":0,"forks_count":33,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-31T12:48:10.280Z","etag":null,"topics":["appletv","parallax","parallaxview"],"latest_commit_sha":null,"homepage":null,"language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imablanco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-17T20:38:44.000Z","updated_at":"2024-07-30T09:14:19.000Z","dependencies_parsed_at":"2022-09-04T14:01:04.662Z","dependency_job_id":null,"html_url":"https://github.com/imablanco/Parallax","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imablanco%2FParallax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imablanco%2FParallax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imablanco%2FParallax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imablanco%2FParallax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imablanco","download_url":"https://codeload.github.com/imablanco/Parallax/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252741740,"owners_count":21797076,"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":["appletv","parallax","parallaxview"],"created_at":"2025-05-06T18:21:55.872Z","updated_at":"2025-05-06T18:21:56.668Z","avatar_url":"https://github.com/imablanco.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Parallax\nEasy parallax View for Android simulating Apple TV App Icons\n\n![alt tag](art/parallax.gif)\n## Installation\n\nParallax is available in the JCenter\n```gradle\ncompile 'com.ablanco.parallax:parallax:{latest version}'\n```\nwhere `{latest version}` corresponds to published version in JCenter [ ![Download](https://api.bintray.com/packages/ablanco/maven/parallax/images/download.svg) ](https://bintray.com/ablanco/maven/parallax/_latestVersion)\n\n## How does it work?\n\nParallax works by adding ParallaxView instances to a ParallaxContainer.\nEvery ParallaxView should have LayerView instances as children.\nTo make the parallax effect happens, ParallaxView uses LayerView (that are no other than FrameLayouts with extra functionality) instances\nand apply X/Y translations to them based on the index they have, where the smalles view index takes the greater parallax effect.\n\nTo start using Parallax, make your root view an instance of ParallaxContainer\n\n```xml\n\n    \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n    \u003ccom.ablanco.parallax.ParallaxContainer xmlns:android=\"http://schemas.android.com/apk/res/android\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\u003e\n\n    \u003c/com.ablanco.parallax.ParallaxContainer\u003e\n            \n```\n\nInside it, add instances of ParallaxView, where you can add instances of LayerView\n\n```xml\n\n\u003ccom.ablanco.parallax.ParallaxView\n        android:id=\"@+id/parallaxView\"\n        android:layout_width=\"300dp\"\n        android:layout_height=\"200dp\"\u003e\n\n        \u003ccom.ablanco.parallax.LayerView\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"match_parent\"\u003e\n            \n            ...\n        \u003c/com.ablanco.parallax.LayerView\u003e\n\n        \u003ccom.ablanco.parallax.LayerView\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"match_parent\"\n            app:useParallaxPadding=\"false\"\u003e\n            \n            ...\n        \u003c/com.ablanco.parallax.LayerView\u003e\n\n        \u003ccom.ablanco.parallax.LayerView\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"match_parent\"\u003e\n           \n            ...\n        \u003c/com.ablanco.parallax.LayerView\u003e\n\n\n    \u003c/com.ablanco.parallax.ParallaxView\u003e\n            \n```\nAs ParallaxView uses its LayerView index to apply parallax effect, the first LayerView added will be the farthest View from the user's perspective\n\nInstances of LayerView can be added from code too\n\n```kotlin\n     val layerView = LayerView(this)\n     layerView.addView(layerImage)\n     parallaxView.addLayer(layerView)    \n```\n\n## Customization\n\nParallaxView can be customized in varios ways:\n\n+ You can alternate between two touch modes: \n### PRESSED\nPressed touch mode will apply ParallaxView interaction as if the user were pressing the View, applying depth perspective rotation along user finger movement\n\n### LIFTED\nQuite the opposite to Pressed mode, ParallaxView will act as if it were sticky into user's finger, just like in Apple TV App Icons\n\n```xml\n    \u003ccom.ablanco.parallax.ParallaxView\n        android:id=\"@+id/parallaxView\"\n        android:layout_width=\"300dp\"\n        android:layout_height=\"200dp\"\n        app:touchMode=\"lifted|pressed\"/\u003e         \n```\n\nAvailable from code too\n\n```kotlin\n        parallaxView.touchMode = ParallaxView.TOUCH_MODE_LIFTED | ParallaxView.TOUCH_MODE_PRESSED\n```\n+ You can change the parallax movement distance too, with is by default 5dp. The higher the value, the higher the parallax effect will be\n\n```xml\n    \u003ccom.ablanco.parallax.ParallaxView\n        android:id=\"@+id/parallaxView\"\n        android:layout_width=\"300dp\"\n        android:layout_height=\"200dp\"\n        app:parallaxMovementDistance=\"10dp\"/\u003e       \n```\n\nAnd from code\n\n```kotlin\n        parallaxView.setParallaxMovementDistance(dstanceInPixels)\n```\n\n+ Last, but not least, you can change the behavior of the first layer from the user perspective. \nBy default, last layer added will no apply any parallax effect, but you can change this behavior:\n\n```xml\n    \u003ccom.ablanco.parallax.ParallaxView\n        android:id=\"@+id/parallaxView\"\n        android:layout_width=\"300dp\"\n        android:layout_height=\"200dp\"\n        app:firstLayerAppliesParallax=\"true|false by default\"/\u003e\n```\n\n```kotlin\n        parallaxView.firstLayerAppliesParallax(true)\n```\n\n## Hey we are not done yet!\n\nLayerView can be customized too by defining if its content will be padded. \nBecause ParallaxView applies translation movements to achieve parallax effect, LayerView instances applies negative margins by default to ensure the Layer border will never be visible.\nIf any of your layers does not need this behaviour you can disable it (think as background images, which usually fills all the content, as Layers that need to have this behavior enabled):\n\n```xml\n \u003ccom.ablanco.parallax.LayerView\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"match_parent\"\n            app:useParallaxPadding=\"false|true by default\"\u003e\n            ...\n        \u003c/com.ablanco.parallax.LayerView\u003e\n```\n\n```kotlin\n        LayerView(this).useParallaxPadding = false\n```\n\n## Now we are done!\n\nCheck out the sample app and do not forget to star this repo if you find it useful!\n\nLicense\n=======\n\n    Copyright 2017 Álvaro Blanco Cabrero\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%2Fimablanco%2Fparallax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimablanco%2Fparallax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimablanco%2Fparallax/lists"}