J-Slider for Android!

Easy to use.

Smooth sliding transitions.

Customizable indicator size, colors, and shapes.

Auto-sliding functionality.

Slide with a variety of 38+ different animations.

Ability to add your own custom animation.

Indicator alignment and gravity customization.

Use with Java or Kotlin.

---

Setup

To integrate Jummania-Slider into your Android project, follow these steps:

Step 1: Add JitPack Repository

Add the JitPack repository to your project's root settings.gradle file:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

Step 2: Add the Dependency

Add the Jummania-Slider dependency to your app module's build.gradle file:

---

For Kotlin

dependencies {
  implementation 'com.github.Jumman04:Jummania-Slider:3.6'
}

---

For Java

dependencies {
  implementation 'com.github.Jumman04:Jummania-Slider:3.5'
}

Note for Java Developers:

Our latest library may not be fully compatible with Java. You can still use it, but be aware of potential issues.

---

Usage

---

XML

    <com.jummania.JSlider 
        android:id="@+id/jSlider" 
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

---

For Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val jSlider: JSlider = findViewById(R.id.jSlider)
    jSlider.setSlider(DefaultSlider())

}

//Out of onCreate, Create a Class for Slider
private inner class DefaultSlider : JSlider.DefaultSlider() {
    override fun getView(layoutInflater: LayoutInflater, parent: ViewGroup): View {
        return layoutInflater.inflate(R.layout.item_slider2, parent, false) //Inflate you layout
    }

    override fun onSliderCreate(view: View, position: Int) {

        val textView: TextView = view.findViewById(R.id.text_view) //find your child
        val imageView: ImageView = view.findViewById(R.id.image_view)

        Picasso.get()
            .load("https://jummania.com/App/BanglaNatokSamahar/Images/Cover%20Photo.jpg")
            .error(R.drawable.default_error).placeholder(R.drawable.default_loading)
            .into(imageView)

        textView.text = getString(R.string.Developer_Name)

        view.setOnClickListener {
            //Apply your click Listener
        }


    }

    override fun getCount(): Int {
        return 3
    }

}

---

For Java

public class MainActivity extends AppCompatActivity {

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

       JSlider jSlider = findViewById(R.id.jSlider);
       jSlider.setSlider(new DefaultSlider());
   }

   private class DefaultSlider extends JSlider.DefaultSlider {
       @Override
       public View getView(LayoutInflater layoutInflater, ViewGroup parent) {
           return layoutInflater.inflate(R.layout.item_slider2, parent, false);
       }

       @Override
       public void onSliderCreate(View view, int position) {
           TextView textView = view.findViewById(R.id.text_view);
           ImageView imageView = view.findViewById(R.id.image_view);

           Picasso.get()
                   .load("https://jummania.com/App/BanglaNatokSamahar/Images/Cover%20Photo.jpg")
                   .error(R.drawable.default_error)
                   .placeholder(R.drawable.default_loading)
                   .into(imageView);

           textView.setText(getString(R.string.Developer_Name));

           view.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                   // Apply your click listener logic
               }
           });
       }

       @Override
       public int getCount() {
           return 3;
       }
   }
}

---

Customization

---

XML Attributes

• Change Duration of Sliding:

app:slidingDuration="2222"

• Change Indicator Size:

app:indicatorSize="15dp"

• Add Padding in Slider:

app:sliderPaddingRight="0dp"
app:sliderPaddingLeft="0dp"
app:sliderPaddingTop="0dp"
app:sliderPaddingBottom="0dp"

• Change Indicator Padding:

app:indicatorPaddingTop="0dp"
app:indicatorPaddingLeft="0dp"
app:indicatorPaddingRight="0dp"
app:indicatorPaddingBottom="22dp"

• Change Indicator Margin Horizontal:

app:indicatorMarginHorizontal="3dp"

• Hide or Show Indicator:

app:enableIndicator="true"

• Enable or Disable Auto Sliding:

app:enableAutoSliding="true"

• Change Default Indicator Color:

app:defaultIndicatorColor="@color/defaultColor"

• Change Selected Indicator Color:

app:selectedIndicatorColor="@color/selectedColor"

• Choose How the Indicator Updates:

app:indicatorUpdateMode="SYNC"

• Set the Alignment of the Indicator:

app:indicatorAlign="ALIGN_BOTTOM"

• Specify the Gravity of the Indicator:

app:indicatorGravity="center"

• Set Indicator Shape Type:

app:shapeTypes="CIRCLE"

    <!-- Choose one of the following options for the shape type: CIRCLE, HEART, SQUARE, or STAR. -->

• Set Slide Animation:

app:slideAnimation="CUBE_OUT"

---

For Kotlin

• Set the sliding duration:

setSlidingDuration(2222)

• Set the indicator size:

setIndicatorSize(15)

• Set the indicator colors:

setIndicatorColor(defaultColor, selectedColor)

• Enable or disable the indicator:

enableIndicator(true)

• Enable or disable auto-sliding:

enableAutoSliding(true)

• Set a custom page transformer:

setPageTransformer(true, PageTransformer())

• Set padding for the slider:

setSliderPadding(left, top, right, bottom)

• Set horizontal margin for the indicator dots:

setIndicatorMarginHorizontal(3)

• To start or stop auto-sliding:

startAutoSliding()
stopAutoSliding()

• Slide to the next and previous page:

slideNext()
slidePrevious()

• Check if the slider is currently sliding:

isSliding()

• Set padding for the indicator dots programmatically:

setIndicatorPadding(left, top, right, bottom)

• Set the gravity for both the dot indicators:

setIndicatorGravity(Gravity.BOTTOM)

• Set the alignment for both the dot indicators:

setIndicatorAlignment(Alignment.BOTTOM)

• Set the indicator update mode:

setIndicatorUpdateMode(UpdateMode.SYNC)

• Set the indicator shape types programmatically:

setIndicatorShapeTypes(ShapeTypes.CIRCLE)

• You can add animation like that, 38 Animations added. You can check in Animation List

jSlider.setSlideAnimation(AnimationTypes.ZOOM_OUT)

• You can add 'addOnSlideChangeListener' if you really need

 jSlider.addOnSlideChangeListener(object : JSlider.OnSlideChangeListener {
    override fun onSliderScrolled(
        position: Int, positionOffset: Float, positionOffsetPixels: Int
    ) {
        Log.d(
            "JSlider",
            "position: $position, positionOffset: $positionOffset, positionOffsetPixels: $positionOffsetPixels"
        )
    }

    override fun onSliderSelected(position: Int) {
        Log.d("JSlider", "position: $position")
    }

    override fun onSliderScrollStateChanged(state: Int) {
        Log.d("JSlider", "state: $state")
    }

})

• If you want to Reverse-less slide:

 private inner class InfinitySlider : JSlider.InfinitySlider() {
    override fun itemCount(): Int {
        return 3
    }

    override fun getView(layoutInflater: LayoutInflater, parent: ViewGroup): View {
        return layoutInflater.inflate(R.layout.item_slider2, parent, false) //Inflate you layout
    }

    override fun onSliderCreate(view: View, position: Int) {
        val textView: TextView = view.findViewById(R.id.text_view) //find your child
        val imageView: ImageView = view.findViewById(R.id.image_view)

        Picasso.get()
            .load("https://jummania.com/App/BanglaNatokSamahar/Images/Cover%20Photo.jpg")
            .error(R.drawable.default_error).placeholder(R.drawable.default_loading)
            .into(imageView)

        textView.text = getString(R.string.Developer_Name)

        view.setOnClickListener {

            Toast.makeText(
                this@MainActivity, getString(R.string.Developer_Name), Toast.LENGTH_SHORT
            ).show()
        }
    }

}

---

For Java

• Set the sliding duration:

setSlidingDuration(2222);

• Set the indicator size:

setIndicatorSize(15);

• Set the indicator colors:

setIndicatorColor(defaultColor, selectedColor);

• Enable or disable the indicator:

enableIndicator(true);

• Enable or disable auto-sliding:

enableAutoSliding(true);

• Set a custom page transformer:

setPageTransformer(true, PageTransformer());

• Set padding for the slider:

setSliderPadding(left, top, right, bottom);

• Set horizontal margin for the indicator dots:

setIndicatorMarginHorizontal(3);

• To start or stop auto-sliding:

startAutoSliding();
stopAutoSliding();

• Slide to the next and previous page:

slideNext();
slidePrevious();

• Check if the slider is currently sliding:

isSliding();

• Set padding for the indicator dots programmatically:

setIndicatorPadding(left, top, right, bottom);

• Set the gravity for both the dot indicators:

setIndicatorGravity(Gravity.BOTTOM);

• Set the alignment for both the dot indicators:

setIndicatorAlignment(Alignment.BOTTOM);

• Set the indicator update mode:

setIndicatorUpdateMode(indicatorUpdateMode.SYNC);

• Set the indicator shape types programmatically:

setIndicatorShapeTypes(indicatorShapeTypes.CIRCLE);

• You can add animation like that, 38 Animations added. You can check in Animation List

jSlider.setSlideAnimation(AnimationTypes.ZOOM_OUT);

• You can add 'addOnSlideChangeListener' if you really need

jSlider.addOnSlideChangeListener(new JSlider.OnSlideChangeListener() {
    @Override
    public void onSliderScrolled(int position, float positionOffset, int positionOffsetPixels) {
        Log.d("JSlider", "position: " + position + ", positionOffset: " + positionOffset +
                ", positionOffsetPixels: " + positionOffsetPixels);
    }

    @Override
    public void onSliderSelected(int position) {
        Log.d("JSlider", "position: " + position);
    }

    @Override
    public void onSliderScrollStateChanged(int state) {
        Log.d("JSlider", "state: " + state);
    }
});

• If you want to Reverse-less slide:

private class InfinitySlider extends JSlider.InfinitySlider {
    @Override
    public int itemCount() {
        return 3;
    }

    @Override
    public View getView(LayoutInflater layoutInflater, ViewGroup parent) {
        return layoutInflater.inflate(R.layout.item_slider2, parent, false);
    }

    @Override
    public void onSliderCreate(View view, int position) {
        TextView textView = view.findViewById(R.id.text_view);
        ImageView imageView = view.findViewById(R.id.image_view);

        Picasso.get()
                .load("https://jummania.com/App/BanglaNatokSamahar/Images/Cover%20Photo.jpg")
                .error(R.drawable.default_error)
                .placeholder(R.drawable.default_loading)
                .into(imageView);

        textView.setText(getString(R.string.Developer_Name));

        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, getString(R.string.Developer_Name),
                        Toast.LENGTH_SHORT).show();
            }
        });
    }
}

---

Feature Requests

If you have a feature request or a suggestion for improving this library, please feel free to open an issue and let us know! We appreciate your feedback and are always looking to make our library better.

How to Request a Feature

1. Click on the Issues tab.
2. Click the green "New Issue" button.
3. Choose the "Feature Request" template.
4. Fill in the requested information and submit the issue.

Thank you for helping us improve the library!

---

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details.

---