Android ScrollView allows us to create a scrollable layout on the android screen.
Android ScrollView
ScrollView is a special type of FrameLayout that allows users to scroll through a list of views. It is useful when the layout occupies more space than the physical display. The ScrollView can contain only one child view or ViewGroup, which normally is a LinearLayout.
Note: Do not use a ListView together with the ScrollView. The ListView is designed to display a list of related information and is optimized for dealing with large lists. Also, ListView contains built-in scrolling capabilities.
- ScrollView only supports vertical scrolling. We have to use
HorizontalScrollViewfor horizontal scrolling. - The
android:fillViewportproperty defines whether the scrollview should stretch its content to fill the viewport.
ScrollView XML Layout
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<?xml version="1.0" encoding="utf-8"?> <ScrollView android:id="@+id/widget54" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="https://schemas.android.com/apk/res/android" > <LinearLayout android:layout_width="310px" android:layout_height="wrap_content" android:orientation="vertical" > <Button android:id="@+id/button1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Back" /> <Button android:id="@+id/button2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Button 1" /> <Button android:id="@+id/button3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Button 2" /> <TextView android:text="This textView is placed inside a LinearLayout which is a child ViewGroup contained in a ScrollView" android:layout_width="fill_parent" android:textSize="18sp" android:layout_height="750px" /> <Button android:id="@+id/button4" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Button 3" /> <Button android:id="@+id/button5" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Button 4" /> </LinearLayout> </ScrollView> |
We have explicitly assigned a larger size of the layout_height of the TextView so that ScrollView comes into use.
Android ScrollView Example Project
This project consists of two Activities: MainActivity and SecondActivity.
The MainActivity displays the TableLayout.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
package com.journaldev.layoutspartthree; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button; public class MainActivity extends Activity { Button next; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.layout_table); next=(Button)findViewById(R.id.next); next.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(MainActivity.this, SecondActivity.class); startActivity(intent); } }); } @Override public void onBackPressed() { finish(); } } |
The SecondActivity.java contains the ScrollView with a LinearLayout inside it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
package com.journaldev.layoutspartthree; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button; public class SecondActivity extends Activity { Button back; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.layout_scroll); back.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent= new Intent(SecondActivity.this,MainActivity.class); startActivity(intent); } }); } } |
Output:
In the above image, the individual columns in all the three rows are highlighted.
The vertical scrollbars are visible on the right side of the screen.
Reference: ScrollView Official Doc