How to implement HorizontalScrollView like Gallery? How to implement HorizontalScrollView like Gallery? android android

How to implement HorizontalScrollView like Gallery?


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;@Overrideprotected 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 issueenjoy...


Here is my layout:

    <HorizontalScrollView        android:id="@+id/horizontalScrollView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:paddingTop="@dimen/padding" >       <LinearLayout        android:id="@+id/shapeLayout"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp" >        </LinearLayout>    </HorizontalScrollView>

And I populate it in the code with dynamic check-boxes.


Here is a good tutorial with code. Let me know if it works for you! This is also a good tutorial.

EDIT

In This example, all you need to do is add this line:

gallery.setSelection(1);

after setting the adapter to gallery object, that is this line:

gallery.setAdapter(new ImageAdapter(this));

UPDATE1

Alright, I got your problem. This open source library is your solution. I also have used it for one of my projects. Hope this will solve your problem finally.

UPDATE2:

I would suggest you to go through this tutorial. You might get idea. I think I got your problem, you want the horizontal scrollview with snap. Try to search with that keyword on google or out here, you might get your solution.