New Tutorials:   TKINTER    KOTLIN    JAVASCRIPT    SASS/SCSS    PL/SQL    Matplotlib    C++ Programs
CLOSE
   Android  HorizontalScrollView  Mobile Application  
   Technology    Programming

How to Add Horizontal ScrollView in Android App

         
 OCTOBER 27, 2020   by onlyklohan

In Android Apps(Learn Android App development) we have seen the Scrolling content which scrolls horizontal or vertical, to add such feature in our Android app we are provided with the HorizontalScrollView. A HorizontalScrollView is an Android view group which is used to make horizontal scrollable views in our android app . A HorizontalScrollView only contains a direct single child. So in order to place multiple views inside the HorizontalScrollView , we simply create a view group(like Android LinearLayout) as a direct child of the HorizontalScrollView and inside that view group we defines all other views.

The main disadvantage of HorizontalScrollView is that it only support horizontal scroll, but to add vertical scroll we have many other options such as ScrollView.

So before implementing the HorizontalScrollView in our android app we have some basic properties of the HorizontalScrollView, which we will discuss below to better understand the features and limitations of the HorizontalScrollView and use it our app when needed .

Horizontal Scroll View Attributes
XML Attributes Description
android:scrollbars

Sets the scrollbars (none, horizontal, vertical) of the horizontal scroll view. We generally use android:scrollbars="horizontal" for HorizontalScrollView in projects.

android:layout_width
Sets the width (match_parent, wrap_content or integer number in dp, in, mm, pt, px, sp ) of the horizontal scroll view
android:layout_height
Sets the height ( match_parent, wrap_content or integer number in dp, in, mm, pt, px, sp ) of the horizontal scroll view
android:scrollIndicators
Sets the scrollIndicators ( none, left, right, top, bottom, start, end ) of the horizontal scroll view
android:id

Sets unique id of the view

e.g., android:id= "@+id/horizontalScrollViewId" )

android:scrollbarFadeDuration

used to add the fade to the scroll bar, value will be provided in milliseconds(ms) .

  • 1 second = 1000 milliseconds(ms)

  • 1 minute = 60,000 milliseconds (ms)

android:scrollbarThumbHorizontal

It is used to set the Thumb of the scroll bar

e.g., android:scrollbarThumbHorizontal = "@drawable/Thumb_1"

android:fadeScrollbars

Set whether scroll bars fade or not, value is either true or false

e.g.,

  • android:fadeScrollbars= "true"

  • android:fadeScrollbars= "false"

android:scrollbarStyle

Set the style of scroll bar, values are

  • android:scrollbarStyle= "insideInset"

  • android:scrollbarStyle= "insideOverlay"

  • android:scrollbarStyle= "outsideOverlay"

  • android:scrollbarStyle= "outsideInset"

 android:nestedScrollingEnabled="true"

Set whether nester scrolling is enabled or not ,value is either true or false.

It is used in API level 21 or later,

e.g.,

  • android:nestedScrollingEnabled= "true"

  • android:nestedScrollingEnabled= "false"

android:scrollbarSize

Set the size of the scroll bar in integer number in dp, in, mm, pt, px, sp

e.g., android:scrollbarSize= "20dp"

The HorizontalScrollView also contains all the basic attributes of the view such as:

  • android:scrollbarDefaultDelayBeforeFade

  • android:animateLayoutChanges

  • android:layoutMode

  • android:layoutDirection

  • android:layoutAnimation

  • android:layerType

  • android:layout_toStartOf

  • android:layout_toRightOf

  • android:layout_toLeftOf

  • android:layout_toEndOf

  • android:layout_below

  • android:layout_alignTop

  • android:layout_alignStart

  • android:layout_alignRight

  • android:clipToPadding

  • android:paddingVertical

  • android:paddingTop

  • android:paddingStart

  • android:paddingRight

  • android:paddingLeft

  • android:paddingHorizontal

  • android:paddingEnd

  • android:paddingBottom

  • android:padding

  • android:duplicateParentState

  • android:layout_alignWithParentIfMissing

  • android:layout_alignParentStart

  • android:layout_alignParentRight

  • android:layout_alignParentLeft

  • android:layout_alignParentEnd

  • android:layout_alignLeft

  • android:layout_alignEnd

  • android:layout_alignBottom

  • android:layout_alignBaseline

  • android:layout_above

  • android:layout_marginVertical

  • android:layout_marginTop

  • android:layout_marginStart

  • android:layout_marginRight

  • android:layout_marginLeft

  • android:layout_marginHorizontal

  • android:layout_marginEnd

  • android:layout_centerVertical

  • android:layout_centerHorizontal

  • android:layout_centerInParent

  • android:layout_alignParentBottom

  • android:layout_alignParentTop

  • androidlayout_marginBottom

  • android:layout_margin

So let's implement a simple HorizontalScrollView in our android app.

Step 1: Create a new Project

  1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to set up Android Studio and create your first Android project)

  2. Choose "Empty Activity" from the project template window and click Next

  3. Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial ), and minimum SDK(we are using API 19: Android 4.4 which is KitKat)

  4. Next click on the Finish button after filling in the above details.

  5. Now, wait for the project to finish the building.

Step 2: Modify activity_main.xml

Add the HorizontalScrollView inside RelativeLayout and inside the HorizontalScrollView we add a LinearLayout with orientation horizontal.

android:orientation="horizontal"

And inside LinearLayout container we add multiple views which we want to scroll. The complete code of activity_main.xml is shown below:

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

    <!-- Horizontal Scroll View Group -->
    <HorizontalScrollView
      android:layout_width= "match_parent"
      android:layout_height= "match_parent">

      <!-- Linear Layout as the direct child of horizontal scroll view  to contain other views and view groups -->
      <LinearLayout
          android:orientation= "horizontal"
          android:layout_width= "match_parent"
          android:layout_height= "match_parent">

          <!-- Button as the child of LinearLayout inside  HorizontalScrollView  -->
          <Button
              android:textAllCaps= "true"
              android:fontFamily= "sans-serif-black"
              android:textStyle= "bold"
              android:textAlignment= "center"
              android:layout_margin= "16dp"
              android:textColor= "#ffffff"
              android:background= "@color/color1"
              android:textSize= "40dp"
              android:text= "Button 1"
              android:layout_width= "240dp"
              android:layout_height= "match_parent"/>

          <Button
              android:textAllCaps= "true"
              android:fontFamily= "sans-serif-black"
              android:textStyle= "bold"
              android:textAlignment= "center"
              android:layout_margin= "16dp"
              android:textColor= "#ffffff"
              android:background= "@color/color2"
              android:textSize= "40dp"
              android:text= "Button 2"
              android:layout_width= "240dp"
              android:layout_height= "match_parent"/>

          <Button
              android:textAllCaps= "true"
              android:fontFamily= "sans-serif-black"
              android:textStyle= "bold"
              android:textAlignment= "center"
              android:layout_margin= "16dp"
              android:textColor= "#ffffff"
              android:background= "@color/color3"
              android:textSize= "40dp"
              android:text= "Button 3"
              android:layout_width= "240dp"
              android:layout_height= "match_parent"/>

          <Button
              android:textAllCaps= "true"
              android:fontFamily= "sans-serif-black"
              android:textStyle= "bold"
              android:textAlignment= "center"
              android:layout_margin= "16dp"
              android:textColor= "#ffffff"
              android:background= "@color/color4"
              android:textSize= "40dp"
              android:text= "Button 4"
              android:layout_width= "240dp"
              android:layout_height= "match_parent"/>

          <Button
              android:textAllCaps= "true"
              android:fontFamily= "sans-serif-black"
              android:textStyle= "bold"
              android:textAlignment= "center"
              android:layout_margin= "16dp"
              android:textColor= "#ffffff"
              android:background= "@color/color5"
              android:textSize= "40dp"
              android:text= "Button 5"
              android:layout_width= "240dp"
              android:layout_height= "match_parent"/>

          <Button
              android:textAllCaps= "true"
              android:fontFamily= "sans-serif-black"
              android:textStyle= "bold"
              android:textAlignment= "center"
              android:layout_margin= "16dp"
              android:textColor= "#ffffff"
              android:background= "@color/color6"
              android:textSize= "40dp"
              android:text= "Button 6"
              android:layout_width= "240dp"
              android:layout_height= "match_parent"/>

          <Button
              android:textAllCaps= "true"
              android:fontFamily= "sans-serif-black"
              android:textStyle= "bold"
              android:textAlignment= "center"
              android:layout_margin= "16dp"
              android:textColor= "#ffffff"
              android:background= "@color/color7"
              android:textSize= "40dp"
              android:text= "Button 7"
              android:layout_width= "240dp"
              android:layout_height= "match_parent"/>

          <Button
              android:textAllCaps= "true"
              android:fontFamily= "sans-serif-black"
              android:textStyle= "bold"
              android:textAlignment= "center"
              android:layout_margin= "16dp"
              android:textColor= "#ffffff"
              android:background= "@color/color8"
              android:textSize= "40dp"
              android:text= "Button 8"
              android:layout_width= "240dp"
              android:layout_height= "match_parent"/>

          <Button
              android:textAllCaps= "true"
              android:fontFamily= "sans-serif-black"
              android:textStyle= "bold"
              android:textAlignment= "center"
              android:layout_margin= "16dp"
              android:textColor= "#ffffff"
              android:background= "@color/color9"
              android:textSize= "40dp"
              android:text= "Button 9"
              android:layout_width= "240dp"
              android:layout_height= "match_parent"/>

          <Button
              android:textAllCaps= "true"
              android:fontFamily= "sans-serif-black"
              android:textStyle= "bold"
              android:textAlignment= "center"
              android:layout_margin= "16dp"
              android:textColor= "#ffffff"
              android:background= "@color/color10"
              android:textSize= "40dp"
              android:text= "Button 10"
              android:layout_width= "240dp"
              android:layout_height= "match_parent"/>


          <!-- ImageView as the child of LinearLayout inside  HorizontalScrollView  -->

          <ImageView
              android:layout_margin= "16dp"
              android:background= "@color/color1"
              android:layout_width= "320dp"
              android:layout_height= "match_parent"/>

          <!-- TextView as the child of LinearLayout inside  HorizontalScrollView  -->

          <TextView
              android:layout_margin= "16dp"
              android:textColor= "#ffffff"
              android:background= "@color/color2"
              android:layout_gravity= "center"
              android:gravity= "center"
              android:text= "The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! Now fax quiz Jack! my brave ghost pled. Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch Jeopardy!, Alex Trebek's fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. Brawny gods "
              android:layout_width= "320dp"
              android:layout_height= "match_parent"/>
      </LinearLayout>

  </HorizontalScrollView>

</RelativeLayout>

Step 3: MainActivity.java file

There is nothing to do with the MainActivity.java file for this project, so keep it as it is.

//MainActivity.java file
package com.studytonight.project;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

Output:

In the below snapshots, you can see how the HorizontalScrollView will look in the android application.

horizontal scroll view in android studio example

scrolling right...

horizontal scroll view in android studio example

and you will see the content too.

horizontal scroll view in android studio example

Conclusion:

This is a basic example of creating a HorizontalScrollView. You can try different layouts using this in your Android application. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.


RELATED POSTS



Subscribe and receive amazing posts directly in your inbox.