carousel.setAdapter(object:Carousel.Adapter{overridefuncount():Int{// Return the number of items in the Carousel.}overridefunpopulate(view:View,index:Int){// Implement this to populate the view at the given index.}overridefunonNewItem(index:Int){// Called when an item is set.}})
Java
carousel.setAdapter(newCarousel.Adapter(){@Overridepublicintcount(){// Return the number of items in the Carousel.}@Overridepublicvoidpopulate(Viewview,intindex){// Populate the view at the given index.}@OverridepublicvoidonNewItem(intindex){// Called when an item is set.}});
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-08-26 UTC。"],[],[],null,["Try the Compose way \nJetpack Compose is the recommended UI toolkit for Android. Learn how to add a carousel in Compose. \n[Carousel →](/develop/ui/compose/components/carousel) \n\n\u003cbr /\u003e\n\n[`Carousel`](/reference/androidx/constraintlayout/helper/widget/Carousel) is a\nmotion helper object to build custom carousel views that show a list of elements\nthat the user can skim through. Compared to other ways to implement such\nviews, this helper lets you quickly create complex motion and dimension changes\nfor your `Carousel` by taking advantage of\n[`MotionLayout`](/reference/androidx/constraintlayout/motion/widget/MotionLayout).\n**Figure 1.** Example of a `Carousel` showing landscape pictures.\n\nThe `Carousel` widget supports lists with a start and end as well as circular\nwrap-around lists.\n| **Note:** For a more hands-on approach, see the [CarouselExperiments sample project](https://github.com/androidx/constraintlayout/tree/main/projects/CarouselExperiments) on GitHub.\n\nHow Carousel with MotionLayout works\n\nSuppose you want to build a horizontal `Carousel` view, with the center item\nenlarged:\n**Figure 2.** Example of an image `Carousel` showing a larger image in the center.\n\nThis basic layout contains several views representing the `Carousel` items:\n**Figure 3.** Widget details.\n\nCreate a `MotionLayout` with the following three states and give them IDs:\n\n- **previous**\n- **start**\n- **next**\n\nIf the **start** state corresponds to the base layout, in the **previous** state\nand the **next** state the `Carousel` items are shifted by one to the left and\nto the right, respectively.\n\nFor example, take the five views in figure 3 and assume that in the **start**\nstate, views B, C, and D are visible, and A and E are outside of the screen. Set\nup the **previous** state so that the positions of A, B, C, and D are where B,\nC, D, and E were, with the views moving from left to right. In the **next**\nstate, the opposite needs to happen, with B, C, D, and E moving to where A, B,\nC, and D were, and the views moving from right to left. This is shown in figure\n4:\n**Figure 4.** `Carousel` swiping transitions.\n\nIt's critical that the views end up exactly where the original views start.\n`Carousel` gives the illusion of an infinite collection of elements by\nmoving the *actual* views back to where they were, but reinitializing them\nwith the new matching content. The following diagram shows this mechanism. Pay\nattention to the \"item #\" values):\n**Figure 5.** `Carousel` swiping transitions and state reset.\n\nTransitions\n\nWith these three constraint sets defined in your motion scene file, create two\ntransitions---forward and backward---between the **start** and **next**\nstates and the **start** and **previous** states. Add an\n[`OnSwipe`](/training/constraint-layout/motionlayout/ref/onswipe) handler to\ntrigger the transitions in response to a gesture, as shown in the following\nexample: \n\n \u003cTransition\n motion:constraintSetStart=\"@id/start\"\n motion:constraintSetEnd=\"@+id/next\"\n motion:duration=\"1000\"\n android:id=\"@+id/forward\"\u003e\n \u003cOnSwipe\n motion:dragDirection=\"dragLeft\"\n motion:touchAnchorSide=\"left\" /\u003e\n \u003c/Transition\u003e\n\n \u003cTransition\n motion:constraintSetStart=\"@+id/start\"\n motion:constraintSetEnd=\"@+id/previous\"\n android:id=\"@+id/backward\"\u003e\n \u003cOnSwipe\n motion:dragDirection=\"dragRight\"\n motion:touchAnchorSide=\"right\" /\u003e\n \u003c/Transition\u003e\n\nAdd the Carousel\n\nAfter this basic motion scene is created, add a `Carousel` helper to the layout\nand reference the views in the same order you implement your previous and next\nanimation.\n\nSet the following attributes for the `Carousel` helper:\n\n- `app:carousel_firstView`: the view that represents the first element of the `Carousel`---in this example, C.\n- `app:carousel_previousState`: the `ConstraintSet` ID of the **previous** state.\n- `app:carousel_nextState`: the `ConstraintSet` ID of the **next** state.\n- `app:carousel_backwardTransition`: the [`Transition`](/reference/androidx/constraintlayout/motion/widget/MotionLayout#transition) ID applied between the **start** and **previous** states.\n- `app:carousel_forwardTransition`: the `Transition` ID applied between the **start** and **next** states.\n\nFor example, you have something like this in your layout XML file: \n\n \u003candroidx.constraintlayout.motion.widget.MotionLayout ... \u003e\n\n \u003cImageView android:id=\"@+id/imageView0\" .. /\u003e\n \u003cImageView android:id=\"@+id/imageView1\" .. /\u003e\n \u003cImageView android:id=\"@+id/imageView2\" .. /\u003e\n \u003cImageView android:id=\"@+id/imageView3\" .. /\u003e\n \u003cImageView android:id=\"@+id/imageView4\" .. /\u003e\n\n \u003candroidx.constraintlayout.helper.widget.Carousel\n android:id=\"@+id/carousel\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n app:carousel_forwardTransition=\"@+id/forward\"\n app:carousel_backwardTransition=\"@+id/backward\"\n app:carousel_previousState=\"@+id/previous\"\n app:carousel_nextState=\"@+id/next\"\n app:carousel_infinite=\"true\"\n app:carousel_firstView=\"@+id/imageView2\"\n app:constraint_referenced_ids=\"imageView0,imageView1,imageView2,imageView3,imageView4\" /\u003e\n\n \u003c/androidx.constraintlayout.motion.widget.MotionLayout\u003e\n\nSet up a `Carousel` adapter in code: \n\nKotlin \n\n```kotlin\ncarousel.setAdapter(object : Carousel.Adapter {\n override fun count(): Int {\n // Return the number of items in the Carousel.\n }\n\n override fun populate(view: View, index: Int) {\n // Implement this to populate the view at the given index.\n }\n\n override fun onNewItem(index: Int) {\n // Called when an item is set.\n }\n })\n```\n\nJava \n\n```java\ncarousel.setAdapter(new Carousel.Adapter() {\n @Override\n public int count() {\n // Return the number of items in the Carousel.\n }\n\n @Override\n public void populate(View view, int index) {\n // Populate the view at the given index.\n }\n\n @Override\n public void onNewItem(int index) {\n // Called when an item is set.\n }\n });\n```\n\nAdditional notes\n\nDepending on the current item \"selected\" in the `Carousel`, the views\nrepresenting the items before or after might need to be hidden to correctly\naccount for the `Carousel` **start** and **end** . The `Carousel` helper handles\nthis automatically. By default, it marks those views as `View.INVISIBLE` in\nthese situations, so the overall layout doesn't change.\n\nAn alternative mode is available in which the `Carousel` helper instead marks\nthose views as `View.GONE`. You can set this mode using the following property: \n\n app:carousel_emptyViewsBehavior=\"gone\"\n\nExamples\n\nFor more examples using the Carousel helper, see the\n[example projects](https://github.com/androidx/constraintlayout/tree/main/projects/CarouselExperiments)\non GitHub."]]
