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.
Related
I am trying to scroll the listview inside one Linear Layout but it is not working as i want. I am attaching one image for the more explanation.
This is my Layout
<android.support.v7.widget.CardView
android:id="#+id/card"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:clickable="false"
app:cardBackgroundColor="#android:color/white"
app:cardElevation="2dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="false">
<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">
<ListView
android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:gravity="center|bottom"
android:orientation="vertical">
<Button
android:id="#+id/findSelected"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:background="#drawable/flat_selector_green"
android:text="Next"
android:textColor="#android:color/white" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</android.support.v7.widget.CardView>
Image explanation
I know it s not the good approach to use the listview but i have to do this with this way.
Just remove the ScrollView from your xml code, Because ListView have their own Scroll doesn't require ScrollView.Then code will work as you want. Second List will be shown after showing every item of first ListView.
According to android docmentation
You should never use a ScrollView with a ListView, because ListView takes care of its own vertical scrolling. Most importantly, doing this defeats all of the important optimizations in ListView for dealing with large lists, since it effectively forces the ListView to display its entire list of items to fill up the infinite container supplied by ScrollView.
First you user card view as top parent it seem you will use it as child of list view as I guess , if my guessing is correct this not wise to use two list view as child.
Second In any case you want use two listview in same view , its recommended to separate between them with view (TextView , ... etc).
the solution
1- remove scroll as it useless.
2- add weight to your list view as wrap content in your case mean whole view.
3- recommend add view to separate between list.
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:clickable="false"
app:cardBackgroundColor="#android:color/white"
app:cardElevation="2dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/wholeview"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="2">
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<!-- recommended to add view here -->
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/findSelected"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:text="Next"
android:textColor="#android:color/white"
/>
</LinearLayout>
</RelativeLayout>
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.
I have a ListView inside a RelativeLayout and a small LinearLayouot with an EditText that should hover above the List. However when I click the EditText it registers a click on the ListView underneath. It seems it's a focus problem.
Here is code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/llSearchPlaces"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#dedede"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true" >
<EditText
android:id="#+id/etSearchPlaces"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:hint="Search for Places"
android:inputType="textCapWords" />
</LinearLayout>
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/nav_selector" >
</ListView>
</RelativeLayout>
It want focus to be on the id llSearchPlaces. But the two focus attributes I set do not work.
Try reordering the views in your XML layout. Ignoring the other views/viewgroups:
<RelativeLayout ...>
<ListView .../>
<EditText .../>
</RelativeLayout>
The reason is ViewGroups tend to draw their children in the order described and pass touch events down in the opposite order, so Views that are drawn on top have a chance to act on touches first. If you order them in the XML as I describe, EditText draws later (on top of) ListView and will receive touch events before ListView does.
Try this one:
First: Create layout xml for listview say listview.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/nav_selector"
android:paddingBottom="50dp" >
</ListView>
</LinearLayout>
Second: Create layout xml for edit text say edittext.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<EditText
android:id="#+id/etSearchPlaces"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:hint="Search for Places"
android:inputType="textCapWords" />
<requestFocus />
</LinearLayout>
Third: Merge these two layouts in layout say mainlayout.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include
android:layout_alignParentTop="true"
android:id="#+id/lv"
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/listview"/>
<include
android:layout_alignTop="#+id/lv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/edittext"/>
</RelativeLayout>
Note: Replace ids and other attributes with your ones....
On second look, I don't see why you need a RelativeLayout at all. The effect you are achieving is a fixed EditText below your ListView. In actuality, the ListView and the EditText overlap, and you are working around this by giving the ListView padding on the bottom equal to the height of the EditText container.
A better choice would be to use a vertical LinearLayout to contain the ListView and the EditText container beneath it. Here the ListView will take up all the space available that is not used by the EditText container.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
... />
<LinearLayout
android:id="#+id/llSearchPlaces"
android:layout_width="match_parent"
android:layout_height="..."
android:orientation="horizontal"
... >
</LinearLayout>
</LinearLayout>
I have a scrollable ListView with items (like in http://developer.android.com/resources/tutorials/views/hello-listview.html). I am using an ArrayAdapter for the items and use it as a parameter in setListAdapter. Now I would like to add a button at the bottom of the screen, which does not scroll with the list. Could someone give me some hints or post a code snippet how it could possibly be done?
If your activity extends ListActivity then you need something like this:
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView android:id="#android:id/list"
android:layout_height="0dip"
android:layout_width="match_parent"
android:layout_weight="1" />
<Button android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
Notice that the listview has a layout_weight set to 1. That will keep the button fixed in its place at the bottom.
you can use a RelativeLayout to fix the button at the bottom of your layout , and add your listView above it like this :
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
<ListView
android:id="#android:id/list"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_above="#id/btn" />
</RelativeLayout>
My solution based on Houcline's solution but ListView always above Button
<CheckBox
android:id="#+id/chbRemoveIfUninstall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_above="#id/chbRemoveIfUninstall"/>
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