Create Gallery with HoritzontalScrollView Android

Question

I'm trying to do a gallery of ImageViews but with HortizontalScrollView, because gallery is deprecated and it does not work well. But I don't find the form for slide the images like Gallery. I have done this code: - xml file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/backgroundColor"
android:id="@+id/general"
tools:context="com.mappleapps.tm2ibz.Activity.PoblacionsActivity">

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="198dp"
    android:id="@+id/layGalMap">
    <LinearLayout
        android:id="@+id/mygallery"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        />
</HorizontalScrollView>

Activity file:

hsv.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if(event.getAction() == MotionEvent.ACTION_UP)
            {
                int i1 = 0;
                int i2 = imageView.getWidth();
                int i3 = i2*2;
                int i4 = i2*3;
                int i5 = i2*4;

                float currentPosition = hsv.getScrollX();
                float pagesCount = hsv.getChildCount();
                float pageLengthInPx = imageView.getMeasuredWidth()/pagesCount;
                float currentPage = currentPosition/pageLengthInPx;

                Boolean isBehindHalfScreen =  currentPage-(int)currentPage > 0.5;

                if(isBehindHalfScreen){
                    if(contD == 1){
                        hsv.scrollTo(i2, 0);
                        contD = 2;
                        contE = 1;
                    }else if(contD == 2){
                        hsv.scrollTo(i3, 0);
                        contD = 3;
                        contE = 2;
                    }else if(contD == 3){
                        hsv.scrollTo(i4, 0);
                        contD = 4;
                        contE = 3;
                    }else if(contD == 4){
                        hsv.scrollTo(i5, 0);
                        contD = 4;
                        contE = 4;
                    }
                }else{
                    if(contE == 4){
                        hsv.scrollTo(i4, 0);
                        contD = 4;
                        contE = 3;
                    }else if(contE == 3){
                        hsv.scrollTo(i3, 0);
                        contD = 3;
                        contE = 2;
                    }else if(contE == 2){
                        hsv.scrollTo(i2, 0);
                        contD = 2;
                        contE = 1;
                    }else if(contE == 1){
                        hsv.scrollTo(i1, 0);
                        contD = 1;
                        contE = 1;
                    }
                }
            }

            return false;
        }
    });

Answer 1

From ANDROID HORIZONTALSCROLLVIEW WITH CENTER LOCK,

1) create a custom java class extending HorizontalScrollView and define the function which center the current selected item. Something like this.

public class CenterLockHorizontalScrollview extends HorizontalScrollView {
    Context context;
    int prevIndex = 0;

    public CenterLockHorizontalScrollview(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        this.setSmoothScrollingEnabled(true);

    }

    public void setAdapter(Context context, CustomListAdapter mAdapter) {

        try {
            fillViewWithAdapter(mAdapter);
        } catch (ZeroChildException e) {

            e.printStackTrace();
        }
    }

    private void fillViewWithAdapter(CustomListAdapter mAdapter)
            throws ZeroChildException {
        if (getChildCount() == 0) {
            throw new ZeroChildException(
                    "CenterLockHorizontalScrollView must have one child");
        }
        if (getChildCount() == 0 || mAdapter == null)
            return;

        ViewGroup parent = (ViewGroup) getChildAt(0);

        parent.removeAllViews();

        for (int i = 0; i < mAdapter.getCount(); i++) {
            parent.addView(mAdapter.getView(i, null, parent));
        }
    }

    public void setCenter(int index) {

        ViewGroup parent = (ViewGroup) getChildAt(0);

        View preView = parent.getChildAt(prevIndex);
        preView.setBackgroundColor(Color.parseColor("#64CBD8"));
        android.widget.LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        lp.setMargins(5, 5, 5, 5);
        preView.setLayoutParams(lp);

        View view = parent.getChildAt(index);
        view.setBackgroundColor(Color.RED);

        int screenWidth = ((Activity) context).getWindowManager()
                .getDefaultDisplay().getWidth();

        int scrollX = (view.getLeft() - (screenWidth / 2))
                + (view.getWidth() / 2);
        this.smoothScrollTo(scrollX, 0);
        prevIndex = index;
    }

}

2)Create xml file in res/layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.krish.horizontalscrollview.CenterLockHorizontalScrollview
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>
    </com.krish.horizontalscrollview.CenterLockHorizontalScrollview>

    <LinearLayout
        android:id="@+id/bottomLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/scrollView"
        android:orientation="horizontal"
        android:weightSum="2" >

        <Button
            android:id="@+id/btnPrev"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Prev" />

        <Button
            android:id="@+id/btnNext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Next" />
    </LinearLayout>

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/bottomLayout"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:textColor="#FF0000"
        android:padding="@dimen/padding_medium" />

</RelativeLayout>

3)Use the CenterLockHorizontalScrollview in your activity as follows.

public class HorizontalScrollViewActivity extends Activity {
    CenterLockHorizontalScrollview centerLockHorizontalScrollview;
    CustomListAdapter customListAdapter;
    Button btnPrev, btnNext;
    int currIndex = 0;
    private TextView text;
    ArrayList<String> list = new ArrayList<String>() {

        {
            add("Manchester city");
            add("Manchester United");
            add("Chelsea");
            add("Liverpool");
            add("TottenHam");
            add("Everton");
            add("WestHam");
            add("Arsenal");
            add("West Broom");
            add("New Castle");
            add("Norich City");
            add("Swansea city");
            add("stroke city");

        }
    };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_horizontal_scroll_view);
        btnNext = (Button) findViewById(R.id.btnNext);
        btnPrev = (Button) findViewById(R.id.btnPrev);
        text=(TextView)findViewById(R.id.text);
        centerLockHorizontalScrollview = (CenterLockHorizontalScrollview) findViewById(R.id.scrollView);
        customListAdapter = new CustomListAdapter(this,
                R.layout.news_list_item, list);
        centerLockHorizontalScrollview.setAdapter(this, customListAdapter);
        btnNext.setOnClickListener(onClickListener);
        btnPrev.setOnClickListener(onClickListener);

    }

    OnClickListener onClickListener = new OnClickListener() {

        @Override
        public void onClick(View v) {
            if (v.getId() == R.id.btnPrev) {
                if (currIndex != 0) {
                    currIndex--;
                    centerLockHorizontalScrollview.setCenter(currIndex);
                    text.setText(list.get(currIndex==0?0:currIndex-1));
                }
            } else if (v.getId() == R.id.btnNext) {

                if (currIndex < list.size()) {
                    centerLockHorizontalScrollview.setCenter(currIndex);
                    currIndex++;
                    text.setText(list.get(currIndex-1));
                }
            }

        }
    };

}

Answer 2

You shout try using custom HorizontalListView

HorizontalListView in XML

<com.example.HorizontalListView
                android:id="@+id/gallery"
                android:layout_width="fill_parent"
                android:layout_height="50dip"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:gravity="left"
                android:smoothScrollbar="true"
                android:spacing="5dip"
                android:visibility="gone" />

HorizontalListView.java

package com.example;

import java.util.LinkedList;
import java.util.Queue;

import android.content.Context;
import android.database.DataSetObserver;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.Log;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListAdapter;
import android.widget.Scroller;

public class HorizontalListView extends AdapterView<ListAdapter>  {

    public boolean mAlwaysOverrideTouch = true;
    protected ListAdapter mAdapter;
    private int mLeftViewIndex = -1;
    private int mRightViewIndex = 0;
    protected int mCurrentX;
    protected int mNextX;
    private int mMaxX = Integer.MAX_VALUE;
    private int mDisplayOffset = 0;
    protected Scroller mScroller;
    private GestureDetector mGesture;
    private Queue mRemovedViewQueue = new LinkedList();
    private OnItemSelectedListener mOnItemSelected;
    private OnItemClickListener mOnItemClicked;
    private OnItemLongClickListener mOnItemLongClicked;
    private boolean mDataChanged = false;
    private int mCurrentlySelectedAdapterIndex;
    public HorizontalListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    private synchronized void initView() {
        mLeftViewIndex = -1;
        mRightViewIndex = 0;
        mDisplayOffset = 0;
        mCurrentX = 0;
        mNextX = 0;
        mMaxX = Integer.MAX_VALUE;
        mScroller = new Scroller(getContext());
        mGesture = new GestureDetector(getContext(), mOnGesture);
    }

    @Override
    public void setOnItemSelectedListener(
            AdapterView.OnItemSelectedListener listener) {
        mOnItemSelected = listener;
    }

    @Override
    public void setOnItemClickListener(AdapterView.OnItemClickListener listener) {
        mOnItemClicked = listener;
    }

    @Override
    public void setOnItemLongClickListener(
            AdapterView.OnItemLongClickListener listener) {
        mOnItemLongClicked = listener;
    }

    @Override
    protected void onSizeChanged(int xNew, int yNew, int xOld, int yOld) {
        super.onSizeChanged(xNew, yNew, xOld, yOld);

        setSelection(getCount());

    }

    private DataSetObserver mDataObserver = new DataSetObserver() {

        @Override
        public void onChanged() {
            synchronized (HorizontalListView.this) {
                mDataChanged = true;
            }
            invalidate();
            requestLayout();
        }

        @Override
        public void onInvalidated() {
            reset();
            invalidate();
            requestLayout();
        }

    };

    @Override
    public ListAdapter getAdapter() {
        return mAdapter;
    }

    @Override
    public View getSelectedView() {
        // TODO: implement
//      return null;
        return getChild(mCurrentlySelectedAdapterIndex);
    }

     private View getChild(int adapterIndex) {
            if (adapterIndex >= mLeftViewIndex && adapterIndex <= mRightViewIndex) {
                Log.v("", "last item pos "+(adapterIndex - mLeftViewIndex));
                getChildAt(adapterIndex - mLeftViewIndex);
            }

            return getChildAt(adapterIndex - mLeftViewIndex);
        }

    @Override
    public void setAdapter(ListAdapter adapter) {
        if (mAdapter != null) {
            mAdapter.unregisterDataSetObserver(mDataObserver);
        }
        mAdapter = adapter;
        mAdapter.registerDataSetObserver(mDataObserver);
        reset();
    }

    private synchronized void reset() {
        initView();
        removeAllViewsInLayout();
        requestLayout();
    }

    @Override
    public void setSelection(int position) {
        // TODO: implement
        mCurrentlySelectedAdapterIndex = position;
        getChild(mCurrentlySelectedAdapterIndex);
//      getSelectedView();
//      mCurrentlySelectedAdapterIndex = position
    }


    private void addAndMeasureChild(final View child, int viewPos) {
        LayoutParams params = child.getLayoutParams();
        if (params == null) {
            params = new LayoutParams(LayoutParams.WRAP_CONTENT,
                    LayoutParams.WRAP_CONTENT);
        }

        addViewInLayout(child, viewPos, params, true);
        child.measure(
                MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.AT_MOST),
                MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.AT_MOST));
    }

    @Override
    protected synchronized void onLayout(boolean changed, int left, int top,
            int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        if (mAdapter == null) {
            return;
        }

        if (mDataChanged) {
            int oldCurrentX = mCurrentX;
            initView();
            removeAllViewsInLayout();
            mNextX = oldCurrentX;
            mDataChanged = false;
        }

        if (mScroller.computeScrollOffset()) {
            int scrollx = mScroller.getCurrX();
            mNextX = scrollx;
        }

        if (mNextX <= 0) {
            mNextX = 0;
            mScroller.forceFinished(true);
        }
        if (mNextX >= mMaxX) {
            mNextX = mMaxX;
            mScroller.forceFinished(true);
        }

        int dx = mCurrentX - mNextX;

        // removeNonVisibleItems(dx);
        fillList(dx);
        positionItems(dx);

        mCurrentX = mNextX;

        if (!mScroller.isFinished()) {
            post(new Runnable() {
                @Override
                public void run() {
                    requestLayout();
                }
            });

        }
    }

    private void fillList(final int dx) {
        int edge = 0;
        View child = getChildAt(getChildCount() - 1);
        if (child != null) {
            edge = child.getRight();
        }
        fillListRight(edge, dx);

        edge = 0;
        child = getChildAt(0);
        if (child != null) {
            edge = child.getLeft();
        }
        fillListLeft(edge, dx);

    }

    private void fillListRight(int rightEdge, final int dx) {
        while (rightEdge + dx < getWidth()
                && mRightViewIndex < mAdapter.getCount()) {

            View child = mAdapter.getView(mRightViewIndex,
                    (View) mRemovedViewQueue.poll(), this);
            addAndMeasureChild(child, -1);
            rightEdge += child.getMeasuredWidth();

            if (mRightViewIndex == mAdapter.getCount() - 1) {
                mMaxX = mCurrentX + rightEdge - getWidth();
            }

            if (mMaxX < 0) {
                mMaxX = 0;
            }
            mRightViewIndex++;
        }

    }

    private void fillListLeft(int leftEdge, final int dx) {
        while (leftEdge + dx > 0 && mLeftViewIndex >= 0) {
            View child = mAdapter.getView(mLeftViewIndex,
                    (View) mRemovedViewQueue.poll(), this);
            addAndMeasureChild(child, 0);
            leftEdge -= child.getMeasuredWidth();
            mLeftViewIndex--;
            mDisplayOffset -= child.getMeasuredWidth();
        }
    }

    /*
     * private void removeNonVisibleItems(final int dx) { View child =
     * getChildAt(0); while(child != null && child.getRight() + dx <= 0) {
     * mDisplayOffset += child.getMeasuredWidth();
     * mRemovedViewQueue.offer(child); removeViewInLayout(child);
     * mLeftViewIndex++; child = getChildAt(0);
     * 
     * }
     * 
     * child = getChildAt(getChildCount()-1); while(child != null &&
     * child.getLeft() + dx >= getWidth()) { mRemovedViewQueue.offer(child);
     * removeViewInLayout(child); mRightViewIndex--; child =
     * getChildAt(getChildCount()-1); } }
     */

    private void positionItems(final int dx) {
        if (getChildCount() > 0) {
            mDisplayOffset += dx;
            int left = mDisplayOffset;
            for (int i = 0; i < getChildCount(); i++) {
                View child = getChildAt(i);
                int childWidth = child.getMeasuredWidth();
                child.layout(left, 0, left + childWidth,
                        child.getMeasuredHeight());
                left += childWidth;
            }
        }
    }

    public synchronized void scrollTo(int x) {
        mScroller.startScroll(mNextX, 0, x - mNextX, 0);
        requestLayout();
    }

    public synchronized void fullScroll(int x) {
        mScroller.startScroll(mNextX, 0, x - mNextX, 0);
        requestLayout();
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        boolean handled = super.dispatchTouchEvent(ev);
        handled |= mGesture.onTouchEvent(ev);
        return handled;
    }

    protected boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
            float velocityY) {
        synchronized (HorizontalListView.this) {
            mScroller.fling(mNextX, 0, (int) -velocityX, 0, 0, mMaxX, 0, 0);
        }
        requestLayout();

        return true;
    }

    protected boolean onDown(MotionEvent e) {
        mScroller.forceFinished(true);
        return true;
    }

    private OnGestureListener mOnGesture = new GestureDetector.SimpleOnGestureListener() {

        @Override
        public boolean onDown(MotionEvent e) {
            return HorizontalListView.this.onDown(e);
        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                float velocityY) {
            return HorizontalListView.this.onFling(e1, e2, velocityX, velocityY);
        }

        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2,
                float distanceX, float distanceY) {

            synchronized (HorizontalListView.this) {
                mNextX += (int) distanceX;
            }
            requestLayout();

            return true;
        }

        @Override
        public boolean onSingleTapConfirmed(MotionEvent e) {
            for (int i = 0; i < getChildCount(); i++) {
                View child = getChildAt(i);
                if (isEventWithinView(e, child)) {
                    if (mOnItemClicked != null) {
                        mOnItemClicked.onItemClick(HorizontalListView.this, child,
                                mLeftViewIndex + 1 + i,
                                mAdapter.getItemId(mLeftViewIndex + 1 + i));
                    }
                    if (mOnItemSelected != null) {
                        mOnItemSelected.onItemSelected(HorizontalListView.this,
                                child, mLeftViewIndex + 1 + i,
                                mAdapter.getItemId(mLeftViewIndex + 1 + i));
                    }
                    break;
                }

            }
            return true;
        }

        @Override
        public void onLongPress(MotionEvent e) {
            int childCount = getChildCount();
            for (int i = 0; i < childCount; i++) {
                View child = getChildAt(i);
                if (isEventWithinView(e, child)) {
                    if (mOnItemLongClicked != null) {
                        mOnItemLongClicked.onItemLongClick(HorizontalListView.this,
                                child, mLeftViewIndex + 1 + i,
                                mAdapter.getItemId(mLeftViewIndex + 1 + i));
                    }
                    break;
                }

            }
        }

        private boolean isEventWithinView(MotionEvent e, View child) {
            Rect viewRect = new Rect();
            int[] childPosition = new int[2];
            child.getLocationOnScreen(childPosition);
            int left = childPosition[0];
            int right = left + child.getWidth();
            int top = childPosition[1];
            int bottom = top + child.getHeight();
            viewRect.set(left, top, right, bottom);
            return viewRect.contains((int) e.getRawX(), (int) e.getRawY());
        }
    };

}

Activity Class

private HorizontalListView gallery;
private GalleryAdapter adapterGallery;
private ArrayList<Integer> arrayListPic;

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.gallery_activity);

           gallery =(HorizontalListView)findViewById(R.id.gallery);
           arrayListPic = new ArrayList<Integer>();

          arrayListPic.add(R.drawable.test1);
          arrayListPic.add(R.drawable.test2);

           adapterGallery = new GalleryAdapter(his, arrayListPic);
           gallery.setAdapter(adapterGallery);
}

In Adapter

package com.example.adapter;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Bitmap;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

import com.americos.hammer.R;
import com.americos.hammer.constants.HammerConstant;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;

public class GalleryAdapter extends BaseAdapter {
    private Context context;
    private ArrayList<Integer> arrayList;
    private LayoutInflater inflater;



    public GalleryAdapter(Context context, ArrayList<Integer> arrayList) {

        this.context = context;
        this.arrayList = arrayList;
        inflater = LayoutInflater.from(context);

    }

    @Override
    public int getCount() {
        return arrayList.size();
    }

    @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) {

        final ViewHolder holder;
        View rowView = convertView;
        if (rowView == null) {

            rowView = inflater.inflate(R.layout.conversion_gallery_row_item, null);
            holder = new ViewHolder();
            holder.imgDisplay = (ImageView) rowView.findViewById(R.id.view_conver_gallery_img);

            rowView.setTag(holder);
        } else {
            holder = (ViewHolder) rowView.getTag();
        }


        holder.imgDisplay.setImageResource(arrayList.get(position))
        return rowView;
    }

    static class ViewHolder {
        ImageView imgDisplay;
    }

}

Hope this will help you.

Thanks, Girish