Android Horizontal ScrollView Example: Horizontal Scroll View In Android

A horizontal ScrollView is a layout container that can be scrolled Horizontally by a user. So it can scroll both left to right, or right to left. Let’s understand it with an Android Horizontal ScrollView Example.

Let’s build a custom app with Android Horizontal Scrollview Example

1- So open your Android Studio and build a new Android Studio Project.

2- Name your Project as Horizontal ScrollView. Also, you can give whatever name you like.

3- Then, first of all we are going to make a separate Layout file for a single Item in our Horizontal Scroll View. We make a separate Layout file and name it as text.xml.

4- So in your text.xml file first thing here is that you change your default Layout file from Constraint Layout to Linear Layout.

5- After changing to Linear Layout then we will take an ImageView with a 100dp height and width. ImageView will display our images and TextView will show the name of each item in the scrollable list.

6- In your text.xml file add the code given below. Then the final text.xml is like this:

Android Scrollview Horizontal

text.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/iv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@color/colorPrimaryDark"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        />



    <TextView

        android:id="@+id/greeting_tv1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:gravity="center"
        android:textSize="20dp"
        android:textColor="#000000"
        android:textStyle="bold"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"/>

    

</LinearLayout>

<?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/iv"

android:layout_width="100dp"

android:layout_height="100dp"

android:src="@color/colorPrimaryDark"

android:layout_marginLeft="5dp"

android:layout_marginRight="5dp"

<TextView

android:id="@+id/greeting_tv1"

android:layout_width="100dp"

android:layout_height="100dp"

android:gravity="center"

android:textSize="20dp"

android:textColor="#000000"

android:textStyle="bold"

android:layout_marginLeft="5dp"

android:layout_marginRight="5dp"/>

</LinearLayout>

7- Here, we complete the Custom appearance of the single Item in our Horizontal Scroll View.

8- In our activity_main.xml file we will design our Horizontal Scroll View with a Linear Layout to display our Items. We will set the orientation of out HorizontalScrollView and LinearLayout to horizontal. After that, the final activity_main.xml file will look like this.

Android Horizontal Scrollview

activity_main.xml

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

    <HorizontalScrollView

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="horizontal"
        android:layout_marginTop="20dp">

    <LinearLayout

        android:id="@+id/linear1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="left"
        />

    </HorizontalScrollView>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<HorizontalScrollView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:scrollbars="horizontal"

android:layout_marginTop="20dp">

<LinearLayout

android:id="@+id/linear1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:layout_gravity="left"

</HorizontalScrollView>

</RelativeLayout>

9- Now, We are done with our Single Item’s appearance and Horizontal ScrollView Part.

10- We will now take two arrays, one for the texts and then one for the images because we have to bind our view in our Linear Layout inside the Horizontal Scroll View.

11- With the help of a for loop we will set the name and image of each item in our list.

12- Finally, our MainActivity.java code would be like this.

Android Horizontal Scrollview

MainActivity.java

package com.example.horizontalscrollview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private LinearLayout linearLayout;
    private String[] brands = {"apple","blackberry","Nokia","samsung",
"windows","infinix","lenovo","HTC"};
    private int[] images = {R.color.colorAccent,R.color.colorPrimary,
R.color.colorPrimaryDark,R.color.colorAccent,R.color.colorPrimary,
R.color.colorPrimaryDark,R.color.colorAccent,R.color.colorPrimary};


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

        linearLayout = findViewById(R.id.linear1);
        LayoutInflater layoutInflater = LayoutInflater.from(this);



        for (int i=0; i<brands.length; i++)
        {

            View view = layoutInflater.inflate(R.layout.text, linearLayout, false);

            ImageView imageView = view.findViewById(R.id.iv);
            imageView.setImageResource(images[i]);

            TextView tv = view.findViewById(R.id.greeting_tv1);
            tv.setText(brands[i]);

             linearLayout.addView(view);

        }



    }
}

package com.example.horizontalscrollview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

private LinearLayout linearLayout;

private String[] brands = {"apple","blackberry","Nokia","samsung",

"windows","infinix","lenovo","HTC"};

private int[] images = {R.color.colorAccent,R.color.colorPrimary,

R.color.colorPrimaryDark,R.color.colorAccent,R.color.colorPrimary,

R.color.colorPrimaryDark,R.color.colorAccent,R.color.colorPrimary};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

linearLayout = findViewById(R.id.linear1);

LayoutInflater layoutInflater = LayoutInflater.from(this);

for (int i=0; i<brands.length; i++)

{

View view = layoutInflater.inflate(R.layout.text, linearLayout, false);

ImageView imageView = view.findViewById(R.id.iv);

imageView.setImageResource(images[i]);

TextView tv = view.findViewById(R.id.greeting_tv1);

tv.setText(brands[i]);

linearLayout.addView(view);

}

So, this is it for our Horizontal Scrollview in Android. I hope now you understand the ScrollView Android example in a better way and if you have any questions you can ask below in the comments.