androidandroid-galleryhorizontalscrollview

How to implement HorizontalScrollView like Gallery?


I want to implement Horizontal ScrollView with some features of Gallery, enter image description here

In Gallery the scroll made at some distance it arrange in pair, i.e If we have three images shown in screen, clicking last image will arrange at center.

How would I implement HorizontalSCrollView as mentioned?


Solution

  • Try this code:

    activity_main.xml

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="100dip"
    tools:context=".MainActivity" >
    <HorizontalScrollView
        android:id="@+id/hsv"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:fillViewport="true"
        android:measureAllChildren="false"
        android:scrollbars="none" >
        <LinearLayout
            android:id="@+id/innerLay"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal" >
            <LinearLayout
                android:id="@+id/asthma_action_plan"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="vertical" >
                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent" >
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/action_plan" />
                    <TextView
                        android:layout_width="0.2dp"
                        android:layout_height="fill_parent"
                        android:layout_alignParentRight="true"
                        android:background="@drawable/ln" />
                </RelativeLayout>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/controlled_medication"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="vertical" >
                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent" >
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/controlled" />
                    <TextView
                        android:layout_width="0.2dp"
                        android:layout_height="fill_parent"
                        android:layout_alignParentRight="true"
                        android:background="@drawable/ln" />
                </RelativeLayout>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/as_needed_medication"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="vertical" >
                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal" >
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/as_needed" />
                    <TextView
                        android:layout_width="0.2dp"
                        android:layout_height="fill_parent"
                        android:layout_alignParentRight="true"
                        android:background="@drawable/ln" />
                </RelativeLayout>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/rescue_medication"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="vertical" >
                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent" >
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/rescue" />
                    <TextView
                        android:layout_width="0.2dp"
                        android:layout_height="fill_parent"
                        android:layout_alignParentRight="true"
                        android:background="@drawable/ln" />
                </RelativeLayout>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/your_symptoms"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="vertical" >
                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent" >
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/symptoms" />
                    <TextView
                        android:layout_width="0.2dp"
                        android:layout_height="fill_parent"
                        android:layout_alignParentRight="true"
                        android:background="@drawable/ln" />
                </RelativeLayout>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/your_triggers"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="vertical" >
                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent" >
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/triggers" />
                    <TextView
                        android:layout_width="0.2dp"
                        android:layout_height="fill_parent"
                        android:layout_alignParentRight="true"
                        android:background="@drawable/ln" />
                </RelativeLayout>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/wheeze_rate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="vertical" >
                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent" >
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/wheeze_rate" />
                    <TextView
                        android:layout_width="0.2dp"
                        android:layout_height="fill_parent"
                        android:layout_alignParentRight="true"
                        android:background="@drawable/ln" />
                </RelativeLayout>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/peak_flow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="vertical" >
                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent" >
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/peak_flow" />
                    <TextView
                        android:layout_width="0.2dp"
                        android:layout_height="fill_parent"
                        android:layout_alignParentRight="true"
                        android:background="@drawable/ln" />
                </RelativeLayout>
            </LinearLayout>
        </LinearLayout>
    </HorizontalScrollView>
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="0.2dp"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/hsv"
        android:background="@drawable/ln" />
    <LinearLayout
        android:id="@+id/prev"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:paddingLeft="5dip"
        android:paddingRight="5dip"
        android:descendantFocusability="blocksDescendants" >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/prev_arrow" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/next"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:paddingLeft="5dip"
        android:paddingRight="5dip"
        android:descendantFocusability="blocksDescendants" >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/next_arrow" />
    </LinearLayout>
    </RelativeLayout>
    

    grid_item.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:src="@drawable/ic_launcher" />
    </LinearLayout>
    

    MainActivity.java

    import java.util.ArrayList;
    
    import android.app.Activity;
    import android.graphics.Rect;
    import android.os.Bundle;
    import android.os.Handler;
    import android.view.Display;
    import android.view.GestureDetector;
    import android.view.GestureDetector.SimpleOnGestureListener;
    import android.view.MotionEvent;
    import android.view.View;
    import android.view.View.OnTouchListener;
    import android.widget.HorizontalScrollView;
    import android.widget.LinearLayout;
    import android.widget.LinearLayout.LayoutParams;
    
    public class MainActivity extends Activity {
    
    LinearLayout asthmaActionPlan, controlledMedication, asNeededMedication,
            rescueMedication, yourSymtoms, yourTriggers, wheezeRate, peakFlow;
    LayoutParams params;
    LinearLayout next, prev;
    int viewWidth;
    GestureDetector gestureDetector = null;
    HorizontalScrollView horizontalScrollView;
    ArrayList<LinearLayout> layouts;
    int parentLeft, parentRight;
    int mWidth;
    int currPosition, prevPosition;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    
        prev = (LinearLayout) findViewById(R.id.prev);
        next = (LinearLayout) findViewById(R.id.next);
        horizontalScrollView = (HorizontalScrollView) findViewById(R.id.hsv);
        gestureDetector = new GestureDetector(new MyGestureDetector());
        asthmaActionPlan = (LinearLayout) findViewById(R.id.asthma_action_plan);
        controlledMedication = (LinearLayout) findViewById(R.id.controlled_medication);
        asNeededMedication = (LinearLayout) findViewById(R.id.as_needed_medication);
        rescueMedication = (LinearLayout) findViewById(R.id.rescue_medication);
        yourSymtoms = (LinearLayout) findViewById(R.id.your_symptoms);
        yourTriggers = (LinearLayout) findViewById(R.id.your_triggers);
        wheezeRate = (LinearLayout) findViewById(R.id.wheeze_rate);
        peakFlow = (LinearLayout) findViewById(R.id.peak_flow);
    
        Display display = getWindowManager().getDefaultDisplay();
        mWidth = display.getWidth(); // deprecated
        viewWidth = mWidth / 3;
        layouts = new ArrayList<LinearLayout>();
        params = new LayoutParams(viewWidth, LayoutParams.WRAP_CONTENT);
    
        asthmaActionPlan.setLayoutParams(params);
        controlledMedication.setLayoutParams(params);
        asNeededMedication.setLayoutParams(params);
        rescueMedication.setLayoutParams(params);
        yourSymtoms.setLayoutParams(params);
        yourTriggers.setLayoutParams(params);
        wheezeRate.setLayoutParams(params);
        peakFlow.setLayoutParams(params);
    
        layouts.add(asthmaActionPlan);
        layouts.add(controlledMedication);
        layouts.add(asNeededMedication);
        layouts.add(rescueMedication);
        layouts.add(yourSymtoms);
        layouts.add(yourTriggers);
        layouts.add(wheezeRate);
        layouts.add(peakFlow);
    
        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new Handler().postDelayed(new Runnable() {
                    public void run() {
                        horizontalScrollView.smoothScrollTo(
                                (int) horizontalScrollView.getScrollX()
                                        + viewWidth,
                                (int) horizontalScrollView.getScrollY());
                    }
                }, 100L);
            }
        });
    
        prev.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new Handler().postDelayed(new Runnable() {
                    public void run() {
                        horizontalScrollView.smoothScrollTo(
                                (int) horizontalScrollView.getScrollX()
                                        - viewWidth,
                                (int) horizontalScrollView.getScrollY());
                    }
                }, 100L);
            }
        });
    
        horizontalScrollView.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (gestureDetector.onTouchEvent(event)) {
                    return true;
                }
                return false;
            }
        });
    }
    
    class MyGestureDetector extends SimpleOnGestureListener {
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                float velocityY) {
            if (e1.getX() < e2.getX()) {
                currPosition = getVisibleViews("left");
            } else {
                currPosition = getVisibleViews("right");
            }
    
            horizontalScrollView.smoothScrollTo(layouts.get(currPosition)
                    .getLeft(), 0);
            return true;
        }
    }
    
    public int getVisibleViews(String direction) {
        Rect hitRect = new Rect();
        int position = 0;
        int rightCounter = 0;
        for (int i = 0; i < layouts.size(); i++) {
            if (layouts.get(i).getLocalVisibleRect(hitRect)) {
                if (direction.equals("left")) {
                    position = i;
                    break;
                } else if (direction.equals("right")) {
                    rightCounter++;
                    position = i;
                    if (rightCounter == 2)
                        break;
                }
            }
        }
        return position;
    }
    }
    

    Let me know if any issue enjoy...