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.
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>
I have three listviews in horizontalScrollView. I want to make each of them to occupy the full screen, by including them into a linearlayout which is set to (layout_width: match_parent, layout_height: match_parent). However, it doesn't work. As you see from the screenshot, the three listviews just tightly linked with one another.
Any suggestions so that the three listviews each occupies the full screen? THx a lot.
<HorizontalScrollView
android:id="#+id/horizontalScrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/page_bg_color">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/tab_login_myFriends_requestList"
android:background="#ffffffff" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/tab_login_myFriends_pendingList"
android:background="#ffffffff" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/tab_login_myFriends_confirmedList"
android:background="#ffffffff" />
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
Use this,
http://developer.android.com/reference/android/widget/ScrollView.html#attr_android:fillViewport
Set that to true. Also your listviews should probably have a weight attribute associated with them.
But I can't really figure out what you're trying to do. Maybe provide the xml and I'll guide you further.
I think what you're looking for is this,
http://developer.android.com/training/animation/screen-slide.html
I have a very strange problem here. In the following xml section I'm trying to use include:
<!-- CONTENT -->
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fadingEdge="none">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<include android:id="#+id/summary"
layout="#layout/view_summary"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
</ScrollView>
(the section is in a main linear layout with vertical orientation and both width and height set to fill parent)
The included xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/white">
<ListView android:id="#+id/news_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:cacheColorHint="#color/transparent"
android:background="#color/transparent" />
<Button android:id="#+id/news_load_more"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:text="Load more..."/>
</LinearLayout>
The problem is that the ListView is not taking up the whole height (the height of the screen), only the size of one single list item. I have tried setting layout parameters from code, but it didn't helped.
Any idea is welcomed.
Thanks.
Don't put listview inside scrollview. Remove the scrollview.
Add android:layout_weight="0" to <Button android:id="#+id/news_load_more" ... /> This will tell it that <ListView android:id="#+id/news_list" ...> is the one to be expanded to fill its parent while the button must not.
Please changed android:layout_height="wrap_content" instead of android:layout_height="fill_parent"
only not changed ScrollView height property .
may be help to you.
I want to have a button at the bottom of the listview.
If I use relativeLayout/FrameLayout, it aligns but listView goes down to very botton.
(Behind the button at the bottom)
FrameLayout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/btnButton"
android:text="Hello"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</FrameLayout>
</FrameLayout>
RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/btnButton"
android:text="Hello"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</RelativeLayout>
</RelativeLayout>
Above two codes only work like the first image. What I want is second image.
Can anybody help?
Thank you.
A FrameLayouts purpose is to overlay things on top of each other. This is not what you want.
In your RelativeLayout example you set the ListViews height and width to MATCH_PARENT this is going to make it take up the same amount of space as its parent, and thus take up all of the space on the page (and covers the button).
Try something like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
The layout_weight dictates how the extra space is to be used. The Button does not want to stretch beyond the space it requires, so it has a weight of 0. The ListView wants to take up all of the extra space, so it has a weight of 1.
You could accomplish something similar using a RelativeLayout, but if it is just these two items then I think a LinearLayout is simpler.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
>
<ListView android:id="#+id/ListView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
</ListView>
<FrameLayout android:id="#+id/FrameLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:id="#+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
android:layout_gravity="center_horizontal">
</Button>
</FrameLayout>
</LinearLayout>
Here is the design you are looking for.
Try it.
I needed two buttons side-by-side at the bottom. I used a horizontal linear layout, but assigning android:layout_height="0dp" and android:layout_weight="0" for the buttons' linear layout didn't work. Assigning android:layout_height="wrap_content" for just the buttons' linear layout did. Here's my working layout:
<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/listView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/new_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="New" />
<Button
android:id="#+id/suggest_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Suggest" />
</LinearLayout>
</LinearLayout>
RelativeLayout will ignore its children android:layout_width or android:layout_height attributes, if the children have attributes that properly define their left and right or top and bottom values, respectively.
To achieve the result on the right image, showing the list above the button, your layout should look like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#android:id/button1"
android:layout_alignParentTop="true"/>
<Button
android:id="#android:id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#android:string/ok"/>
</RelativeLayout>
The key is to define android:layout_alignParentTop (defines top value) and android:layout_above (defines bottom value) in your RecyclerView. This way, RelativeLayout will ignore android:layout_height="match_parent", and the RecyclerView will be placed above the Button.
Also, make sure you look into android:layout_alignWithParentIfMissing, if you have a more complex layout and you still need to define these values.
I am using Xamarin Android, and my requirement is exactly the same as William T. Mallard, above, i.e. a ListView with 2 side-by-side buttons under it.
The solution is this answer didn't work in Xamarin Studio however - when I set the height of the ListView to "0dp", the ListView simply disappeared.
My working Xamarin Android code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/ListView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_above="#+id/ButtonsLinearLayout" />
<LinearLayout
android:id="#id/ButtonsLinearLayout"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/Button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
I aligned ButtonsLinearLayout to the bottom of the screen, and set the ListView to be above ButtonsLinearLayout.
#jclova one more thing you can do is use layout-below=#+id/listviewid in relative layout
In your relative layout height of listview is match_parent which is fill_parent(for 2.1 and older) so best solution is if you want to use relative layout then first Declare your button then your list view, make list view position as above your button id, If you want button always at bottom then make it alignParentBottom..
Snippet is
<RelativeLayout
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:id="#+id/rl1"><Button
android:layout_width="MATCH_PARENT"
android:layout_height="WRAP_CONTENT"
/><ListView
android:layout_width="MATCH_PARENT"
android:layout_height="0"
android:layout_above="#id/listview"/></RelativeLayout>
This prevents your list view taking whole place and make your button appear..
This will be the best and the most simple solution to the problem. Just add android:layout_above="#id/nameOfId" in the layout that you want to move above with respect to that layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sumeru.commons.activity.CommonDocumentUploadActivity">
<ListView
android:id="#+id/documentList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/verifyOtp" />
<com.sumeru.commons.helper.CustomButton
android:id="#+id/verifyOtp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#string/otp_verification" />
</RelativeLayout>
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