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
Related
I have a LinearLayout with 3 children with weights to set their proportions: 1/7, 3/7, 3/7. The last section contains text that could extend outside the space allowed, so I added a scrollview.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="vertical"
android:background="#drawable/package_status_border"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3">
<TextView
android:id="#+id/PackageContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</ScrollView>
</LinearLayout>
This layout is working fine if the PackageContent text is small:
expected formatting
But, if the PackageContent text is large, rather than maintaining the expected height and just scrolling the extra text it is filling the entire screen:
bad formatting, with scroll view filling entire screen
How to I make sure that the last section is still only 3/7 of the screen, with content scrolling, regardless of how much content the textView contains?
I have also tried putting the ScrollView within its own LinearLayout but that did not work either.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="vertical"
android:background="#drawable/package_status_border"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/PackageContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</ScrollView>
</FrameLayout>
</LinearLayout>
Im trying to align a circular image in the middle of two linearlayout with different colors, however the view for some reason does not align to the center
but stick to the left, below it I want to place a fragment. any help?
<?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" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:background="#1b96d9"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#e6e6e6"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<com.mikhaellopez.circularimageview.CircularImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:gravity="center"
android:src="#drawable/doge"
app:border_color="#EEEEEE"
app:border_width="4dp"
app:shadow="true" />
</FrameLayout>
<LinearLayout
android:id="#+id/calendarCard1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7"
android:background="#e6e6e6" />
</LinearLayout>
why not use a relative layout instead of so many nested Linear Layout. Using Relative layouts are easy and efficient. Check this http://www.mkyong.com/android/android-relativelayout-example/ for understanding the relative layouts
Your circular image layout is inside a FrameLayout along with the LinearLayout. FrameLayout basically puts all its children one atop another.
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.
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 want to put two layouts horizantally, small layout on the right and the big on on the left
i tried like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#000000" >
</LinearLayout>
<LinearLayout
android:layout_width="10dip"
android:layout_height="fill_parent"
android:background="#ffffff" >
</LinearLayout>
</LinearLayout>
but still get the small one on the right, what should i do?
A LinearLayout displays its children in the order in which you add them: top to bottom = left to right, for a horizontal view and top to bottom for a vertical view. Change the order of the views in the XML and they will change on the screen.
Sorry to see your comment lately. But try this:
pseudo code(Untested):
<?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:weightsum = "10"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="7"
android:background="#ffffff"
>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="#000000"
>
</LinearLayout>
</LinearLayout>
You don't need to put orientation horizontal as it supports by default. Even there is no problem if you keep it as the other answerer said.
Try this :
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#000000" >
</LinearLayout>
<LinearLayout
android:layout_width="20dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffff" >
</LinearLayout>
</LinearLayout>
Reference :
The use of layout_weight with Android layouts
Thanks.