To integrate Jummania-Slider into your Android project, follow these steps:
Add the JitPack repository to your project's root settings.gradle
file:
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
maven { url = uri("https://jitpack.io") } //Add this line
}
}
Add the Jummania-Slider dependency to your app module's build.gradle
file:
dependencies {
implementation("com.github.Jumman04:Jummania-Slider:4.7")
}
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 Photo.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
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
JSlider jSlider = findViewById(R.id.jSlider);
jSlider.setSlider(new DefaultSlider());
}
//Out of onCreate, Create a Class for Slider
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 Photo.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;
}
}
The JSlider library provides a set of attributes that can be configured either in XML layout files or programmatically.
XML Attribute | Programmatic Attribute | Description |
---|---|---|
app:slidingDuration="integer" | setSlidingDuration(int) |
Duration for transitioning between slides, default: 2222 |
app:indicatorSize="dimension" | setIndicatorSize(int) |
Size of the indicator shape, default: 15 |
app:manualSlidable="true" | setManualSlidable(boolean) |
Enables or disables manual swipe. default: true |
setSliderPadding(int, int, int, int) |
Padding for the JSlider component - Top, default: 0, 0, 0, 0 | |
app:sliderPaddingTop="dimension" |
|
Padding for the JSlider component - Top, default: 0 |
app:sliderPaddingLeft="dimension" | Padding for the JSlider component - Left, default: 0 | |
app:sliderPaddingRight="dimension" | Padding for the JSlider component - Right, default: 0 | |
app:sliderPaddingBottom="dimension" | Padding for the JSlider component - Bottom, default: 0 | |
setIndicatorPadding(int, int, int, int) |
Padding for the indicator shape, default: 0, 0, 0, 55 | |
app:indicatorPaddingTop="dimension" |
|
Padding for the indicator shape - Top, default: 0 |
app:indicatorPaddingLeft="dimension" | Padding for the indicator shape - Left, default: 0 | |
app:indicatorPaddingRight="dimension" | Padding for the indicator shape - Right, default: 0 | |
app:indicatorPaddingBottom="dimension" | Padding for the indicator shape - Bottom, default: 25dp | |
app:indicatorMarginHorizontal="dimension" | setIndicatorMarginHorizontal(int) |
Horizontal margin between indicator shapes, default: 3 |
app:enableIndicator="boolean" | enableIndicator(boolean) |
Enable or disable the indicator display, default: true |
app:enableAutoSliding="boolean" | enableAutoSliding(boolean) |
Enable or disable auto-sliding functionality, default: true |
app:defaultIndicatorColor="color" | setDefaultIndicatorColor(int) |
Color for the Default indicator shape, default: "#80ffffff" |
app:selectedIndicatorColor="color" | setSelectedIndicatorColor(int) |
Color for the selected indicator shape, default: Color.WHITE |
app:indicatorUpdateMode="SYNC" | setIndicatorUpdateMode(updateType) |
Indicator Update Modes: SYNC, STATIC, ANIMATED, default: UpdateTypes.SYNC |
app:indicatorShapeTypes="CIRCLE" | setIndicatorShapeTypes(shapeType) |
Indicator Shape Types: CIRCLE, HEART, SQUARE, STAR, ShapeTypes.CIRCLE |
app:indicatorAlignment="ALIGN_BOTTOM" | setIndicatorAlignment(alignment) |
Indicator Alignment Options: ALIGN_LEFT, ALIGN_TOP, ALIGN_RIGHT, ALIGN_BOTTOM, ALIGN_CENTER, CENTER_HORIZONTAL, CENTER_VERTICAL, ALIGN_START, ALIGN_END, Alignment.BOTTOM |
app:indicatorGravity="center" | setIndicatorGravity(gravity) |
Indicator Gravity Options, default: Gravity.CENTER |
app:slideAnimation="DEFAULT" | jSlider.setSlideAnimation(animationType) |
Slide Animation Types: ANTI_CLOCK_SPIN, BACKGROUND_TO_FOREGROUND, CARD_STACK, CLOCK_SPIN, CUBE_IN_DEPTH, CUBE_IN_ROTATION, CUBE_IN_SCALING, CUBE_OUT_DEPTH, CUBE_OUT_ROTATION, CUBE_OUT_SCALING, CUBE_IN, CUBE_OUT, DEPTH_SLIDE, DEPTH_SLIDE2, DEPTH_TRANSFORMATION, DEPTH_ZOOM_OUT, FADEOUT, FADE_PAGE, FAN_TRANSFORMATION, FIDGET_SPINNER, FLIP_HORIZONTAL, FLIP_VERTICAL, FOREGROUND_TO_BACKGROUND, GATE, HINGE, POP, ROTATE_DOWN, ROTATE_UP, SPINNER, SPINNER_TRANSFORMATION, TABLET_SLIDE, TOSS, VERTICAL_FLIP, VERTICAL_SHUT, ZOOM_FADE, ZOOM_IN, ZOOM_OUT, DEFAULT, default: AnimationTypes.DEFAULT |
You can add an OnSlideChangeListener
to listen for slide change events. This listener provides
callbacks for different slide events.
jSlider.addOnSlideChangeListener(object : JSlider.OnSlideChangeListener {
override fun onSliderScrolled(
position: Int, positionOffset: Float, positionOffsetPixels: Int) {
}
override fun onSliderSelected(position: Int) {
}
override fun onSliderScrollStateChanged(state: Int) {
}
})
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.
- Click on the Issues tab.
- Click the green "New Issue" button.
- Fill in the requested information and submit the issue.
Thank you for helping us improve the library!