Horizontal scrolling android studio

Android Horizontal ScrollView Tutorial With Example For Beginners

Warmest welcome to Android Horizontal ScrollView Tutorial With Example For Beginners.

I will explain about the definition and usage about the horizontal scroll view in this tutorial.

There are some cases where you need to show the icons or other things in the horizontal manner.

Now if the number of items are large then small screen of mobile device can not handle these items. Here, horizontal scroll view holds our hand.

For example, you are developing an app about the book store or library. Now you want to make book shelf in this app. Book shelf have horizontal design where you will show the cover page books in the horizontal manner.

Of course, there are much books in the every category. Here, you need to use the horizontal scroll view to show case book shelf with plenty of book cover pages.

A Horizontal scroll view is a sub class of Frame Layout meaning that you should place one child in it containing the entire contents to scroll. This child may itself be a layout manager with a complex hierarchy of objects.

Generally, developers prefer to use Linearlayout as an only child of the Horizontal Scroll View. Here, orientation of linearlayout is horizontal so that compiler place every child horizontally.

The TextView class also takes care of its own scrolling, so does not require a HorizontalScrollView, but using the two together is possible to achieve the effect of a text view within a larger container.

Using horizontalscrollview, you can enable horizontal scrolling only.

For vertical scrolling you should use Scroll View or ListView or RecyclerView Widgets.

XML Information

Following is the XML representation of the horizontalscrollview.

Following are the important properties of the horizontal scroll view.

1. android:layout_height

You can set the height of the horizontal scroll view by using this property.

To give fix height to the horizontal scroll view, you can use dp also.

2. android:layout_width

It will define the width of the horizontal scroll view. Generally, you should give value as match_parent so that it reduce the complexity for different screen size.

But you can also give fix size in the dp.

3. android:id

Id will specify the unique identity to the scroll view.

When you want to access your horizontal scroll view in the java file, You will need this id in the findViewById() method.

This id should be unique in the whole android studio project to reduce complexity and data redundancy.

4. android:fillViewport

It defines whether the horizontal scrollview should stretch its content to fill the viewport.

This property accepts boolean value. If true then scroll view will stretch it’s content otherwise not.

For more details about this property, visit this tutorial.

Methods of Horizontal Scroll View

1. addView(View child)

Using the above method, you can add a child from the java class.

2. arrowScroll(int direction)

Handle scrolling in response to a left or right arrow click.

3. computeScroll()

Called by a parent to request that a child update its values for mScrollX and mScrollY if necessary.

4. fullScroll(int direction)

This method handles scrolling in response to a “home/end” shortcut press.

5. isFillViewport()

Indicates whether this HorizontalScrollView’s content is stretched to fill the viewport.

This method checks whether the fillViewPort option is enabled for horizontal scroll view or not.

6. onTouchEvent(MotionEvent ev)

Implement this method to handle touch screen motion events.

7. requestChildFocus(View child, View focused)

Called when a child of this parent wants focus.

By default focus is hold by the horizontalscrollview.

8. scrollTo(int x, int y)

Set the scrolled position of your view.

This version also clamps the scrolling to the bounds of our child.

9. setFillViewport(boolean fillViewport)

Indicates this HorizontalScrollView whether it should stretch its content width to fill the viewport or not.

10. onSizeChanged(int w, int h, int oldw, int oldh)

This is called during layout when the size of this view has changed.

Android Horizontal ScrollView Example

Create a new and fresh project in the android studio.

While you are going through the process of preparing a brand new project in android studio, you will be asked to choose the type of the default activity.

Here, I recommend you to select Empty Activity. Empty activity does not write any source code automatically, so that we can have complete clear and empty project workspace.

Now in the new project, there are two automatically generated files. activity_main.xml and MainActiivity.java.

Step 1. Make XML file

In the activity_main.xml file, you need to add the below source code

Above file make a layout where compiler will put 11 buttons horizontally which you can scroll horizontally.

Root layout of this file is the constraint layout.

Constraint layout has only one child, which is the HorizontalScrollView. This tag is the main element, which will enable us to make our layout horizontal scrollable.

Now official documentation of HorizontalScrollView says that it should contain only one child.

So HorizontalScrollView also have only one child, which is Linearlayout.

This linearlayout contains the 11 buttons. Orientation property of linearlayout has the value “horizontal”.

Because of this “horizontal” value of orientation property, linearlayout will arrange all the eleven buttons in the horizontal manner.

If the value of orientation property is “vertical” then there is no meaning of using horizontal scroll view.

Step 2. Java Writings

Our main task in this project is to make horizontal scroll view.

We can achieve it from XML file activity_main.xml only.

So we do not need to do any programming logic in the JAVA file.

Hence, do not update anything in the MainActivity.java file.

Source code for MainActivity.java file is looking like the below

After this much work in this project, run it and you should get the below output

Another Example For Scroll View

Our first example was adding only buttons in the horizontal scroll view.

Now in this example, I will add images in the horizontal scroll view.

So again, make a new project in the android studio.

Again this time, you need select Empty activity as the default activity in this project.

Step 1. Updating activity_main.xml file

You will find activity_mian.xml file in this project also.

This time, source code for activity_mian.xml file is looking like the below

The parent element of this file is the HorizontalScrollView.

As mentioned in the previous example, horizontal scroll view can have only one child tag so this parent element have one child as a linearlayout.

Now this linearlayout contains several number of imageviews.

All this imageviews have mages of different marvel heroes.

Orientation property for this linearlayout has the value “horizontal”. Hence, compiler will set every image horizontally.

You can scroll to view all the images. You can also add textview, button,imageview together to make horizontal scroll view something like you can find on the play store.

Play store shows us various apps which are horizontally scrollable along with the app icon and app name.

Step 2. Java Programme

Similar to previous example, we have written all the logic for horizontal scroll view in the activity_main.xml file.

So again, we should not touch MainActivity.java file.

This file may look like the below

The final outcome of this file may look like the below

Источник

Android ScrollView (Horizontal, Vertical) with Examples

In android, ScrollView is a kind of layout that is useful to add vertical or horizontal scroll bars to the content which is larger than the actual size of layouts such as linearlayout, relativelayout, framelayout, etc.

Generally, the android ScrollView is useful when we have content that doesn’t fit our android app layout screen. The ScrollView will enable a scroll to the content which is exceeding the screen layout and allow users to see the complete content by scrolling.

The android ScrollView can hold only one direct child. In case, if we want to add multiple views within the scroll view, then we need to include them in another standard layout like linearlayout, relativelayout, framelayout, etc.

To enable scrolling for our android applications, ScrollView is the best option but we should not use ScrollView along with ListView or Gridview because they both will take care of their own vertical scrolling.

In android, ScrollView supports only vertical scrolling. In case, if we want to implement horizontal scrolling, then we need to use a HorizontalScrollView component.

The android ScrollView is having a property called android:fillViewport, which is used to define whether the ScrollView should stretch it’s content to fill the viewport or not.

Now we will see how to use ScrollView with linearlayout to enable scroll view to the content which is larger than screen layout in android application with examples.

Android ScrollView Example

Following is the example of enabling vertical scrolling to the content which is larger than the layout screen using an android ScrollView object.

Create a new android application using android studio and give names as ScrollViewExample. In case if you are not aware of creating an app in android studio check this article Android Hello World App.

Once we create an application, open activity_main.xml file from \res\layout folder path and write the code like as shown below.

activity_main.xml

If you observe above code, we used a ScrollView to enable the scrolling for linearlayout whenever the content exceeds layout screen.

Output of Android ScrollView Example

When we run the above example in android emulator we will get a result as shown below.

If you observe the above result, ScrollView provided a vertical scrolling for linearlayout whenever the content exceeds the layout screen.

As we discussed, ScrollView can provide only vertical scrolling for the layout. In case, if we want to enable horizontal scrolling, then we need to use HorizontalScrollView in our application.

We will see how to enable horizontal scrolling for the content which is exceeding the layout screen in the android application.

Android HorizontalScrollView Example

Now open activity_main.xml file in your android application and write the code like as shown below.

activity_main.xml

If you observe above code, we used a HorizontalScrollView to enable horizontal scrolling for linearlayout whenever the content exceeds layout screen.

Output of Android HorizontalScrollView Example

When we run the above example in the android emulator we will get a result like as shown below.

If you observe above result, HorizontalScrollView provided a horizontal scrolling for linearlayout whenever the content exceeds the layout screen.

This is how we can enable scrolling for the content which exceeds layout screen using ScrollView and HorizontalScrollView object based on our requirements.

Источник

Android ScrollView,NestedScrollView,HorizontalScrollView etc

In this piece we want to look at several scrollview variations or subclasses and how they are used. Here are the variations we cover so far:

1. ScrollView – Superclass
2. NestedScrollView – child class
3. HorizontalScrollView – child class
4. StickyScrollView – Child class and third party library.
5. ParallaxScrollView – child class and third party library

1. ScrollView

Android ScrollView Tutorials and Examples

A ScrollView is an android layout that permits it’s child views to be scrolled vertically. This is important because in many cases you need content to be scrolled. Normally adapterviews like ListView and recyclerview have scrolling capability but not many views. Hence we don’t use scrollview with them otherwise we get degraded performance.

With scrollview you only scroll up or down. However if you want horizontal scrolling then you can use the HorizontalScrollView.

Furthermore, ScrollView should only have one direct child. This then means that if you desire to add multiple children then use a ViewGroup like relativelayout or LinearLayout. Then add those children to the viewgroup and the viewgroup to Scrollview.

Android Engineeres are recommending that you use NestedScrollView instead of ScrollView for vertical scrolling.

This is because the latter offers greater user interface flexibility and support for the material design scrolling patterns.

ScrollView API Definition

A scrollview as a class resides in the android.widget package and derives from FrameLayout:

Here’s the inheritance hierarchy of FrameLayout:

Important ScrollView methods

(a). scrollTo(int x, int y)

In this method you pass the scrolled position of your view. This version also clamps the scrolling to the bounds of our child.

(b). smoothScrollTo(int x, int y)

Like scrollTo(int, int) , but scroll smoothly instead of immediately.

(c). getChildAt(int index)

This method will return the view at the specified position in the group.

(d). getChildCount()

This method returns the number of children in the group.

Quick ScrollView Examples

1. ScrollView – How to Scroll to the Top

Let’s see how you can scroll to the top of your scrollview.

2. How to Scroll to Down in ScrollView

Then we want to see also how we can scroll down to the bottom of our scrollview programmatically.

It’s a static method and we pass ScrollView instance as a parameter. First we get the height of the scrollview as we as it’s child counts.

At the end of the day we are still using the scrollTo() method, passing in the x and y positions.

3. How to smooth scroll to up

We use the smoothScrollTo() method and pass the positions.

4. How to smooth scroll to Down

Here’s how we can scroll to down programmatically.

5. How to calculate height of ScrollView by Child View

6. How to create a scrollview with maximum height limit

What if we desire to set the maximum height limit to our scrollview. Well we can simply create a custom scrollview by deriving from the android.widget.ScrollView class, override our constructors as well as the onMeasure() method.

7. Full ScrollView Example

Let’s look a full scrollview example.

(a). MainActivity.java

(b). activity_main.xml

2. NestedScrollView

Android NestedScrollView Tutorials and Examples.

NestedScrollView is a ScrollView that is able to act as a nested scrolling parent and child on both new and old versions of Android.

Nested scrolling is enabled by default in NestedScrollView.

NestedScrollView is recommended in many cases over ScrollView.

This is due it’s ability to offer greater user interface flexibility and support for the material design scrolling patterns.

NestedScrollView API Definition

NestedScrollView was added in android version 22.1.0 and belongs to Maven artifact com.android.support:support-compat:latest_version .

Like ScrollView, nested scrollview derives from FrameLayout.

However it goes further and implements three scrolling interfaces:

1. NestedScrollingParent – an interface implemented by [ViewGroups(/android/viewgroup)] that wish to support scrolling operations delegated by a nested child view.
2. NestedScrollingChild2 – an interface implemented by View subclasses that wish to support dispatching nested scrolling operations to a cooperating parent ViewGroup.
3. ScrollingView – An interface that can be implemented by Views to provide scroll related APIs.

Here’s the inheritance hierarchy for nestedscrollview:

You can find complete API reference in android developer documenattion.

Quick NestedScrollView Examples

1. How to Calculate NestedScrollView Height by it’s child view

HorizontalScrollView

Android HorizontalScrollView Tutorial and examples.

A HorizontalScrollView is a Layout container for a view hierarchy that can be scrolled by the user, allowing it to be larger than the physical display.

You use HorizontalScrollView, as the name suggests, to scroll horizontally. If you want to scroll vertically then you can use ScrollView or even better NestedScrollView.

All these «ScrollViews», HorizontalScrollView included, derive from the FrameLayout.

Hence you should strive to place only a single child. Then that child can have multiple other views.

Alot of people love using LinearLayout with horizontal orientation. Thus providing a nice and easy way of showing and then scrolling through views arranged nicely horizontally.

Beware that some views are capable of handling their own scrolling. Such is the textView. So it doesn’t require HorizontalScrollView.

HorizontalScrollView API Definition

HorizontalScrollView was added in API level 3 so is actually than you might think.

We said it derives from FrameLayout

Here’s it’s inheritance tree:

HorizontalScrollView Examples

4. StickyScrollView

StickyScrollView is a library that provides you with a scrollview with a custom header and footer. It is really ideal for showing details, for example product details. As you may know scrollview is a layout that permits its children to be scrolled.

Well StickScrollview provides you with the same capability as scrollview but allows you to add a header and footer.

StickyScrollView is written in Java and extends ScrollView class:

Installation

StickScrollView is hosted in Maven jitpack so to install first go to your root level build/gradle and register jitpack as a repository:

Then you add it as a dependency:

How to Use it

Well its a layout so its usage is very simple:

Full Example

Well first install as instructed above. Then make sure your minimum API level is API 16 or above.

(a). activity_main.xml

(b). MainActivity.java

First add your imports, including the StickyScrollView library:

Then create your activity class:

Define StickyScrollView as an instance field:

Reference views in your onCreate() method:

Now handle click events:

Here is the full code:

Here is the demo:

Special thanks to @amarjain07 for this awesome library and example.

5. Parallax Scroll

Android Paralax Scroll Library Tutorial and Example.

ParallaxScroll is a library that provides us with Parallax ScrollView and ListView for Android.

ParallaxScroll enriches us with these special adapterviews:

1. ParallaxListView.
2. ParallaxExpandableListView.
3. ParallaxScrollView.

This library was created by Nir Hartmann.

The library has existed for more than 5 years and is still actively maintained. It also has examples which we will explore later on.

ParallaxScroll supports Android 1.6 and above.

Android Parallax Scroll

See the demo app at Google Play here.

ParallaxScrollView internal Details

Let’s explore the internal specifics of Parallax before jumping to usage examples. We want to see the several classes from which the library is built so that we can even extend.

(a). ParallaxScrollView

This is class that internally derives from ScrollView.

You all know that a scrollview is a Layout container for a view hierarchy that can be scrolled by the user, allowing it to be larger than the physical display.

Like most View resources, ParallaxScrollView exposes three public constructors:

(a). ParallaxListView

ParallaxListView derives from the ListView class:

It also has three constructors we can use to create it’s instance:

It goes ahead and exposes us some methods we can use apart from the normall ListView methods:

(c). ParallaxExpandableListView

ParallaxExpandableListView adds parallax scroll to an ExpandableListView from which it derives.

This class provides us two constructors for object creation:

Here are some of the methods we can use apart from those we derive from ExpandableListView.

Installing ParallaxScroll

You can install ParallaxScroll from it’s maven repository via gradle.

All you need in android 1.6 and above. Then you add the following implementation statement in your app level build.gradle:

Then you sync the project to add the library files into your project.

Using ParallaxScroll

Let’s say you want to use a ScrollView , then you can add the following in your layout.

In that case we’ve used a ParallaxScrollView and placed inside it a LinearLayout with Text content that will be scrolled.

Well you can also add a ParallaxListView and ParallaxExpandableListView in your layout.

Full ParallaxScroll Examples.

Here’s an example.

1. Single Parallax ListView example.

Let’s start by looking at a our SingleParallaxListView example.

(a). CustomListAdapter.java

We start by writing our adapter class. It will derive from BaseAdapter.

(b). SingleParallaxListView.java

This is our activity class. This activity will contain our ParallaxListView.

(c). list_one_parallax.xml

You can see this is the layout that will be inflated into our SingleParallaxListView .

2. Multi Parallax ListView example.

We are using the CustomListAdapter we had already defined.

(a). MultipleParallaxListView.java

(b) list_multiple_parallax.xml

Single Parallax ScrollView Example

Let’s now look at single parallax scrollview example.

(a). SingleParallaxScrollView.java

(b) scroll_one_parallax.xml

4. SingleParallaxAlphaScrollView Example

(a) SingleParallaxAlphaScrollView.java

(b) scroll_one_parallax_alpha.xml

SingleParallax ExpandableListView Example

(a) CustomExpandableListAdapter.java

(b) SingleParallaxExpandableListView.java

(c) expand_list_one_parallax.xml

You can get full source samples below:

Download

Also check our video tutorial it’s more detailed and explained in step by step.

No.	Location	Link
1.	GitHub	Direct Download
2.	GitHub	Library
3.	Google Play	Demo App

Credit to the Original Creator @nirhart

How to Run

1. Download the project.
2. Go over to sample folder and edit import it to your android studio.Alternatively you can just copy paste the classes as well as the layouts and maybe other resources into your already created project.
3. Then edit the app level build/gradle to add our dependency as we had stated during the installation.

report this ad

Oclemy

Thanks for stopping by. My name is Oclemy(Clement Ochieng) and we have selected you as a recipient of a GIFT you may like ! Together with Skillshare we are offering you PROJECTS and 1000s of PREMIUM COURSES at Skillshare for FREE for 1 MONTH. To be eligible all you need is by sign up right now using my profile .

Источник