How to implement HorizontalScrollView like Gallery?
AndroidAndroid GalleryHorizontalscrollviewAndroid Problem Overview
I want to implement Horizontal ScrollView with some features of Gallery,
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?
Android Solutions
Solution 1 - Android
Try this code:
activity_main.xml
>
grid_item.xml
>
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...
Solution 2 - Android
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.
Solution 3 - Android
You may use HorizontalScrollView to implement Horizontal scrolling.
Code
<HorizontalScrollView
android:id="@+id/hsv"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_weight="0"
android:fillViewport="true"
android:measureAllChildren="false"
android:scrollbars="none" >
<LinearLayout
android:id="@+id/innerLay"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:gravity="center_vertical"
android:orientation="horizontal" >
</LinearLayout>
</HorizontalScrollView>
featured.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="160dp"
android:layout_margin="4dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ProgressBar
android:layout_width="15dip"
android:layout_height="15dip"
android:id="@+id/progress"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#20000000"
/>
<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:gravity="center"
android:textColor="#000000"
android:background="#ffffff"
android:text="Image Text" />
</RelativeLayout>
</LinearLayout>
Java Code:
LayoutInflater inflater;
inflater=getLayoutInflater();
LinearLayout inLay=(LinearLayout) findViewById(R.id.innerLay);
for(int x=0;x<10;x++)
{
inLay.addView(getView(x));
}
View getView(final int x)
{
View rootView = inflater.inflate( R.layout.featured_item,null);
ImageView image = (ImageView) rootView.findViewById(R.id.image);
//Thease Two Line is sufficient my dear to implement lazyLoading
AQuery aq = new AQuery(rootView);
String url="http://farm6.static.flickr.com/5035/5802797131_a729dac808_s.jpg";
aq.id(image).progress(R.id.progress).image(url, true, true, 0, R.drawable.placeholder1);
image.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
Toast.makeText(PhotoActivity.this, "Click Here Postion "+x,
Toast.LENGTH_LONG).show();
}
});
return rootView;
}
Note: to implement lazy loading, please use this link for AQUERY
Solution 4 - Android
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.
Solution 5 - Android
I implemented something similar with Horizontal Variable ListView The only drawback is, it works only with Android 2.3 and later.
Using this library is as simple as implementing a ListView with a corresponding Adapter. The library also provides an example
Solution 6 - Android
I have created a horizontal ListView in every row of ListView if you want single You can do the following
Here I am just creating horizontalListView of Thumbnail of Videos Like this
The idea is just continuously add the ImageView to the child of LinearLayout in HorizontalscrollView
Note: remember to fire .removeAllViews(); before next time load other wise it will add duplicate child
Cursor mImageCursor = db.getPlaylistVideoImage(playlistId);
mVideosThumbs.removeAllViews();
if (mImageCursor != null && mImageCursor.getCount() > 0) {
for (int index = 0; index < mImageCursor.getCount(); index++) {
mImageCursor.moveToPosition(index);
ImageView iv = (ImageView) imageViewInfalter.inflate(
R.layout.image_view, null);
name = mImageCursor.getString(mImageCursor
.getColumnIndex("LogoDefaultName"));
logoFile = new File(MyApplication.LOCAL_LOGO_PATH, name);
if (logoFile.exists()) {
Uri uri = Uri.fromFile(logoFile);
iv.setImageURI(uri);
}
iv.setScaleType(ScaleType.FIT_XY);
mVideosThumbs.addView(iv);
}
mImageCursor.close();
mImageCursor = null;
} else {
ImageView iv = (ImageView) imageViewInfalter.inflate(
R.layout.image_view, null);
String name = "";
File logoFile;
name = mImageCursor.getString(mImageCursor
.getColumnIndex("LogoMediumName"));
logoFile = new File(MyApplication.LOCAL_LOGO_PATH, name);
if (logoFile.exists()) {
Uri uri = Uri.fromFile(logoFile);
iv.setImageURI(uri);
}
}
My xml for HorizontalListView
<HorizontalScrollView
android:id="@+id/horizontalScrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/linearLayoutTitle"
android:background="@drawable/shelf"
android:paddingBottom="@dimen/Playlist_TopBottom_margin"
android:paddingLeft="@dimen/playlist_RightLeft_margin"
android:paddingRight="@dimen/playlist_RightLeft_margin"
android:paddingTop="@dimen/Playlist_TopBottom_margin" >
<LinearLayout
android:id="@+id/linearLayoutVideos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:orientation="horizontal" >
</LinearLayout>
</HorizontalScrollView>
and Also my Image View as each child
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/imageViewThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="20dp"
android:adjustViewBounds="true"
android:background="@android:color/transparent"
android:contentDescription="@string/action_settings"
android:cropToPadding="true"
android:maxHeight="200dp"
android:maxWidth="240dp"
android:padding="@dimen/playlist_image_padding"
android:scaleType="centerCrop"
android:src="@drawable/loading" />
To learn More you can follow the following links which have some easy samples