Android: Custom title bar doesn't fit on page

Question

Im giving my app a custom title bar and it seems to be half hidden behind the main page content:

in styles.xml I have:

</style>
    <style name="NewsAppTheme" parent="android:Theme.Light" >
</style>

In main.xml (The page with the title bar)

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="@dimen/tiny_4dp" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <!-- Top Row -->
        <LinearLayout
            android:baselineAligned="false"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <RelativeLayout
                android:id="@+id/relative_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="@dimen/tiny_4dp" >

                <ImageView
                    android:id="@+id/img_head"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:clickable="true"
                    android:contentDescription="@string/text_head"
                    android:scaleType="fitXY"
                    android:src="@drawable/headlines" />

                <TextView
                    android:id="@+id/text_head"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignLeft="@id/img_head"
                    android:layout_alignRight="@id/img_head"
                    android:layout_alignTop="@id/img_head"
                    android:gravity="left"
                    android:padding="@dimen/medium_15dp"
                    android:text="@string/text_head"
                    android:textSize="@dimen/large_20dp"
                    android:textStyle="bold" />

            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/relative_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="@dimen/tiny_4dp" >

                <ImageView
                    android:id="@+id/img_custom1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:clickable="true"
                    android:contentDescription="@string/text_custom1"
                    android:scaleType="fitXY"
                    android:src="@drawable/headlines" />

                <TextView
                    android:id="@+id/text_custom1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignLeft="@id/img_custom1"
                    android:layout_alignRight="@id/img_custom1"
                    android:layout_alignTop="@id/img_custom1"
                    android:gravity="left"
                    android:padding="@dimen/medium_15dp"
                    android:text="@string/text_custom1"
                    android:textSize="@dimen/large_20dp"
                    android:textStyle="bold" />

            </RelativeLayout>
        </LinearLayout>


        ..... and so on


    </LinearLayout>
</ScrollView>

And titlebar.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="35dp"
    android:layout_gravity="center_horizontal"
    android:orientation="horizontal"
    android:padding="@dimen/small_8dp" >

    <ImageView
        android:id="@+id/title_menu"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/small_8dp"
        android:src="@drawable/ic_grid" 
        android:contentDescription="@string/title_menu"/>

    <TextView
        android:id="@+id/title_title"
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:paddingLeft="@dimen/small_8dp"
        android:paddingRight="@dimen/small_8dp"
        android:paddingTop="@dimen/tiny_4dp"
        android:text="@string/title_title" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="right|center_vertical"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/title_minus"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:contentDescription="@string/title_minus"
            android:paddingRight="@dimen/small_8dp"
            android:src="@drawable/ic_minus" />

        <ImageView
            android:id="@+id/title_add"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:contentDescription="@string/title_add"
            android:paddingRight="@dimen/small_8dp"
            android:src="@drawable/ic_ok" />
    </LinearLayout>

</LinearLayout>

Has something I've done caused it to cut off the title bar? Ive been following tutorials that say the bar should be 35dp high, although changing that doesnt seem to have much effect.

Answer 1

You need to change the height of your titlebar.xml to make sure it gets the amount needed so other Views that this layout is included in doesn't take up room that it needs. So change the height to wrap_content instead of a fixed dp.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"   <!-- this guy here -->
android:layout_gravity="center_horizontal"
android:orientation="horizontal"
android:padding="@dimen/small_8dp" >