Get Item position, at the center of the screen, while scrolling the HorizontalScrollview

Question

I have dynamically loaded some(1000) images inside the HorizontalcsrollView. The user can scroll the HorizontalScrollView front and back.
What I need is, to find the item position at the center of the screen while scrolling. FYR, I have start the HorizontalScrollView from the center of the screen and end at the center.
I have tried with addOnScrollChangedListener of the HorizontalScrollview, but I couldn't get the exact position of the center item.

Edit: Tried to get x position and left position, while scrolling, but always return 0.
Note, I have set padding left and right to my HorizontalScrollView.
It always starts from center of the screen and ends at center of the screen.

horizontalScrollView1.setOnScrollChangeListener(new View.OnScrollChangeListener() {
    @Override
    public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {                      
        int x1 = horizontalScrollView1.getLeft();                          
        int getX=(int)horizontalScrollView1.getX();
    }
});

layout file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <HorizontalScrollView
        android:id="@+id/horizontalScrollView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="15dp"
        android:fillViewport="true"
        android:scrollbars="none">

        <RelativeLayout
            android:id="@+id/layLandmarks"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <View
                android:id="@+id/viewWhite"
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:layout_centerInParent="true"
                android:background="@color/white" />

        </RelativeLayout>
    </HorizontalScrollView>
</RelativeLayout>

Class file:

ImageView iv;
RelativeLayout layLandmarks = (RelativeLayout) findViewById(R.id.layLandmarks);
FrameLayout.LayoutParams lp1 = new FrameLayout.LayoutParams(2000, FrameLayout.LayoutParams.WRAP_CONTENT);
layLandmarks.setLayoutParams(lp1);
JSONObject landmarks = jsonObject1.getString("landmarks");
JSONArray jsonArray1 = new JSONArray(landmarks);
for(int j = 0; j<jsonArray1.length();j++){
    JSONObject jsonObject2 = jsonArray1.getJSONObject(0);

    landmarkId = jsonObject2.getString("id");
    landmarkName = jsonObject2.getString("title");
    landmarkDesc = jsonObject2.getString("description");
    latitude = jsonObject2.getDouble("latitude");
    longitude = jsonObject2.getDouble("longitude");
    video_time = jsonObject2.getString("video_time_in_sec");
    //   Log.e("video_time_in_sec", video_time);
    landmarkIcon = jsonObject2.getString("image");
    iv = new ImageView(VideoPreviewWithRecycler.this);
    iv.setId(i);

    Picasso.with(VideoPreviewWithRecycler.this)
            .load(landmarkIcon)
            .resize(40, 45)
            .into(iv);
    params = new RelativeLayout.LayoutParams(40, 45);

    params.topMargin = 0;

    params.leftMargin = Integer.parseInt(video_time);
    params.addRule(RelativeLayout.RIGHT_OF, 0);

    layLandmarks.addView(iv, params);
}

calculate width of device screen in dp's , Then divide the width by 2 to get center. then divide the result by the size of Item width in dp. The result will be the item number at center of screen — Muhammad Hassaan, Sep 28 '18 at 11:00
Muhammad, could you please explain, how to do you calculation, while scrolling the horizontal scrollview? Item width is always same for all the items. Kindly look into my updated code. — Manikandan, Sep 28 '18 at 11:06
I suggest you refer [this](https://stackoverflow.com/a/34647005/6570945) SO post. — Ashu Tyagi, Oct 08 '18 at 07:25

score 0 · Answer 1 · answered Oct 04 '18 at 14:33

I have dynamically loaded some(1000) images inside the Horizontal scrollview. The user can scroll the Horizontal scrollview front and back. What I need is, to find the item position at the center of the screen while scrolling. FYR, I have start the Horizontal scrollview from the center of the screen and end at the center. I have tried with addOnScrollChangedListener of the HorizontalScrollview, but I couldn't get the exact position of the center item.

You mustn't use a horizontal scrollview to load that many images, you'll lag the device and your app will stop responding. Scollviews are meant for loading simply text views or a small number of low resolution images such as icons. What you should do is use a Recycler view and set the orientation to horizontal.

 LinearLayoutManager listManager = new LinearLayoutManager( getActivity(),LinearLayoutManager.HORIZONTAL, false);
    horizontalRecyclerView.setHasFixedSize(false);
    horizontalRecyclerView.setLayoutManager(listManager);
    horizontalRecyclerView.setAdapter(new ContentFileterAdapter());

You can then add a viewholder and an adapter which holds your images. You should also use a caching library such as UIL to load that many images

    public static class ViewHolder extends RecyclerView.ViewHolder {
            public ImageView mImageView;
            public ViewHolder(View itemView) {
                super(itemView);
                mImageView=itemView.findViewById(R.id.yourImageView);
            }
        }
private class ImagesAdapter extends RecyclerView.Adapter<ViewHolder>{
        private String[] mImagesPaths;
        public ImagesAdapter(String[] mImagesPaths){
            this.mImagesPaths = mImagesPaths;
          }
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup container, int viewType) {

            return new ViewHolder(LayoutInflater.from(container.getContext()).inflate(R.layout.yourAdapterItemLayout, container, false));
        }

        @Override
        public int getItemViewType(int position) {

            return 0;
        }

        @Override
        public void onBindViewHolder(final ViewHolder holder, int position) {
ImageLoader.getInstance().displayImage(Uri.decode(mImagesPaths[position]), holder.mImageView);}

        @Override
        public int getItemCount() {
            return mImagesPaths.length;
        }
    }

And then to find your center view or position you simply call the LinearLayoutManager

int lastindex = listManager.findLastCompletelyVisibleItemPosition();
int firstindex = listManager.findFirstCompletelyVisibleItemPosition();

//The middle visible position
int centerindex = firstindex/2 + lastindex/2 + (firstindex%2 + lastindex%2)/2;

//The middle visible view
View   view=(View)listManager.findViewByPosition(centerindex );

score 0 · Answer 2 · answered Oct 06 '18 at 05:06

You can use Recylerview something like this:

mProductBrowserAdapter = new ProductsAdapterBrowser();
        mRcvLatestProducts.setNestedScrollingEnabled(true);
        mRcvLatestProducts.setHasFixedSize(false);
        StaggeredGridLayoutManager staggeredGridLayoutManager =
                new StaggeredGridLayoutManager(1, LinearLayoutManager.HORIZONTAL);
        mRcvLatestProducts.setLayoutManager(staggeredGridLayoutManager);
        mRcvLatestProducts.addItemDecoratiiiiion(new GridSpacingItemDecoration(1, 0, false));
        mRcvLatestProducts.setAdapter(mProductBrowserAdapter);

and view for adapter:

  <android.support.v7.widget.AppCompatImageView
                android:id="@+id/item_product_image_imv"
                android:layout_width="160dp"
                android:layout_height="160dp"
                android:adjustViewBounds="true"
                android:background="@android:color/transparent"
                android:scaleType="fitCenter"
              />

I am recommended use Glide for load image.

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.8.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'
}

https://github.com/bumptech/glide

score 0 · Answer 3 · answered Oct 11 '18 at 05:37

You can use the PagerSnapHelper with recyclerview it will be help you like this

   binding.rvPosts.setLayoutManager(layoutManager);
   SnapHelper snapHelper = new PagerSnapHelper();
   snapHelper.attachToRecyclerView(binding.rvPosts);
   binding.rvPosts.setHasFixedSize(true);

Get Item position, at the center of the screen, while scrolling the HorizontalScrollview

3 Answers3