How can I have a list item and a textview and a button all on one screen

Question

I am trying to get a screen like this:

Basically I have a list and at the bottom I have a text field and a button in one row.

This is how my layout is right now, however, I don't see the textfield and the button. I just see the list view.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#F0EFF5">

    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="#b5b5b5"
        android:dividerHeight="1dp"
        android:cacheColorHint="#00000000"/>

    <EditText
        android:id="@+id/send_comment"
        style="@style/FormalSingleLineEditText"
        android:layout_width="match_parent"
        android:hint="write something" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Send"
        android:id="@+id/sendbutton"
    />

</LinearLayout>

The list layout looks like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:descendantFocusability="blocksDescendants"
    android:background="#FFFFFF"
    android:divider="#F0EFF5"
    >

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    />

    <TextView
        android:id="@+id/note"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
     />


</LinearLayout>

Answer 1

If i would have been at your place i would have used RelativeLayout instead

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
        <LinearLayout
           android:id="@+id/bottom_linear"
           android:alignParentBottom="true"
           android:alignParentLeft="true"
           android:layout_width="fill_parent"
           android:orientation="horizontal"
           android:layout_height="fill_parent"
           android:layout_height="50dp">
           <EditText
              android:id="@+id/send_comment"
              android:layout_width="wrap_cotent"
              android:layout_height="fill_parent"
              android:layout_weight="0.7"
              />

           <Button
              android:id="@+id/sendbutton"
              android:layout_width="wrap_cotent"
              android:layout_height="fill_parent"
              android:layout_weight="0.3"
              />

        </LinearLayout>

        <ListView
            android:id="@+id/list"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/bottom_linear"
            android:alignParentTop="true"
          />
</RelativeLayout>

What you are doing is Creating a relativelayout and adding a linearlayout with horizontal orientation and placing at the bottom of the screen... Then you are adding edittext and button with weight that will help to give the width dynamically 70% and 30%..

Then you are adding a listview and telling android to attach it at the top and keep it just above the bottom linearlayout indirectly it will also cover the whole screen above the linearlayout...

Hope it helps thanks... (if any error in xml comes plz try to use CTRL + SPACE for guess coz i wrote this when i cannot access eclipse..)

thx

Answer 2

I have written an app with a very similar layout and have included the XML of my layout below.

Have a parent that is a RelativeLayout. Create a Button inside of the parent, set the width and height as you see fit, set layout:alignparent to Bottom and Right. Create an EditText, set the height to the same as the button, set the width to match_parent, set the layout:alignParent to Bottom, Set layout:alignComponent to right:left . This will place an EditText along the bottom of the screen with its right edge touching the left edge of your button and its left edge touching the left side of the screen. Now, add a ListView to the layout. Set height and width to match_parent, Set layout:alignComponent to bottom:top . This should basically get you there. If you are stuck, have a look at my code below:

My layout XML:

<?xml version="1.0" encoding="utf-8"?>

<ListView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:id="@+id/listView"
    android:layout_alignParentLeft="false"
    android:layout_marginLeft="0dp"
    android:layout_alignParentTop="true"
    android:layout_marginTop="0dp"
    android:layout_above="@+id/messageET" />

<ImageView
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:id="@+id/addAttachment"
    android:padding="5dp"
    android:layout_alignParentLeft="true"
    android:src="#182c99"
    android:background="@color/kinetic_white"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    android:layout_alignParentTop="false" />

<com.kineticdata.kineticresponse.Widgets.FontEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/messageET"

    android:layout_toRightOf="@+id/addAttachment"
    android:layout_toLeftOf="@+id/sendButton"
    android:hint="@string/type_message"
    android:gravity="center_vertical"
    android:background="@color/kinetic_white"
    android:paddingLeft="5dp"
    android:layout_alignParentBottom="true"
    android:minHeight="60dp"
    android:focusableInTouchMode="true"
    android:focusable="true" />

<View
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:background="@color/kinetic_light_gray"
    android:layout_alignParentLeft="false"
    android:layout_alignParentTop="false"
    android:layout_toRightOf="@+id/addAttachment"
    android:layout_alignTop="@+id/messageET" />

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/kinetic_light_gray"
    android:layout_below="@+id/listView" />

<view
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    class="com.kineticdata.kineticresponse.Widgets.FontTextView"
    android:id="@+id/sendButton"
    android:text="@string/send"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:gravity="center_vertical" />

<RelativeLayout
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:id="@+id/attachmentContainer"
    android:background="@color/kinetic_black"
    android:layout_above="@+id/messageET"
    android:layout_marginLeft="20dp"
    android:layout_marginBottom="5dp">

    <ImageView
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:id="@+id/attachedImage"
        android:layout_centerInParent="true" />

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:id="@+id/cancelButton"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:background="@color/kinetic_barely_gray"
        android:layout_marginRight="2dp"
        android:layout_marginTop="2dp"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

Answer 3

Try to change the ListView layout parameters to something like this

<ListView
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:divider="#b5b5b5"
    android:dividerHeight="1dp"
    android:cacheColorHint="#00000000"/>

the layout_weight attribute makes it use the whole height that is not already occupied by the TextView or the Button.