Distance between items in a Listview - android

I have a ListView in my Layout.
<ListView
android:id="#+id/list_infoitems"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
Every list item layout looks like:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/selector_custombutton"
android:padding="10dp"
android:layout_gravity="center">
<TextView
android:id="#+id/text_history_station_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|left"
android:textColor="#color/rnv_blue_540c"/>
<TextView
android:id="#+id/text_history_line_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|left"
android:textColor="#color/rnv_blue_540c"/>
</LinearLayout>
I want to have a distance between all item. For that I'v played with android:margin property, but without success.
Does anybody know, how to change the distance between item in a listview.
Thank you,
Mur

You could always set the dividerHeight property. Android Docs
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:dividerHeight="5dp"
/>
If that isn't what you want to do, in your listview item you could wrap your LinearLayout in a RelativeLayout and add a margin to the LinearLayout
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
/>
</RelativeLayout>

I have found that the ListView divider has fragmentation issues. In 2.3 devices, a grey line is implemented by default that doesn't show up on 4.x devices. This can be addressed by manually setting android:divider="some_value". I tend to handle all ListView item layout issues within the items layouts themselves. Its a dirty little trick, but resolves cross version issues. Note the addition of a "hidden" view below. This not only fixes the problem between items, but gives you equal padding after the last item in your list.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="5dp" />
<View
android:below="#id/list"
android:layout_height="0dp"
android:layout_width="0dp"
android:margin_top="5dp" />
</RelativeLayout>

Use padding or Margin or the ListView itself.
<ListView
android:id="#+id/list_infoitems"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5px"
/>

To encrease the distance between the items them self you can use
android:dividerHeight="xxdpi"
In
<ListView
android:id="#+id/list_infoitems"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:dividerHeight="xxdpi"/>
Regarts,
Marco

Related

One of two Android ListView filling too much space

I would like to obtain this layout for an Android app for mobile phones:
Icon - Object1
List with entries related to Object1
Icon - Object2
List with entries related to Object2
So far I have used the following layout tree (edited graphically with the editor in Android Studio):
Root-LinearLayout
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
May be this is not the best way to organize such layout (may be I should use lists with header, but suggestions very welcome), however it can be a good case for understanding deeper how ListView works.
This is the graphical layout generated:
the blue row corresponds to the first LinearLayout. As you can see from the second screenshot that follows, the second list goes all the way down to Hell, bringing me with her. Is there any way to make the lists respect the wrap_content+ weight behaviour?
The XML code follows. I have tried several combos (both reasonable and unreasonable) of layout:weights but none works. I also tried to set the min-width of the first LinearLayout (the hidden one), but nothing changes.
Could you please help me?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="50dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_weight="1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView16"
android:src="#drawable/abc_ic_commit_search_api_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object2"
android:id="#+id/textView25"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_weight="1" />
</LinearLayout>
It should work if you put your ListViews inside of the child LinearLayouts which hold the LinearLayout that has the TextView and ImageView. You also should be using "0dp" for the height when using weight with a vertical layout.
Something like this, I believe, should work
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:gravity="center_vertical"
android:minHeight="50dp"
android:layout_weight=".2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/listView2"
android:layout_weight=".8" />
</LinearLayout>
Note the other changes: I gave the inner-LinearLayout an arbitrary weight of ".2" then the ListView a weight of ".8". And, of course, set the height to "0dp". You may need to play with those weights a bit but I think doing something like that for both first child LinearLayouts should get you close.
That may get your current layout to work but using headers and/or an ExpandableListView may be a better option.

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)
As you can see in the picture, I have following components:
Listview
GreenDivider with a fixed size of 1dp
Button-Area
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>
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>
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.

Center text items in ListView

How can I horizontally center-align text items of the ListView in my Layout?
Honestly, I googled for at least an hour before asking such a basic question.
Thanks.
<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity" >
<EditText
android:layout_width="match_parent"
android:layout_height="50dp"
android:hint="Remind..." />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:baselineAligned="false"
android:orientation="horizontal" >
<ListView
android:id="#+id/listviewTimeInterval"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scrollbars="none" />
<-- . . . --/>
<-- more lists of the same kind--/>
<-- . . .--/>
</LinearLayout>
</LinearLayout>
You need to create your own layout for your listview item, something like this
Example:
textcenter.xml:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="#id/textItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Then, in your code, your have to do this
ArrayAdapter<String> ad = new ArrayAdapter<String>(this, R.layout.textcenter, R.id.textItem, functions);
listView.setAdapter(ad);
I found it impossible to center the items in a ListView if the LisView itself is defined with
android:layout_width="wrap_content"
This does not make sence, because this parameter should only affect the position of the ListView and not its elements.
Anyway, changing the width of the list to match_parent allows to center the items with their (layout_)gravity attributes.
In the layout of the TextView for your customized ListView xml file use android:gravity="center" . That'll do it.

ListView line filling half screen

I am trying to built a ListView which has a line per player.
Each line should be very small but instead it is filling the whole screen with 2 massive lines.
This is my XML:
<?xml version="1.0" encoding="utf-8"?>
<SlidingDrawer android:id="#+id/slidingDrawer" android:handle="#+id/drawerHandle"
xmlns:android="http://schemas.android.com/apk/res/android"
android:content="#+id/contentLayout" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:visibility="visible"
android:background="#000000">
<ImageView android:id="#+id/drawerHandle"
android:src="#drawable/blue_arrow_up_flat"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</ImageView>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/contentLayout" android:gravity="center"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<ListView
android:id="#+id/lvwScores"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:divider="#FFFFFF" android:dividerHeight="1dip"
android:layout_weight="1" android:layout_marginBottom="60dip"
android:footerDividersEnabled="true" android:headerDividersEnabled ="true"
android:background="#000000"/>
</LinearLayout>
</SlidingDrawer>
Row:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal">
<TextView android:id="#+id/tvwPlayerName" android:gravity="left"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<TextView android:id="#+id/tvwPlayerScore" android:gravity="right"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginRight="12sp"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Try changing android:layout_weight="1" of ListView to 3 or >3..Might work out..
I think the ListView is drawn correctly.
You can see the two lines, the only problem is that they are drawn in the center and therefore look like they span the whole screen.
So I assume if you remove
android:gravity="center"
from your LinearLayout it should work.
And as a sidenote:
I never worked with SlidingDrawer, but its documentation states that you should use match_parent ( or fill_parent ) for its width and height. I assume you do not want to let the SlidingDrawer span over the whole screen if there is almost no content. Maybe this class does not allow other behavior, I do not know. But maybe this is the real source for your problem and not the ListView itself.
Edit:
Disregard my sidenote, the SlidingDrawer is drawn ontop with the blank area being transparent, therefore there should be no problem with its look...

ListView ignoring wrap_content

I have a problem with the ListView in Android.
When I set android:layout_height="wrap_content", ListView stays just one or two rows long and I can't find a way to make him "wrapped".
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="#+id/question"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ListView android:id="#+id/ListView01"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
</FrameLayout>
Is there any way to accomplish this? Thanks in advance!
You should never set the height of a ListView to wrap_content. Either set the height to fill_parent or do something like this:
<ListView
android:layout_height="0dp"
android:layout_weight="1"
/>
Source: http://www.youtube.com/watch?v=wDBM6wVEO70&t=40m45s
It appears you're trying to add a header to your listview. Listview has built-in support for headers (and footers). The method for setting a header is listview.addHeader(View view). You can customize the header as needed.
use ExpandableHeightGridView.java of gitHub ExpandableHeightGridView Try for scrollview

Categories

Resources