Giter Club home page Giter Club logo

androidsliderviewsample's Introduction

Android SliderView Sample App


This is a sample Android project to demonstrate how to use Android Slider Views library created by sung2063.
The sample app includes using of Horizontal and Vertical CarouselViews and SlideshowView.

๐Ÿ’– Sponsor

Android Slider Views library updates regularly. Your valuable sponsorship helps me contributing more features and maintaining the library. Support me for building more interesting projects! ๐Ÿ’œ

๐ŸŽฌ GIF Images

Horizontal Carousel Carousel w/ Custom Indicator Vertical Carousel

๐Ÿ”ข Instruction

  1. Clone the AndroidSliderViewSample repository to your local computer
  2. Open the project on Android Studio
  3. Run the program either on Android virtual device or your Android device

๐Ÿ“– How To Use Slider Views

1. Setup your Android project setting

Minimum SDK Version: 21 or greater (Update in your app level build.gradle)
Supported Programming Language: Java Add following snippet code in your project level build.gradle.

android {
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

2. Add required library

First, include following jitpack url inside maven block in your project level build.gradle.

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Next, add the SliderViews and required libraries in app level build.gradle and sync the gradle file.

implementation 'com.github.sung2063:AndroidSliderViewsLibrary:1.7'
implementation 'com.google.android.material:material:1.1.0'

Now you are ready to use SliderView Library. You can start creating CarouselView and SlideshowView.


CarouselView

CarouselView can be used for your application intro and show multiple images or videos in one layout with scrolling. CarouselView by Sliders library supports both horizontal and vertical scrolls.

First, create a CarouselView in your xml file.

<com.sung2063.sliders.carousel.CarouselView
        android:id="@+id/carousel_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:showIndicator="true"
        app:scrollDirection="horizontal"
        app:showSlideNumber="true" />

Set scrollDirection attribution to horizontal for creating horizontal carousel and vertical for vertical carousel.

In your onCreate() method in Activity, create your own custom layouts, add layouts to List, and start the carousel. You can add up to 10 layouts in the CarouselView.

From version 1.6, you can also include sub-title of each slides. In that case, you need to make DescriptiveSlideModel objects that holds slide layout and sub-title and add to List<DescriptiveSlideModel>. Also, do not forget to add app:showSubTitle="true" into your CarouselView in xml. The default is false.

CarouselView carouselView = findViewById(R.id.carousel_view);

// Create your own layouts...
// Create List<ViewGroup> object or List<DescriptiveSlideModel>...
// Add your layouts to list object...

carouselView.setSlideList(layoutList);
carouselView.launch();

Your CarouselView is now displayed on your app! ๐Ÿ‘


SlideshowView

SlideshowView can be used to show the multiple layouts by certain period of time. You can set how much time you want to show each layout to the user.

First, create a SlideshowView in your xml file.

<com.sung2063.sliders.slideshow.SlideshowView
        android:id="@+id/slideshow_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:showIndicator="true"
        app:delayTimePeriod="5"
        app:showSlideNumber="true" />

In your onCreate() method in Activity, create your own custom layouts, add layouts to List, and start the slideshow. You can add up to 10 layouts in the SlideshowView.

From version 1.6, you can also include sub-title of each slides. In that case, you need to make DescriptiveSlideModel objects that holds slide layout and sub-title and add to List<DescriptiveSlideModel>. Also, do not forget to add app:showSubTitle="true" into your SlideshowView in xml. The default is false.

SlideshowView slideshowView = findViewById(R.id.slideshow_view);

// Create your own layouts...
// Create List<ViewGroup> object or List<DescriptiveSlideModel>...
// Add your layouts to list object...

slideshowView.setSlideList(layoutList);
slideshowView.launch();

Your SlideshowView is now displayed on your app! ๐Ÿ‘


Add Callback Action

You can also get callback from slider when it is clicked. On your Activity, create a SliderListener object with implementing own action and pass this object to the view by calling setSliderListener. Here is the snippet code how to implement the callback:

// Create a callback interface
SliderListener sliderListener = position -> {
     // TODO: Do something when slide is clicked
};

// Set callback object to the View
carouselView.setSliderListener(sliderListener);    // If you are using Carousel
slideshowView.setSliderListener(sliderListener);   // If you are using Slideshow

๐ŸŽจ Attributions

Here are available attributions you can use to modify your slider views.

CarouselView

Attribution Value Description
scrollDirection horizontal Display the carousel horizontally. Field value is 0.
vertical Display the carousel vertically. Field value is 1.
showIndicator boolean Show the dot indicator on the slide if the value true, otherwise do not show.
indicatorScale float Used for resize the indicator scale from 0.5 - 1.5.
indicatorSelectedIcon integer Selected indicator icon drawable id.
indicatorUnselectedIcon integer Unselected indicator icon drawable id.
showSlideNumber boolean Show the slide number text if the value is true, otherwise do not show.
slideNumberTextSize int Set the slide number text size in px.
showSubTitle boolean Show the sub-title if the value is true, otherwise do not show.

SlideshowView

Attribution Value Description
showIndicator boolean Show the dot indicator on the slide if the value true, otherwise do not show.
indicatorScale float Used for resize the indicator scale from 0.5 - 1.5.
indicatorSelectedIcon integer Selected indicator icon drawable id.
indicatorUnselectedIcon integer Unselected indicator icon drawable id.
showSlideNumber boolean Show the slide number text if the value is true, otherwise do not show.
slideNumberTextSize int Set the slide number text size in px.
delayTimePeriod int The slide delay time in second. Default is 5 seconds.
showSubTitle boolean Show the sub-title if the value is true, otherwise do not show.

๐Ÿ“š Library

AndroidSlidersView library by @sung2063

๐ŸŒŸ Contributor

Sung Hyun Back (@sung2063)

androidsliderviewsample's People

Contributors

sung2063 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.