Saturday, 16 April 2016

Android Image Slider

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:
 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