Develop Reference

Android FrameLayouts side by side with independent internal scrolling

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

android make view to wrap content but not larger than a specific size

I have a Relative View which has two children an scroll view and a button below it now i want to do this: i want this view to wrap it's content and does not make empty space and also not to exceed screen size.
how can i do that? can any one help?
here is my current layout file which is not working.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ScrollView
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content">
....
</ScrollView>
<Button
android:id="#+id/action"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/content"
... />
</RelativeLayout>

RelativeLayout does not have such possibility. However LinearLayout does. Just set LinearLayout's android:orientation to vertical, set ScrollView's android:layout_weight to 1, and it should be working:
<?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">
<ScrollView
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</ScrollView>
<Button
android:id="#+id/action"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>

You should use LinearLayout and adjust both the views according to a weight.In that way it will not exceed in any resolution and will adjust acording to the size of screen.
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ScrollView
android:fillViewPort="true"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
</ScrollView>
<Button
android:id="#+id/action"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_below="#id/content"
... />
</LinearLayout>

You should make action button align at the bottom and that scroll view should be above that button. In this way scroll view will always be in screen and also button will be visible.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/action"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
... />
<ScrollView
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_above="#id/action"
android:layout_height="match_parent">
....
</ScrollView>
</RelativeLayout>

Why doesn't match_parent work when view is larger than viewport?

UPDATE - 9/28/2015:
I have reached the desired appearance by replacing my oriented GridLayouts with TableLayouts that use TableRows for horizontal siblings with a layout_weight=1 and a layout_weight=1 also on any cell item that is the lowest vertically-aligned sibling.
I am building a UI that is made up of a nested grid of many unequal rows and columns. The lowest level views inside the grid must fill the remainder of the screen. The views are all dynamically inflated except for the ScrollView and frame.
I am using GridLayouts that are set to match_parent for both width and height. The child views (the views that actually go inside the cells of the grid) are also configured the same way. Each cell contains a vertical LinearLayout with the first view being the title bar of the lane and the second view being another GridLayout.
For some reason when my grids become large enough to go off screen because of the amount of items, I notice that other nearby views lose their ability to fill the screen.
CORRECT EXAMPLE (notice right purple square fills space)
INCORRECT (as soon as views go outside screen, making ScrollView take effect, right purple square doesn't match parent)
I'm guessing it has something to do with the views losing ability to determine height once the ScrollView kicks in.
A better way to demonstrate it is by putting this layout XML in Android Studio and removing the LinearLayout with ID = REMOVE_ME_NEXUS_S.
and then adding it back again using a small screen preview device like Nexus S. When you remove the LinearLayout, the right side view fills the screen but when you put it back it only goes as big as its minHeight.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true">
<FrameLayout
android:id="#+id/board_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:background="#android:color/holo_green_dark"
tools:context=".BoardActivity">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_margin"
android:background="#android:color/holo_orange_light"
>
<FrameLayout
android:id="#+id/lane_title_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/lane_tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/lane_title_text_size"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_title_margin"
android:textColor="#color/lane_title_text_color"
tools:text="#string/dt_lane_title"/>
</FrameLayout>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_margin"
android:background="#android:color/holo_orange_light"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/lane_title_text_size"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_title_margin"
android:textColor="#color/lane_title_text_color"
tools:text="#string/dt_lane_title"/>
</FrameLayout>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="#dimen/lane_minHeight"
android:background="#android:color/holo_purple"
>
</GridLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/REMOVE_ME_NEXUS_S"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_margin"
android:background="#android:color/holo_orange_light"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/lane_title_text_size"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_title_margin"
android:textColor="#color/lane_title_text_color"
tools:text="#string/dt_lane_title"/>
</FrameLayout>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="#dimen/lane_minHeight"
android:background="#android:color/holo_purple"
>
</GridLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_margin"
android:background="#android:color/holo_orange_light"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/lane_title_text_size"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_title_margin"
android:textColor="#color/lane_title_text_color"
tools:text="#string/dt_lane_title"/>
</FrameLayout>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="#dimen/lane_minHeight"
android:background="#android:color/holo_purple"
>
</GridLayout>
</LinearLayout>
</GridLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_margin"
android:background="#android:color/holo_orange_light"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/lane_title_text_size"
android:layout_gravity="center_horizontal"
android:layout_margin="#dimen/lane_title_margin"
android:textColor="#color/lane_title_text_color"
tools:text="#string/dt_lane_title"/>
</FrameLayout>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="#dimen/lane_minHeight"
android:background="#android:color/holo_purple"
>
</GridLayout>
</LinearLayout>
</GridLayout>
</FrameLayout>
</ScrollView>
I do notice if I set layout_rowWeight to 1 on the right side LinearLayout that it will fill the parent, but it doesn't actually do it on my device, just in the studio preview window.

Layout does not align to center of the parent view

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.

ViewFlipper height issue

In following code the viewflipper is not taking the whole screen it just wraps around the textview. why is this happening ?
<?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" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000ff" >
<ViewFlipper android:id="#+id/ViewFlipper01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#aa0000"
android:layout_gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"></TextView>
</ViewFlipper>
</ScrollView>
</LinearLayout>

In scrollView use
android:fillViewport="true"

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000ff" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ViewFlipper android:id="#+id/ViewFlipper01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#aa0000"
android:layout_gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp">
</TextView>
</ViewFlipper>
</LinearLayout>
</ScrollView>
this will work.

Why do you want to increase View Flippers height? View Flipper depends upon the content or views you add inside it..So the height and width of view flipper will be always equal to the largest height/width your provide to the views. In your case its text view so if you increase the height of the current view or add another textView with height greater than the current one view flipper will be increased.