{"id":491,"date":"2016-01-06T08:14:14","date_gmt":"2016-01-06T08:14:14","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=491"},"modified":"2019-06-12T10:24:05","modified_gmt":"2019-06-12T10:24:05","slug":"scrollview","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/scrollview","title":{"rendered":"ScrollView And Horizontal ScrollView Tutorial With Example In Android"},"content":{"rendered":"

In android ScrollView can hold only one direct child. This means that, if you have complex layout with more views(Buttons, TextViews or any other view) then you must enclose them inside another standard layout like Table Layout, Relative Layout or Linear Layout. You can specify layout_width and layout_height to adjust width and height of screen. You can specify height and width in dp(density pixel) or px(pixel). Then after enclosing them in a standard layout, enclose the whole layout in ScrollView to make all the element or views scrollable.<\/p>\n

ScrollView in Android Studio Design:<\/strong><\/span> It is present inside Containers >> ScrollView or HorizontalScrollView<\/p>\n

\"ScrollView<\/center>Important Note 1: <\/strong><\/span>We never use a Scroll View with a ListView because List View is default scrollable(i.e. vertical scrollable). More importantly, doing this affects all of the important optimizations in a List View for dealing with large lists(list items). Just because it effectively forces the List View to display its entire list of items to fill up the infinite container supplied by a ScrollView so we don’t use it with List View.<\/p>\n

Important Note 2:<\/strong><\/span> In android default ScrollView is used to scroll the items in vertical direction and if you want to scroll the items horizontally then you need to implement horizontal ScrollView.<\/p>\n

ScrollView Syntax:<\/strong><\/p>\n

<ScrollView\r\nandroid:id=\"@+id\/scrollView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\">\r\n\r\n\r\n<!-- add child view\u2019s here -->\r\n \r\n\r\n<\/ScrollView>\r\n<\/pre>\n
Here is how Scroll View looks in Android:<\/p>\n
\"Scrollview<\/center><\/p>\n
\n
Horizontal ScrollView:<\/strong><\/h4>\n
In android, You can scroll the elements or views in both vertical and horizontal directions. To scroll in Vertical we simply use ScrollView as we shown in the previous code of this article and to scroll in horizontal direction we need to use HorizontalScrollview.<\/p>\n
\"HorizontalScrollView<\/center>Below is HorizontalScrollView syntax in Android is:<\/p>\n
<HorizontalScrollView\r\nandroid:id=\"@+id\/horizontalscrollView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\">\r\n\r\n<-- add child view\u2019s here -->\r\n\r\n<\/HorizontalScrollView >\r\n<\/pre>\n
\n
Attributes Of Scroll View:<\/strong><\/h4>\n
ScrollView and HorizontalScrollView has same attributes, the only difference is scrollView scroll the child items in vertical direction while horizontal scroll view scroll the child items in horizontal direction.<\/p>\n
Now let\u2019s we discuss about the attributes that helps us to configure a ScrollView and its child controls. Some of the most important attributes you will use with ScrollView include:<\/p>\n
1. id: <\/strong><\/span>In android, id attribute is used to uniquely identify a ScrollView.<\/p>\n
Below is id attribute\u2019s example code with explanation included.<\/p>\n
<ScrollView\r\nandroid:id=\"@+id\/scrollView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\n\/>\r\n<\/pre>\n
2. scrollbars: <\/strong><\/span>In android, scrollbars attribute is used to show the scrollbars in horizontal or vertical direction. The possible Value of scrollbars is vertical, horizontal or none. By default scrollbars is shown in vertical direction in scrollView and in horizontal direction in HorizontalScrollView.<\/p>\n
Below is scrollbars attribute\u2019s example code in which we set the scrollbars in vertical direction.<\/p>\n
< HorizontalScrollView\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:scrollbars=\"vertical\"\/><!--scrollbars in vertical direction-->\r\n<\/pre>\n
\n
Example of ScrollView In Android Studio:<\/strong><\/h4>\n
Example 1:<\/strong><\/span> In this example we will use 10 button and scroll them using ScrollView in vertical direction. Below is the code and final Output we will create:<\/p>\n
Download Code<\/a> ? <\/a><\/p>\n
\"ScrollView<\/center>Step 1:<\/strong> Create a new project in Android Studio and name it scrollviewExample.<\/p>\n
Select File -> New -> New Project -> Android Application Project (or) Android Project. Fill the forms and click “Finish” button.<\/p>\n
Step 2:<\/strong> Open res -> layout -> activity_main.xml (or) main.xml and add below code. Here we are creating a Relative Layout having 10 buttons which are nested in Linear Layout and then in ScrollView.<\/p>\n
Important Note:<\/strong><\/span> Remember ScrollView can hold only one direct child. So we have to jointly put 10 buttons inside Linear Layout to make it one child. And then we put it inside ScrollView.<\/p>\n
<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nxmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\ntools:context=\".MainActivity\">\r\n\r\n<ScrollView\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:scrollbars=\"vertical\">\r\n\r\n<LinearLayout\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\"\r\nandroid:layout_margin=\"20dp\"\r\nandroid:orientation=\"vertical\">\r\n\r\n<Button\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:background=\"#f00\"\r\nandroid:text=\"Button 1\"\r\nandroid:textColor=\"#fff\"\r\nandroid:textSize=\"20sp\" \/>\r\n\r\n<Button\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:layout_marginTop=\"20dp\"\r\nandroid:background=\"#0f0\"\r\nandroid:text=\"Button 2\"\r\nandroid:textColor=\"#fff\"\r\nandroid:textSize=\"20sp\" \/>\r\n\r\n<Button\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:layout_marginTop=\"20dp\"\r\nandroid:background=\"#00f\"\r\nandroid:text=\"Button 3\"\r\nandroid:textColor=\"#fff\"\r\nandroid:textSize=\"20sp\" \/>\r\n\r\n<Button\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:layout_marginTop=\"20dp\"\r\nandroid:background=\"#ff0\"\r\nandroid:text=\"Button 4\"\r\nandroid:textColor=\"#fff\"\r\nandroid:textSize=\"20sp\" \/>\r\n\r\n<Button\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:layout_marginTop=\"20dp\"\r\nandroid:background=\"#f0f\"\r\nandroid:text=\"Button 5\"\r\nandroid:textColor=\"#fff\"\r\nandroid:textSize=\"20sp\" \/>\r\n\r\n<Button\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:layout_marginTop=\"20dp\"\r\nandroid:background=\"#f90\"\r\nandroid:text=\"Button 6\"\r\nandroid:textColor=\"#fff\"\r\nandroid:textSize=\"20sp\" \/>\r\n\r\n<Button\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:layout_marginTop=\"20dp\"\r\nandroid:background=\"#f00\"\r\nandroid:text=\"Button 7\"\r\nandroid:textColor=\"#ff9\"\r\nandroid:textSize=\"20sp\" \/>\r\n\r\n<Button\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:layout_marginTop=\"20dp\"\r\nandroid:background=\"#444\"\r\nandroid:text=\"Button 8\"\r\nandroid:textColor=\"#fff\"\r\nandroid:textSize=\"20sp\" \/>\r\n\r\n<Button\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:layout_marginTop=\"20dp\"\r\nandroid:background=\"#ff002211\"\r\nandroid:text=\"Button 9\"\r\nandroid:textColor=\"#fff\"\r\nandroid:textSize=\"20sp\" \/>\r\n\r\n<Button\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:layout_marginTop=\"20dp\"\r\nandroid:background=\"#0f0\"\r\nandroid:text=\"Button 10\"\r\nandroid:textColor=\"#fff\"\r\nandroid:textSize=\"20sp\" \/>\r\n\r\n<\/LinearLayout>\r\n\r\n<\/ScrollView>\r\n\r\n<\/RelativeLayout>\r\n<\/pre>\n
Step 3:<\/strong> Now Open src -> package -> MainActivity.java and paste the below code<\/p>\n
package com.example.gourav.scrollviewExample;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n@Override\r\nprotected void onCreate(Bundle savedInstanceState) {\r\nsuper.onCreate(savedInstanceState);\r\nsetContentView(R.layout.activity_main<\/em>);\r\n}\r\n}\r\n<\/pre>\n
Step 4:<\/strong> Now open manifest.xml and paste the below code<\/p>\n
<?<\/em>xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<\/em><manifest xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\npackage=\"com.example.gourav.scrollviewExample\" >\r\n\r\n<application\r\nandroid:allowBackup=\"true\"\r\nandroid:icon=\"@mipmap\/ic_launcher\"\r\nandroid:label=\"@string\/app_name\"\r\nandroid:theme=\"@style\/AppTheme\" >\r\n<activity\r\nandroid:name=\".MainActivity\"\r\nandroid:label=\"@string\/app_name\" >\r\n<intent-filter>\r\n<action android:name=\"android.intent.action.MAIN\" \/>\r\n<category android:name=\"android.intent.category.LAUNCHER\" \/>\r\n<\/intent-filter>\r\n<\/activity>\r\n<\/application>\r\n\r\n<\/manifest>\r\n<\/pre>\n
Step 5:<\/strong> Lastly open res ->values -> strings.xml and paste the below code<\/p>\n
<resources>\r\n<string name=\"app_name\">ScrollViewExample<\/string>\r\n<string name=\"hello_world\">Hello world!<\/string>\r\n<string name=\"action_settings\">Settings<\/string>\r\n<\/resources>\r\n<\/pre>\n
 Output:<\/strong><\/p>\n
Now run the App in Emulator \/ AVD or in real device. You will see the 10 buttons which can be scrollable in vertical direction.<\/p>\n
\"ScrollView<\/center><\/p>\n
\n
Example 2:<\/span><\/strong> In this example we will scroll the buttons in horizontal direction. Below is the complete code and final output:<\/p>\n
Download Code<\/a> ? <\/a><\/p>\n
\"horizontal<\/center>Step 1:<\/strong> Create a new project and name it horizontalscrollviewExample.<\/p>\n
Select File -> New -> New Project and Fill the forms and click “Finish” button.<\/p>\n
Step 2:<\/strong> Now open res -> layout -> activity_mail.xml (or) main.xml and add below code. Here we are creating same buttons in HorizontalScrollView.<\/p>\n
<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\".MainActivity\">\r\n\r\n    <HorizontalScrollView\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"fill_parent\"\r\n        android:scrollbars=\"horizontal\">\r\n\r\n        <LinearLayout\r\n            android:layout_width=\"fill_parent\"\r\n            android:layout_height=\"fill_parent\"\r\n            android:orientation=\"horizontal\">\r\n\r\n            <Button\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_gravity=\"center\"\r\n                android:layout_margin=\"20dp\"\r\n                android:background=\"#f00\"\r\n                android:padding=\"10dp\"\r\n                android:text=\"Button 1\"\r\n                android:textColor=\"#fff\"\r\n                android:textSize=\"20sp\" \/>\r\n\r\n            <Button\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_gravity=\"center\"\r\n                android:layout_margin=\"20dp\"\r\n                android:background=\"#0f0\"\r\n                android:padding=\"10dp\"\r\n                android:text=\"Button 2\"\r\n                android:textColor=\"#fff\"\r\n                android:textSize=\"20sp\" \/>\r\n\r\n            <Button\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_gravity=\"center\"\r\n                android:layout_margin=\"20dp\"\r\n                android:background=\"#00f\"\r\n                android:padding=\"10dp\"\r\n                android:text=\"Button 3\"\r\n                android:textColor=\"#fff\"\r\n                android:textSize=\"20sp\" \/>\r\n\r\n            <Button\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_gravity=\"center\"\r\n                android:layout_margin=\"20dp\"\r\n                android:background=\"#ff0\"\r\n                android:padding=\"10dp\"\r\n                android:text=\"Button 4\"\r\n                android:textColor=\"#fff\"\r\n                android:textSize=\"20sp\" \/>\r\n\r\n            <Button\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_gravity=\"center\"\r\n                android:layout_margin=\"20dp\"\r\n                android:background=\"#f0f\"\r\n                android:padding=\"10dp\"\r\n                android:text=\"Button 5\"\r\n                android:textColor=\"#fff\"\r\n                android:textSize=\"20sp\" \/>\r\n\r\n            <Button\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_gravity=\"center\"\r\n                android:layout_margin=\"20dp\"\r\n                android:background=\"#f90\"\r\n                android:padding=\"10dp\"\r\n                android:text=\"Button 6\"\r\n                android:textColor=\"#fff\"\r\n                android:textSize=\"20sp\" \/>\r\n\r\n            <Button\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_gravity=\"center\"\r\n                android:layout_margin=\"20dp\"\r\n                android:background=\"#f00\"\r\n                android:padding=\"10dp\"\r\n                android:text=\"Button 7\"\r\n                android:textColor=\"#ff9\"\r\n                android:textSize=\"20sp\" \/>\r\n\r\n            <Button\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_gravity=\"center\"\r\n                android:layout_margin=\"20dp\"\r\n                android:background=\"#444\"\r\n                android:padding=\"10dp\"\r\n                android:text=\"Button 8\"\r\n                android:textColor=\"#fff\"\r\n                android:textSize=\"20sp\" \/>\r\n\r\n            <Button\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_gravity=\"center\"\r\n                android:layout_margin=\"20dp\"\r\n                android:background=\"#ff002211\"\r\n                android:padding=\"10dp\"\r\n                android:text=\"Button 9\"\r\n                android:textColor=\"#fff\"\r\n                android:textSize=\"20sp\" \/>\r\n\r\n            <Button\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_gravity=\"center\"\r\n                android:layout_margin=\"20dp\"\r\n                android:background=\"#0f0\"\r\n                android:padding=\"10dp\"\r\n                android:text=\"Button 10\"\r\n                android:textColor=\"#fff\"\r\n                android:textSize=\"20sp\" \/>\r\n\r\n        <\/LinearLayout>\r\n\r\n    <\/HorizontalScrollView>\r\n\r\n<\/RelativeLayout><\/pre>\n
Step 3:<\/strong> Now open app -> java -> MainActivity.java in package and paste the below code:<\/p>\n
package com.example.gourav.horizontalscrollviewExample;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n    }\r\n}\r\n   <\/pre>\n
Step 5:<\/strong> Now open AndroidManifest.xml inside manifests and paste the below code:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<manifest xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    package=\"com.example.gourav.horizontalscrollviewExample\" >\r\n\r\n    <application\r\n        android:allowBackup=\"true\"\r\n        android:icon=\"@mipmap\/ic_launcher\"\r\n        android:label=\"@string\/app_name\"\r\n        android:theme=\"@style\/AppTheme\" >\r\n        <activity\r\n            android:name=\"com.example.gourav.horizontalscrollviewExample.MainActivity\"\r\n            android:label=\"@string\/app_name\" >\r\n            <intent-filter>\r\n                <action android:name=\"android.intent.action.MAIN\" \/>\r\n\r\n                <category android:name=\"android.intent.category.LAUNCHER\" \/>\r\n            <\/intent-filter>\r\n        <\/activity>\r\n    <\/application>\r\n\r\n<\/manifest><\/pre>\n
Step 6:<\/strong> Open res ->values -> strings.xml and paste the below code:<\/p>\n
<resources>\r\n    <string name=\"app_name\">ScrollViewExample<\/string>\r\n    <string name=\"hello_world\">Hello world!<\/string>\r\n    <string name=\"action_settings\">Settings<\/string>\r\n<\/resources><\/pre>\n
 Output:<\/strong><\/p>\n
Now run the App in Emulator \/AVD or real device and you will see the 10 buttons can now be scrollable in Horizontal direction.<\/p>\n
\"horizontal<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
In android ScrollView can hold only one direct child. This means that, if you have complex layout with more views(Buttons, TextViews or any other view) then you must enclose them inside another standard layout like Table Layout, Relative Layout or Linear Layout. You can specify layout_width and layout_height to adjust width and height of screen. … Continue reading ScrollView And Horizontal ScrollView Tutorial With Example In Android<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-491","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"ScrollView And Horizontal ScrollView Tutorial With Example In Android \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"Tutorial on Scrollview and Horizontal ScrollView teaches how views are make scrollable vertically and horizontally using examples and code in Android Studio.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/scrollview\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=491"}],"version-history":[{"count":3,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/491\/revisions"}],"predecessor-version":[{"id":2796,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/491\/revisions\/2796"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}