CarouselView

Additional

Language
Java
Version
N/A
Created
Mar 15, 2016
Updated
Jul 7, 2018
Owner
Sayyam Mehmood (sayyam)
Contributors
Boris Korogvich (VEINHORN)
Nutomic
mrehan27
Sayyam Mehmood (sayyam)
longstone
foxsake
renaudlenne
leonardo2204
jaesga
ukonpete
CalebMacdonaldBlack
mfsi-raghavg
Alexey (appspell)
flibbertigibbet
14
Activity
Badge
Generate
Download
Source code
APK file

Promotion

CarouselView

A simple yet flexible library to add carousel view in your android application.

Download

Gradle:

compile 'com.synnapps:carouselview:0.1.5'

Maven:

<dependency>
  <groupId>com.synnapps</groupId>
  <artifactId>carouselview</artifactId>
  <version>0.1.5</version>
  <type>pom</type>
</dependency>

Usage

Include following code in your layout:

    <com.synnapps.carouselview.CarouselView
        android:id="@+id/carouselView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:fillColor="#FFFFFFFF"
        app:pageColor="#00000000"
        app:radius="6dp"
        app:slideInterval="3000"
        app:strokeColor="#FF777777"
        app:strokeWidth="1dp"/>

Include following code in your activity:

public class SampleCarouselViewActivity extends AppCompatActivity {

    CarouselView carouselView;

    int[] sampleImages = {R.drawable.image_1, R.drawable.image_2, R.drawable.image_3, R.drawable.image_4, R.drawable.image_5};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sample_carousel_view);

        carouselView = (CarouselView) findViewById(R.id.carouselView);
        carouselView.setPageCount(sampleImages.length);

        carouselView.setImageListener(imageListener);
    }

    ImageListener imageListener = new ImageListener() {
        @Override
        public void setImageForPosition(int position, ImageView imageView) {
            imageView.setImageResource(sampleImages[position]);
        }
    };

}

If you want to add custom view, implement ViewListener.

public class SampleCarouselViewActivity extends AppCompatActivity {

    CarouselView customCarouselView;
    int NUMBER_OF_PAGES = 5;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sample_carousel_view);

        customCarouselView = (CarouselView) findViewById(R.id.customCarouselView);
        customCarouselView.setPageCount(NUMBER_OF_PAGES);
        // set ViewListener for custom view 
        customCarouselView.setViewListener(viewListener);
    }

    ViewListener viewListener = new ViewListener() {
    
        @Override
        public View setViewForPosition(int position) {
            View customView = getLayoutInflater().inflate(R.layout.view_custom, null);
            //set view attributes here
            
            return customView;
        }
    };

If you'd like to receive touch events for each image

customCarouselView.setImageClickListener(new ImageClickListener() {
            @Override
            public void onClick(int position) {
                Toast.makeText(SampleCarouselViewActivity.this, "Clicked item: "+ position, Toast.LENGTH_SHORT).show();
            }
        });

If using ProGuard add this line to your proguard-rules.pro:

-keep class com.synnapps.carouselview.** { *; }

Supported xml Attributes

Attribute Description Values
app:slideInterval Interval per page in ms. integer
app:indicatorGravity Gravity of the indicator. (Just like layout_gravity) gravity
app:indicatorOrientation Orientation of the indicator. [horizontal, vertical]
app:indicatorVisibility Set visibility of indicator. [visible,invisible,gone]
app:fillColor Color of the filled circle that represents the current page. color
app:pageColor Color of the filled circles that represents pages. color
app:radius Radius of the circles. This is also the spacing between circles. dimension
app:snap Whether or not the selected indicator snaps to the circles. boolean
app:strokeColor Width of the stroke used to draw the circles. color
app:autoPlay Whether or not to auto play. Default: true boolean
app:disableAutoPlayOnUserInteraction Disables autoPlay when user interacts. Default: false boolean
app:indicatorMarginHorizontal Sets horizontal margin for Indicator in Carousel View dimension
app:indicatorMarginVertical Sets vertical margin for Indicator in Carousel View dimension
app:pageTransformInterval Sets speed at which page will slide from one to another in ms. integer
app:pageTransformer Sets page transition animation. [zoom,flow,depth,slide_over]
app:animateOnBoundary Sets whether to animate from last page. Default: true boolean

Note: Add xmlns:app="http://schemas.android.com/apk/res-auto" in your layout's root view.

Developed By

  • Sayyam Mehmood
  • Muhammad Rehan

Special Thanks

This library uses code snippet from Jake Wharton's ViewPagerIndicator to display page indicator.

License

Copyright 2016 Sayyam.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and 
limitations under the License.