Android Center Locked HorizontalScrollView

center-locked-HorizontalScrollView-Thumb

24th February, 2020

HorizontalScrollView is used to scroll the child views or elements in horizontal direction. In this example you will learn how to create center locked HorizontalScrollView.

Step 1: Create New Project

Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from the templates.

Step 2: Add HorizontalScrollView in Activity Layout

Open related layout file and add HorizontalScrollView in it.

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

    <HorizontalScrollView
        android:id="@+id/horizontalScrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#007b12">

        <LinearLayout
            android:id="@+id/container"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal" />
    </HorizontalScrollView>
    <TextView
        android:text="CodestringZ"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/testTextView"/>
</RelativeLayout>

Step 3: Adjust Your Activity

Adjust your activity to use the HorizontalScrollView.

package com.codestringz.mytestapp;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.Collections;

public class MainActivity extends AppCompatActivity
{

    private HorizontalScrollView mHorizontalScrollView;
    private LinearLayout mContainer;
    private String mCities[] = new String[]
            {
                "London", "Bangkok", "Paris", "Dubai", "Istanbul", "New York",
                "Singapore", "Kuala Lumpur", "Hong Kong", "Tokyo", "Barcelona",
                "Vienna", "Los Angeles", "Prague", "Rome", "Seoul", "Mumbai", "Jakarta",
                "Berlin", "Beijing", "Moscow", "Taipei", "Dublin", "Vancouver"
            };
    private ArrayList mData = new ArrayList<>();
    private TextView mTestTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setUIRef();
        bindData();
        bindHZSWData();
    }

    private void setUIRef()
    {
        mHorizontalScrollView = findViewById(R.id.horizontalScrollView);
        mContainer = findViewById(R.id.container);
        mTestTextView = findViewById(R.id.testTextView);
    }

    private void bindHZSWData()
    {
		//dynamically creating child views for our HorizontalScrollView
		
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        layoutParams.gravity = Gravity.CENTER;
        layoutParams.setMargins(20, 20, 20, 20);

        for (int i = 0; i < mData.size(); i++)
        {
            //creating textViews
            TextView textView = new TextView(this);
            textView.setText(mData.get(i));
            textView.setTextColor(Color.WHITE);
            textView.setLayoutParams(layoutParams);
            textView.setOnClickListener(new View.OnClickListener()
            {
                @Override
                public void onClick(View view)
                {
                    performItemClick(view);
                }
            });

            mContainer.addView(textView);
        }
        
		mContainer.invalidate();
    }

    private void performItemClick(View view)
    {
        //------Get Width of Display--------
        DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);

        int screenWidth = displayMetrics.widthPixels;

        int scrollX = (view.getLeft() - (screenWidth / 2)) + (view.getWidth() / 2);

        //Smooth scrolling horizontalScrollView
        mHorizontalScrollView.smoothScrollTo(scrollX, 0);

        String s = "Selected Item: " + ((TextView) view).getText();
        mTestTextView.setText(s);
    }

    private void bindData()
    {
        //add all cities to ArrayList
        Collections.addAll(mData, mCities);
    }
}

Output: Video Demo

Happy coding!

Leave a Reply