How to add background image with fixed header then a scrolling listview in android

Question

I am beginner in android .I just want to clear my concepts .So i start making my first screen in android .I want to add on background image .Then one fixed header (on header there is three buttons ).Then scrolling list view ?can you please help me .I know i have to do coding in xml .just give me some hint so that i can start.. .I have all images .

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".First_activity" 
    android:background="@drawable/a">
   <RelativeLayout
    android:id="@+id/main_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
      android:src="@drawable/header" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true" 
        >

        <ImageButton
              android:id="@+id/setting"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
             android:src="@drawable/settings" />

        <ImageButton
            android:id="@+id/add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:src="@drawable/add"/>

        <ImageButton
             android:id="@+id/edit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
             android:src="@drawable/edit"  />

    </RelativeLayout>

</RelativeLayout>

   <ListView
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
</ListView>
</RelativeLayout>

Till now i succeed upto this..

header image is not display ..three button are not shown..?

Answer 1

From what you said you need to use a Linear Layout, in which items are placed one after other, either horizontally or vertically. In your case you will have a main LinearLayout, oriented vertically, which will contain two children: onether LinearLayout and a ListView.

The second Linear Layout will have horizontal orientation, and here you will put the buttons. The ListView will represent your scroll-able list. But before starting I advice you to read about Layouts and ListView on android official documentatin. As you said you know xml I didn't put any actual example and tried just to explain theoretically, if you need any just say.

I hope this helps.

Answer 2

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    >

1. In your code I can't understand why you have this extra '>' at the end of third imageButton ?

2. Putting your listview inside the parent RelativeLayout is advisable.

3. And, as @thecoder mentioned, change your images names, as images and layout xml files only accept [az,0-9,_] in their names.

EDIT --

you have used 'match parent' for ListView , and its parent is your main relative layout, so it occupies all the space, your header is not showing, you will have to use android:background , not src. It will work then. What you wrote for your three imagebuttons, is for linear laout. For relativelayout, things will be slightly different. Check this out, your three images will be shown this way -

use following layout - `

<RelativeLayout
    android:id="@+id/main_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/header" >

    <ImageButton
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_launcher" />

    <ImageButton
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/imageView1"
        android:src="@drawable/ic_launcher" />

    <ImageButton
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/imageView2"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

<ListView
    android:id="@+id/listView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="104dp" 
    android:layout_below="@id/main_title">
</ListView>

`