Hello fellas, recently i have to implement an image slider in android. After googling for a while I found a really nice n cool image slider for android, it has a lot of animations and easily adaptable to any layout. Now its really simple to implement an Image Slider in your android app. Just follow the below steps:
*For eclipse users download this complete project , download.
*For Android Studio users sync the below dependencies:
After Adding the above dependencies( attaching library in Eclipse) follow the below steps:
1. Add the below code to your MainActivity.java
Note: You can change the animation by replacing new DescriptionAnimation() in mySlider.setCustomAnimation(new DescriptionAnimation()); . Also You change the duration of animation in mySlider.setDuration(4000);
2. Add the below xml code to your activity_main.xml layout file:
Don't forget to add images namely one.png, two.png, three.png, four.png in your res=>drawable folder.
That's all, if everything goes right run app to see the magic!
*For eclipse users download this complete project , download.
*For Android Studio users sync the below dependencies:
dependencies {
compile "com.android.support:support-v4:+"
compile 'com.squareup.picasso:picasso:2.3.2'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.daimajia.slider:library:1.1.5@aar'
}
After Adding the above dependencies( attaching library in Eclipse) follow the below steps:
1. Add the below code to your MainActivity.java
public class MainActivity extends ActionBarActivity implements BaseSliderView.OnSliderClickListener, ViewPagerEx.OnPageChangeListener{
private SliderLayout mySlider;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mySlider = (SliderLayout)findViewById(R.id.slider);
HashMap<String,Integer> file_maps = new HashMap<String, Integer>();
file_maps.put("image One",R.drawable.one);
file_maps.put("image two",R.drawable.two);
file_maps.put("image three",R.drawable.three);
file_maps.put("image four", R.drawable.four);
for(String name : file_maps.keySet()){
TextSliderView textSliderView = new TextSliderView(this);
// initialize a SliderLayout
textSliderView
.description(name)
.image(file_maps.get(name))
.setScaleType(BaseSliderView.ScaleType.Fit)
.setOnSliderClickListener(this);
//add your extra information
textSliderView.bundle(new Bundle());
textSliderView.getBundle()
.putString("extra",name);
mySlider.addSlider(textSliderView);
}
mySlider.setPresetTransformer(SliderLayout.Transformer.Accordion);
mySlider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
mySlider.setCustomAnimation(new DescriptionAnimation());
mySlider.setDuration(4000);
mySlider.addOnPageChangeListener(this);
}
@Override
protected void onStop() {
// To prevent a memory leak on rotation, make sure to call stopAutoCycle() on the slider before activity or fragment is destroyed
mySlider.stopAutoCycle();
super.onStop();
}
@Override
public void onSliderClick(BaseSliderView slider) {
Toast.makeText(this,slider.getBundle().get("extra") + "",Toast.LENGTH_SHORT).show();
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}
@Override
public void onPageSelected(int position) {
Log.d("Slider Demo", "Page Changed: " + position);
}
@Override
public void onPageScrollStateChanged(int state) {}
}
Note: You can change the animation by replacing new DescriptionAnimation() in mySlider.setCustomAnimation(new DescriptionAnimation()); . Also You change the duration of animation in mySlider.setDuration(4000);
2. Add the below xml code to your activity_main.xml layout file:
<!--Add the Slider to your layout:-->
<com.daimajia.slider.library.SliderLayout
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="200dp"
/>
<!--There are some default indicators. If you want to use a provided indicator:-->
<com.daimajia.slider.library.Indicators.PagerIndicator
android:id="@+id/custom_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
/>
Don't forget to add images namely one.png, two.png, three.png, four.png in your res=>drawable folder.
That's all, if everything goes right run app to see the magic!
No comments:
Post a Comment