How to use ScrollView in Android?
Just make the top-level layout a ScrollView:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<!-- everything you already have -->
</TableLayout>
</ScrollView>
How to use ScrollView
Using ScrollView
is not very difficult. You can just add one to your layout and put whatever you want to scroll inside. ScrollView
only takes one child so if you want to put a few things inside then you should make the first thing be something like a LinearLayout
.
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- things to scroll -->
</LinearLayout>
</ScrollView>
If you want to scroll things horizontally, then use a HorizontalScrollView
.
Making the content fill the screen
As is talked about in this post, sometimes you want the ScrollView
content to fill the screen. For example, if you had some buttons at the end of a readme. You want the buttons to always be at the end of the text and at bottom of the screen, even if the text doesn't scroll.
If the content scrolls, everything is fine. However, if the content is smaller than the size of the screen, the buttons are not at the bottom.
This can be solved with a combination of using fillViewPort
on the ScrollView
and using a layout weight on the content. Using fillViewPort
makes the ScrollView
fill the parent area. Setting the layout_weight
on one of the views in the LinearLayout
makes that view expand to fill any extra space.
Here is the XML
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"> <--- fillViewport
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/textview"
android:layout_height="0dp" <---
android:layout_weight="1" <--- set layout_weight
android:layout_width="match_parent"
android:padding="6dp"
android:text="hello"/>
<LinearLayout
android:layout_height="wrap_content" <--- wrap_content
android:layout_width="match_parent"
android:background="@android:drawable/bottom_bar"
android:gravity="center_vertical">
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Accept" />
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Refuse" />
</LinearLayout>
</LinearLayout>
</ScrollView>
The idea for this answer came from a previous answer that is now deleted (link for 10K users). The content of this answer is an update and adaptation of this post.
There are two options. You can make your entire layout to be scrollable or only the TextView to be scrollable.
For the first case,
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1" >
<TableRow>
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:layout_marginRight="5dip"
android:layout_marginTop="10dip"
android:src="@drawable/icon"
android:tint="#55ff0000" >
</ImageView>
</TableRow>
<TableRow>
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:text=" Name " >
</TextView>
<TextView
android:id="@+id/name1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="Veer" >
</TextView>
</TableRow>
<TableRow>
<TextView
android:id="@+id/age"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:text=" Age" >
</TextView>
<TextView
android:id="@+id/age1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="23" >
</TextView>
</TableRow>
<TableRow>
<TextView
android:id="@+id/gender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:text=" Gender" >
</TextView>
<TextView
android:id="@+id/gender1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="Male" >
</TextView>
</TableRow>
<TableRow>
<TextView
android:id="@+id/profession"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:text=" Professsion" >
</TextView>
<TextView
android:id="@+id/profession1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="Mobile Developer" >
</TextView>
</TableRow>
<TableRow>
<TextView
android:id="@+id/phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:text=" Phone" >
</TextView>
<TextView
android:id="@+id/phone1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="03333736767" >
</TextView>
</TableRow>
<TableRow>
<TextView
android:id="@+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:text=" Email" >
</TextView>
<TextView
android:id="@+id/email1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="[email protected]" >
</TextView>
</TableRow>
<TableRow>
<TextView
android:id="@+id/hobby"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:text=" Hobby" >
</TextView>
<TextView
android:id="@+id/hobby1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="Play Games" >
</TextView>
</TableRow>
<TableRow>
<TextView
android:id="@+id/ilike"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:text=" I like" >
</TextView>
<TextView
android:id="@+id/ilike1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="Java, Objective-c" >
</TextView>
</TableRow>
<TableRow>
<TextView
android:id="@+id/idislike"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:text=" I dislike" >
</TextView>
<TextView
android:id="@+id/idislike1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="Microsoft" >
</TextView>
</TableRow>
<TableRow>
<TextView
android:id="@+id/address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:text=" Address" >
</TextView>
<TextView
android:id="@+id/address1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="Johar Mor" >
</TextView>
</TableRow>
<Relativelayout>
</Relativelayout>
</TableLayout>
</RelativeLayout>
</ScrollView>
or, as I said you can use scrollView for TextView alone.
A ScrollView is a special type of FrameLayout in that it allows users to scroll through a list of views that occupy more space than the physical display.I just add some attributes .
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollbars = "vertical"
android:scrollbarStyle="insideInset"
>
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1"
>
<!-- Add here which you want -->
</TableLayout>
</ScrollView>