I have a listview that holds expandable cards. Each card is 2 frame views, one for the un-expanded view and one for the expanded view. In the expanded view I have another listview - that doesn't scroll. Can anyone tell me why? Here's some code:
First listview:
<LinearLayout
android:background="#null"
android:id="#+id/contentLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ListView
android:id="#+id/groups_listview"
android:layout_width="match_parent"
android:divider="#null"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
2nd listview (Expanded Card Content):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:bootstrapbutton="http://schemas.android.com/apk/res-auto"
xmlns:fontawesometext="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_expandablelistitem_card_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/corners_white_transparent"
android:orientation="vertical" >
<ListView
android:id="#+id/friendsInGroupListview"
android:layout_width="match_parent"
android:layout_height="200dp"
android:divider="#null" >
</ListView>
</LinearLayout>
Expandable card:
<?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"
android:descendantFocusability="blocksDescendants"
android:padding="16dp" >
<FrameLayout
android:id="#+id/activity_expandablelistitem_card_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</FrameLayout>
<FrameLayout
android:id="#+id/activity_expandablelistitem_card_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp" >
</FrameLayout>
</LinearLayout>
I'd never use wrap_content in the layout_height nor layout_width, it causes performance issues, as you may read here. Also setting a static width/height is not a good idea as it may lead to layout issues in several devices.
Said that, I always define my ListViews like this:
<ListView
android:id="#+id/who_list"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="vertical">
</ListView>
Setting your layout_weight within a LinearLayout with just this view inside it, you make yourself sure that ListView will have a good layout rendering and it will enable scrolling when needed.
Related
I'm trying to set up a tablet layout with a list on the left, and a detail pane on the right. When a list item is clicked, the detail pane is populated with a series of cardsthat are longer than the list on the left. I would like the detail pane, and the list (recycler view) to scroll independently of one and other, but I can't fathom how to do so.
Here's my main_content.axml - the recyclerview is loaded into the framelayout listcontainer, and the details are placed into the detailscontainer (the textview is removed before this happens) - but both frames still scroll 'as one' - the entire app scrolls, the frames don't scroll separately.
As an aside, main_content.xml is wrapped inside a nestedscrollview, so that I can use the collapsing toolbar - you can see the main.xml here: http://pastebin.com/raw/PGsVuAp6
<?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="match_parent"
android:orientation="horizontal" >
<ScrollView
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_weight="1">
<FrameLayout
android:id="#+id/listcontainer"
android:layout_weight="1"
android:layout_width="450dp"
android:layout_height="match_parent" >
</FrameLayout>
</ScrollView>
<View android:layout_height="fill_parent"
android:layout_width="1dp"
android:background="?android:attr/listDivider"/>
<ScrollView
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_weight="2">
<FrameLayout
android:id="#+id/detailscontainer"
android:layout_width="match_parent"
android:layout_weight="2"
android:layout_height="match_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:id="#+id/nodetails"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:text="No inspection selected."/>
</FrameLayout>
</ScrollView>
</LinearLayout>
Edit, for clarity, here's what's loaded into the list frame: http://pastebin.com/raw/1Wm8Tntf ----- and here's what's loaded into the detail pane: http://pastebin.com/raw/FetE8JP1
Edit 2: Here's a picture showing how the two frames, list and detail, should scroll, independently of one and other, i.e when you scroll the detail, the list should not move, and when you scroll the list, the detial should not move:
Instead of FrameLayout in the child of ScrollView use a LinearLayoutand it will work! or tryandroid:fillViewport="true" in ScrollView
example 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="match_parent"
android:orientation="horizontal" >
<ScrollView
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="vertical"
android:id="#+id/listcontainer"
android:layout_weight="1"
android:layout_width="450dp"
android:layout_height="match_parent" >
<LinearLayout
android:background="#897"
android:layout_width="match_parent"
android:layout_height="300dp"></LinearLayout>
<LinearLayout
android:background="#127"
android:layout_width="match_parent"
android:layout_height="300dp"></LinearLayout>
<LinearLayout
android:background="#908"
android:layout_width="match_parent"
android:layout_height="300dp"></LinearLayout>
</LinearLayout>
</ScrollView>
<View android:layout_height="fill_parent"
android:layout_width="1dp"
android:background="?android:attr/listDivider"/>
<ScrollView
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_weight="2">
<LinearLayout
android:orientation="vertical"
android:id="#+id/listcontainerTwo"
android:layout_weight="1"
android:layout_width="450dp"
android:layout_height="match_parent" >
<LinearLayout
android:background="#897"
android:layout_width="match_parent"
android:layout_height="300dp"></LinearLayout>
<LinearLayout
android:background="#127"
android:layout_width="match_parent"
android:layout_height="300dp"></LinearLayout>
<LinearLayout
android:background="#908"
android:layout_width="match_parent"
android:layout_height="300dp"></LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
FrameLayout is just a container and problematic most of the time with ScrollView scenarios if you use LinearLayout anyway it scrolls I've tested that. You can find smiler question > here
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'd like the OK / Cancel buttons to be anchored at the bottom (even when there's more items on the list that can be shown on the screen). Here's what it currently looks like:
The buttons are on the top, not on the bottom.
The layout that contains the buttons:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="true"
android:id="#+id/buttons_layout">
<TableRow>
<Button
android:id="#+id/btnOK"
android:background="#color/pomegranate"
android:text="OK"
android:layout_gravity="fill_horizontal"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<Button
android:id="#+id/btnCancel"
android:background="#color/wet_asphalt"
android:text="Cancel"
android:layout_weight="1"
android:layout_gravity="fill_horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</TableRow>
</TableLayout>
The composite layout:
<?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/options_list"
android:layout_width="fill_parent"
android:layout_height="match_parent">
</ListView>
<include layout="#id/buttons_layout"
android:layout_alignParentBottom="true"
android:layout_height="match_parent"
android:layout_below="#id/options_list"/>
</RelativeLayout>
I followed the guidelines I read on http://developer.android.com/guide/topics/ui/layout/relative.html
I tried this answer - https://stackoverflow.com/a/6285438/168719 - it hasn't helped me.
I suspected that it might not work because the list view doesn't "know" how tall it is, so the button layout doesn't know where to place itself, either. But I ruled it out by setting the ListView height to an arbitrary value like 100dp. The buttons are still superimposed over it.
I fiddled with all the layout attributes, but I can't get it to work.
Apart from the solution, I would also like to know why mine doesn't work...
the layout should be something like this :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView android:id="#+id/options_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layout_buttons" >
</ListView>
<include android:id="#+id/layout_buttons"
layout="#id/buttons_layout"
android:layout_alignParentBottom="true"
android:layout_height="wrap_parent"
android:layout_width="wrap_content"/>
</RelativeLayout>
you can use tab to do it
you can see this tutorial
Android Tab Layout Tutorial
you could try using it this way
<relativelayout1>
<relativelayout2 specify layout below listview with id="list">
<button1>
<button2>
</relativelayout2>
<listview id="list">
</listview>
</relativelayout1>
so this will ensure no matter how long your list is you always get the buttons below your list. so you can have a scrolling list and a static buttons below the list
try this. Put the include tag inside another RelativeLayout, then be sure ListView is above the new RelativeLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parentLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/buttonsContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" >
<include
android:id="#+id/buttons"
android:layout_width="wrap_content"
layout="#layout/buttons_layout" />
</RelativeLayout>
<ListView
android:id="#+id/options_list"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttonsContent" >
</ListView>
</RelativeLayout>
Try like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layout_buttons"
android:orientation="vertical" >
<ListView android:id="#+id/options_list"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
</LinearLayout>
<include android:id="#+id/layout_buttons"
layout="#id/buttons_layout"
android:layout_alignParentBottom="true"
android:layout_height="wrap_parent"
android:layout_width="wrap_content"/>
</RelativeLayout>
I am trying to achieve the below layout in my Android Application.
I achieved this layout by using a custom List Adapter. But the problem is with the empty space in the bottom. Is it possible to make the ListView items be evenly spaced to occupy the entire screen height.
One alternative is to use LinearLayout with WeightSum. But with this approach, how will I be able to place textView and the arrow image in the same row.
Any suggestion to achieve this layout and evenly distribute row height would be appreciated.
Thank you in advance.
Main Activity XML:
<RelativeLayout 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:background="#color/startscreen_background"
tools:context=".StartScreen" >
<ListView
android:id="#+id/start_lv_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:divider="#color/startscreen_listitem_divider"
android:dividerHeight="0px" >
</ListView>
</RelativeLayout>
List Item Layout:
<?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="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/startscreen_tv_item"
android:layout_width="match_parent"
android:layout_height="#dimen/startscreen_listitem_height"
android:gravity="center_vertical"
android:paddingLeft="#dimen/startscreen_listitem_paddingleft"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/startscreen_listitem_textcolor"
android:textSize="#dimen/startscreen_listitem_textsize" />
<View
android:layout_width="match_parent"
android:layout_height="2px"
android:background="#color/startscreen_listitem_divider" />
</LinearLayout>
You can use android:layout_height="fill_parent" in your Main Activity XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/startscreen_background"
tools:context=".StartScreen" >
<ListView
android:id="#+id/start_lv_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:divider="#color/startscreen_listitem_divider"
android:dividerHeight="0px" >
</ListView>
</RelativeLayout>
Did you tried giving the layout_height="match_parent" to your ListView ?
I am trying to put a ListView below a ScrollView in android. I tried putting them inside a LineaLayout like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/frameLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ScrollView
android:id="#+id/marketDetailScrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
...
</ScrollView>
<ListView android:id="#android:id/list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#FFF"/>
</LinearLayout>
and the ListView doesn't get shown. I also tried putting it inside a RelaviteLayout and still nothing. Can I somehow have a ListView under a ScrollView?
Just to add something. I don't want to split my screen so that I have a half with a ScrollView and another half with a ListView. I want the user to scroll down the ScrollView which apparently is bigger than the screen size and then the ListView should start
I would recommend you to put the ScrollView Content as HeaderView in the ListView or do you explicitly want to have two separated scrollable areas on screen?
Example for putting the content of the scroll view in the list view as header (one single scrollable area):
public void onCreate(Bundle s){
setContentView(R.id.yourLayout);
ListView listView = (ListView) findViewById(R.id.listView);
// Set the adapter before the header, because older
// Android version may have problems if not
listView.setAdapter(new YourAdapter());
// Add the header
View header = inflater.inflate(
R.layout.you_layout_that_was_in_scrollview_before, null, false);
listView.addHeaderView(header);
}
The layout of the activity would look like that:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView android:id="#+id/listView"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#FFF"/>
</LinearLayout>
If you want two scrollable areas, you should work with layout weight:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:id="#+id/marketDetailScrollView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<!-- ScrollViewContent -->
</ScrollView>
<ListView android:id="#android:id/list"
android:layout_height="0dp"
android:layout_width="match_parent"
android:background="#FFF"
android:layout_weight="1"/>
</LinearLayout>
Fill parent wont work for you,
change it to wrap content, and give layout_weight 1 to scroll view also, then it may work for you
Normally it is not good to put listview in scrollview. but if in case it is required, you need to set the height of listview. Follow the link below to calculate the height of listview for fitting in scrollview.
http://www.jiramot.info/android-listview-in-scrollview-problem
Using this way you can achieve what you want
You have to set the the height of the content of scrollview and its element to 'wrap content'. XML will be like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/frameLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ScrollView
android:id="#+id/marketDetailScrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
...(height will be wrap_content for inner element as well)
</ScrollView>
<ListView android:id="#android:id/list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#FFF"
android:layout_weight="1"/>
</LinearLayout>
This will might help you..
I think this is near to what you are looking for. I give you this code code but i have to tell that putting a ListView in a ScrollView is a bad-practice and you should not use this solution. You should work on something more correct and with no scroll view within scroll view.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:android1="http://schemas.android.com/apk/res/android"
android:id="#+id/containerScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/scrollViewContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ScrollView
android:id="#+id/marketDetailScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/scrollViewContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- the views contained in your ScrollView goes here -->
</LinearLayout>
</ScrollView>
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFF" />
</LinearLayout>
</ScrollView>