Question

I was looking at an example from the below website.

link for the layout

Has an wonderful tutorial on developing dashboard layout.

For Main Screen footer sits perfectly at the end of the layout but for other screens when I try to put footer it renders at the middle of the layout.

I have also attached the code for the better understanding.

this is for style.xml

<resources>
<style name="ActionBarCompat">
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">50dp</item>
    <item name="android:orientation">horizontal</item>
    <item name="android:background">@drawable/actionbar_background</item>
</style>

<style name="DashboardButton">
    <item name="android:layout_gravity">center_vertical</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:gravity">center_horizontal</item>
    <item name="android:drawablePadding">2dp</item>
    <item name="android:textSize">16dp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">#ff29549f</item>
    <item name="android:background">@null</item>
</style>    

 <style name="FooterBar">
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">40dp</item>
    <item name="android:orientation">horizontal</item>
    <item name="android:background">#dedede</item>
</style>     
</resources>

this is for header(action_bar) actionbar_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
style="@style/ActionBarCompat" >

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:clickable="false"
    android:paddingLeft="15dip"
    android:scaleType="center"
    android:src="@drawable/facebook_logo" />

</LinearLayout>

Below is for footer bar footer_layout.xml

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   style="@style/FooterBar"
   android:id="@+id/footerMenuOptions" >
<TextView android:text="www.facebook.com"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="#606060"
        android:gravity="center"
        android:paddingTop="10dip"/>
  </LinearLayout>

Below is the layout for the attached screen

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"  
android:background="#f8f9fe">
<include layout="@layout/actionbar_layout"/>

<LinearLayout android:layout_width="fill_parent"
            android:layout_height="wrap_content">
        <TextView android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Events Screen"
                android:textSize="25dip"
                android:padding="15dip"
                android:textStyle="bold"
                android:textColor="#ff29549f"/> 

</LinearLayout>   
 <include layout="@layout/footer_layout"/>
</LinearLayout>

We can clearly see how the footer is getting in middle of the screen in the attached image.

Tried with setting with RelativeLayout but the same rendering problem

Tried with LinearLayout with setting
android:layout_alignParentBottom="true" and placing the include of the footer <include layout="@layout/footer_layout"> in the Linear Layout but the same rendering problem.

Looking forward to your reply.
thanks.

Answer 1

Try with RelativeLayout and use its android:layout_below and android:layout_above for center contents and android:layout_alignParentBottom for View to stick to bottom
Do this way:

<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="wrap_content" android:id="@+id/top_control_bar">
        <include layout="@layout/actionbar_layout"/>
    </RelativeLayout>
    <LinearLayout android:id="@+id/bottom_control_bar"
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">
         <include layout="@layout/footer_layout"/>
    </LinearLayout>
    <LinearLayout android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/top_control_bar"
            android:layout_above="@id/bottom_control_bar">
            <TextView android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="Events Screen"
                    android:textSize="25dip"
                    android:padding="15dip"
                    android:textStyle="bold"
                    android:textColor="#ff29549f"/> 

    </LinearLayout>   

</RelativeLayout>