Android ScrollView Example

Whenever we are out of space in our Layouts, there comes Android ScrollView to our rescue. Using ScrollView we can cover more content then the actual screen size. Android ScrollView are of two kinds :

  1. Vertical ScrollView : Whenever we fall short of space due to our content growing vertically then we use Vertical ScrollView.
  2. Horizontal ScrollView : If our content needs growth in horizontal manner, we use Horizontal ScrollView.

For drag-&-drop purpose you can add both ScrollViews from Composite menu (below Layouts).

Important Note : Android ScrollView cannot host more than one direct child, i.e. without adding any container layout you will not be able to use multiple components like TextView, Buttons, Drop-downs, ImageView, other layouts etc. So inside our ScrollView always place a LinearLayout first & then inside that LinearLayout add whatever you wish.

 


 

Download

Source code : ScrollView Vertical

 

Download

Source code : ScrollView Horizontal

 

 

 

 

 

 

 


(Refer – Configuring Existing AndroidStudioProject) Now Let us work on Project : ScrollView which you might have downloaded from above or you can follow the scripts below by copying it to implement in your Project. To launch Downloaded project, Extract the zip, copy it into AndroidStudioProjects. Now from Android Studio click open Existing Android Studio Project and select the path to extracted file we just copied in AndroidStudioProjects directory. If Sync SDK path prompt comes just click OK and you are ready to work. If still you get error check for AndroidStudioProjects/ScrollView/app/build.gradle , it will contain different SDK Version. Change it to SDK Version which you have.

 

 

1. Android ScrollView Vertical

activity_main.xml : Layout file

Explaining the above code :

  • Line 1-5  We have added Vertical ScrollView which extends until Line-88. Line-4 note that we should use layout_height=”wrap_content” since we are using a Vertical ScrollView which will grow vertically, so no need to use fill_parent. Line-5  we have added background to our ScrollView, which will lead to fixed background even when we scroll down i.e. background image will not move with the content on scrolling.
  • Line 8 As said above we have added a Container as direct child to ScrollView, since ScrollView cannot hold multiple items. Hence whatever we need to add, it should be placed inside this LinearLayout.
  • Next we simply add Buttons as contents inside our LinearLayout.

Output : Android ScrollView – Vertical

Android ScrollView Vertical

 

2. Android ScrollView Horizontal

activity_main.xml : Layout file

Explaining the above code :

  • Line 1-5  We have added Horizontal ScrollView which extends until Line-102. Line-4 note that we should use layout_width=”wrap_content” since we are using a Horizontal ScrollView which will grow horizontally, so no need to use fill_parent. Line-5  we have added background to our ScrollView, which will lead to fixed background even when we scroll down similar to that we added in our above Vertical ScrollView.
  • Line 8 As said above we have added a Container as direct child to our Horizontal ScrollView, since ScrollView cannot hold multiple items. Hence whatever we need to add, it should be placed inside this Horizontal LinearLayout.
  • Next we add some ImageViews as contents inside our Horizontal LinearLayout.

Output :  Android ScrollView – Horizontal

Android ScrollView Horizontal

 

MainActivity.java common for both horizontal & vertical layout

 

Try it yourself :

  • Try adding  android:scrollbars=”none”  to our ScrollView (both Vertical-Horizontal), so as to disable scroll-bar thumb.
  • Adding property  android:scrollbarThumbVertical=”@drawable/scroll_thumb”  will change style of the ScrollBar. Make sure the drawable image is present inside your drawable folders.
  • Remove the whole line of  background-image: android:background=”@drawable/background_img” & place it inside LinearLayout Tag. After running the App you will see that unlike the last one our background image will also get scrolled with the content.

 

Report Errors + Bugs & Become Insider for Nestedif.com

We would like to hear you, if you find any error or misspelled phrase while reading our tutorials. By reporting mistakes through email to insider@nestedif.com you could help other peers.