Monday, 1 July 2013

How to set Header, Scrollable Content and Footer in Android?

In GUI, we want to show the content inside the header and footer layout.

Relative Layout is the best one for android to create and maintain the header,footer and scrollable content.

Here is the example code for the relative layout with header,footer and content.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout       xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical">
      <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:id="@+id/rlHeader"
            android:background="#2F5E7A">
            <TextView
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_centerInParent="true"
                  android:textSize="16dp"
                  android:textColor="#ffffff"
                  android:textStyle="bold"
                  android:text="Header Item"/>
      </RelativeLayout>
     
      <LinearLayout
            android:id="@+id/llFooter"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:background="#2F5E7A"
            android:gravity="center"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true">
            <TextView
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_gravity="center"    
                  android:textSize="16dp"
                  android:textColor="#ffffff"
                  android:textStyle="bold"
                  android:text="Footer Item"/>       
      </LinearLayout>  
     
      <ScrollView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/rlHeader"
            android:layout_above="@id/llFooter"
          >
      <LinearLayout
            android:id="@android:id/empty"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >
           
          <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Content Item1"/>
         
          <Button
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Content Item2" />
         
          <Button
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Content Item3" />
         
          <Button
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Content Item4"  />
         
          <Button
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Content Item5"  />
           
           <Button
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Content Item6"  />
         
          <Button
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Content Item7" />
         
          <Button
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Content Item8" />
         
           <Button
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Content Item9" />
         
          <Button
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Content Item10" />
         
          <Button
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Content Item11" />
      </LinearLayout>
      </ScrollView>
</RelativeLayout>

 Here we would need to place the content layout inside the "ScroolView"

Thank you.