Christof Buechi
Christof Buechi

Reputation: 185

Android Layout XML: Divider below Listview

Because of the design of the app, I need to do the following: (I reduced the problem as much as possible - and searched in other answers, but havent found my problem exactly) layout draft As you can see in the picture, I have following components:

The Listview is on top, the button-area in the bottom and the divider between them. The Listview is variable in its size. Following is the difficult part: The divider has always be visible. The divider has always to be above the button-area. If the listview does not use the entire available space, the divider has to be exactly below the listview. If the Listview uses more space than available, the divider has to be exactly above the button-area. And of course, the listview should be scrollable.

I tried a long time with relative layout and also with weight in linearlayout. If you got a solution, please share your idea with me.

The following is the part of the layout, but it actually does not work as expected:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ListView
            android:id="@+id/notification_action_listview"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/navigation_item_background_selector"
            android:divider="@null"
            android:dividerHeight="0dp"
            android:orientation="vertical" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/divider_layout"
        android:layout_width="fill_parent"
        android:layout_height="1dp" >

        <include
            android:id="@+id/divider"
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            layout="@layout/divider_horizontal_green" />
    </LinearLayout>

   <LinearLayout
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center|bottom"
        android:orientation="vertical" >

        <Button
            android:id="@+id/notification_action_remove_button"
            style="@style/flat_button_red_rounded"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_big"
            android:paddingLeft="@dimen/margin_big"
            android:paddingRight="@dimen/margin_big"
            android:text="@string/delete_account" />


    </LinearLayout>
</LinearLayout>

Upvotes: 0

Views: 575

Answers (2)

mjstam
mjstam

Reputation: 1079

I would declare two dividers and give them each an id.

Then, programatically, I would check the size of the list view against the size of its container.

If the listview is bigger than the container I would make the divider parked above the buttons "visible" and the one below the listview "gone"

etc...

Truthfully, I'd probably just align it above the buttons and call it a day.

Upvotes: 0

Shooky
Shooky

Reputation: 1299

Use a relative layout as your top level. set the footer to alignBottom, and the LinearLayout that contains the Listview and the separator to layout_above="@id/footer". I have edited your xml to solve your problem (I think its properly formed but SO isn't the best editor).

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:alignParentTop="true"
    android:layout_above="@id/footer">

    <ListView
        android:id="@+id/notification_action_listview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/navigation_item_background_selector"
        android:divider="@null"
        android:dividerHeight="0dp"
        android:orientation="vertical" />

    <include
        android:id="@+id/divider"
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        layout="@layout/divider_horizontal_green" />
</LinearLayout>

<LinearLayout
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignBottom="true"
    android:orientation="vertical" >

    <Button
        android:id="@+id/notification_action_remove_button"
        style="@style/flat_button_red_rounded"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/margin_big"
        android:paddingLeft="@dimen/margin_big"
        android:paddingRight="@dimen/margin_big"
        android:text="@string/delete_account" />


</LinearLayout>
</RelativeLayout>

Upvotes: 1

Related Questions