Android ScrollView with fixed Header and Footer Layout Example
September 19, 2015
This page will provide Android ScrollView with fixed header and footer layout example. When the number of lines of body content will be more, there will be scroll line. In our example there will be a header which will always be fixed at the top of mobile screen and a footer that will always be fixed at the bottom of the screen. The body content have scroll view with full body view. Find the complete example.
Layout
Find the layout.layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:ads="http://schemas.android.com/apk/res-auto"> <RelativeLayout android:id="@+id/header" android:layout_width="match_parent" android:layout_height="30dp" android:layout_alignParentTop="true" android:background="#689F38" android:gravity="center" android:layout_gravity="center"> <TextView android:id="@+id/header_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/header_msg" android:textColor="#FFFFFF" android:textSize="25sp"/> </RelativeLayout> <RelativeLayout android:id="@+id/footer" android:layout_width="match_parent" android:layout_height="30dp" android:layout_alignParentBottom="true" android:background="#689F38" android:gravity="center" android:layout_gravity="center"> <TextView android:id="@+id/footer_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/footer_msg" android:textColor="#FFFFFF" android:gravity="center" android:textSize="25sp"/> </RelativeLayout> <ScrollView android:id="@+id/scroll_view" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_above="@+id/footer" android:layout_below="@+id/header" android:fillViewport="true"> <LinearLayout android:id="@+id/myLayout" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FFFFFF" android:fillViewport="true"> <TextView android:id="@+id/bodytext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/body_msg" android:textColor="#F44336" android:gravity="center" android:textSize="25sp"/> </LinearLayout> </ScrollView> </RelativeLayout>
2. To create header and footer, create another two <RelativeLayout> within root element.
3. For header, add the attribute
android:layout_alignParentTop="true"
This keeps header always at the top.
4. For footer, add the attribute
android:layout_alignParentBottom="true"
This keeps footer always at the bottom.
5. For body content, first create <ScrollView> and within it, create your layout. In our example we have created <LinearLayout>. To keep scroll view lower and upper limit within footer and header, we have to add attributes in ScrollView like
android:layout_above="@+id/footer"
android:layout_below="@+id/header"
To fill the view in the full screen, use the below attribute
android:fillViewport="true"
Activity Class
Find the activity class.MainActivity.java
package com.concretepage; import android.app.Activity; import android.os.Bundle; import android.text.Html; import android.view.Menu; import android.widget.TextView; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setBodyText(); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; } private void setBodyText() { TextView textView = (TextView)findViewById(R.id.bodytext); String text = "Line 1<br/><br/>Line 2<br/><br/>Line 3<br/><br/>" + "Line 4<br/><br/>Line 5<br/><br/>Line 6<br/><br/>" + "Line 7<br/><br/>Line 8<br/><br/>Line 9<br/><br/>" + "Line 10<br/><br/>Line 11<br/><br/>Line 12<br/><br/>" + "Line 13<br/><br/>Line 14<br/><br/>Line 15<br/><br/>"; textView.setText(Html.fromHtml(text)); } }
AndroidManifest.xml
Find the manifest file.<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.concretepage" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="14"/> <application android:allowBackup ="false" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar"> <activity android:name="com.concretepage.MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
strings.xml
Find the strings.xml<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Concretepage</string> <string name="footer_msg">Footer Text</string> <string name="header_msg">Header Text</string> <string name="body_msg"> Body Message </string> </resources>
Output
Find the output.