Image slider with dots indicator in Android:
In this example for show how to create Image slider with dots indicator on scrolling using gallery. Small dots will be highlighted when user moves the gallery images.
Dynamically we create a dots or little circles when the user scroll the images. so let's start
Dynamically we create a dots or little circles when the user scroll the images. so let's start
Step : 1 First you create a new project using Android Application with Eclipse ID
Step :2
create a activity_main.xml file and copy these code
create a activity_main.xml file and copy these code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent" >
<RelativeLayout android:id="@+id/gallery_paging"
android:layout_width="fill_parent"
android:layout_height="1200dp" >
<com.androidtoppers.slidingimage.Gallery_Activity
android:id="@+id/mygallery01"
android:layout_width="fill_parent"
android:layout_height="800dp"
android:fadingEdge="none" android:spacing="0px" />
<LinearLayout android:id="@+id/image_count"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#00000000"
android:gravity="center"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
|
create the Gallery_Activtiy java file extends gallery .It is used to Extended the gallery
image
package com.androidtoppers.slidingimage;
import android.content.Context;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.widget.Gallery;
public class Gallery_Activity extends Gallery{
private boolean stuck = false;
public Gallery_Activity(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public Gallery_Activity(Context context, AttributeSet attrs) {
super(context, attrs);
}
public Gallery_Activity(Context context) {
super(context);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
return stuck || super.onTouchEvent(event);
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
switch (keyCode) {
case KeyEvent.KEYCODE_DPAD_LEFT:
case KeyEvent.KEYCODE_DPAD_RIGHT:
return stuck || super.onKeyDown(keyCode, event);
}
return super.onKeyDown(keyCode, event);
}
public void setScrollingEnabled(boolean enabled) {
stuck = !enabled;
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY){
return super.onFling(e1, e2, 0, velocityY);
}
}
|
create the ImageAdapter java file and put all images into res->drawable folder
package com.androidtoppers.slidingimage;
import android.content.Context;
import android.content.res.TypedArray;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
public class ImageAdapter extends BaseAdapter
{
Context mycontext = null;
int galitembg = 0;
public int[] IMAGE_IDS = { R.drawable.image1, R.drawable.images2,
R.drawable.images3, R.drawable.images4,
R.drawable.images6};
public ImageAdapter(Context c)
{
mycontext = c;
TypedArray typArray = mycontext.obtainStyledAttributes(R.styleable.GalleryTheme);
galitembg = typArray.getResourceId(R.styleable.GalleryTheme_android_galleryItemBackground, 0);
typArray.recycle();
}
@Override
public int getCount()
{
return IMAGE_IDS.length;
}
@Override
public Object getItem(int position)
{
return position;
}
@Override
public long getItemId(int position)
{
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
ImageView imageview = new ImageView(mycontext);
imageview.setImageResource(IMAGE_IDS[position]);
imageview.setScaleType(ImageView.ScaleType.FIT_XY);
return imageview;
}
}
|
Step :5
put these code into MainActivtiy.java .In this class create dynamic view for dots in LinearLayout .Mention the size,color and styles
put these code into MainActivtiy.java .In this class create dynamic view for dots in LinearLayout .Mention the size,color and styles
package com.androidtoppers.slidingimage;
import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends Activity
{
LinearLayout count_layout;
TextView page_text[];
int count = 0;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Gallery_Activity mGallery = (Gallery_Activity) findViewById(R.id.mygallery01);
mGallery.setAdapter(new ImageAdapter(this));
mGallery.setScrollingEnabled(true);
count_layout = (LinearLayout) findViewById(R.id.image_count);
count = mGallery.getAdapter().getCount();
System.out.println("Gallery Image Count======>>>" + count);
page_text = new TextView[count];
for (int i = 0; i < count; i++)
{
page_text[i] = new TextView(this);
page_text[i].setText(".");
page_text[i].setTextSize(45);
page_text[i].setTypeface(null, Typeface.BOLD);
page_text[i].setTextColor(android.graphics.Color.GRAY);
count_layout.addView(page_text[i]);
}
mGallery.setOnItemSelectedListener(new OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view,
int pos, long id) {
// TODO Auto-generated method stub
System.out.println("Item Selected Position=======>>>" + pos);
for (int i = 0; i < count; i++) {
page_text[i]
.setTextColor(android.graphics.Color.GRAY);
}
page_text[pos]
.setTextColor(android.graphics.Color.WHITE);
}
@Override
public void onNothingSelected(AdapterView<?> arg0) {
}
});
}
}
|
put these code into res->values inside that create attr.xml file and put below code
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="GalleryTheme">
<attr name="android:galleryItemBackground" />
</declare-styleable>
</resources>
|
DOWNLOAD FULL SOURCE CODE
4 comments:
thanks a lot great work
Welcome
Thanks Nice tutorial. I want to animate image by 3ms. How do I achieve this.
Thanks working good i need one small help i need to increase the size of the image can you help me with that..!
Post a Comment