View in ScrollView isn't matching parent as configured

Question

I've got a ViewPager and an ActionBar with tabs. One of these tabs has a ListView and when I tap on one of the options in that ListView, I add a child Fragment which is the detail view for that row.

That detail view is a ScrollView with a LinearLayout inside it. The ScrollView is match_parent/match_parent and the LinearLayout inside it is width=match_parent and height=wrap_content. On a phone-sized emulator, the detail view fills the screen as desired, but on a tablet, the detail view only covers part of the width of the screen... even though the width of the ScrollView and the width of the LinearLayout are both match_parent.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rootView" style="@style/RootScrollView">

    <LinearLayout android:id="@+id/scrollContentView" style="@style/ScrollViewContent">
        ...
    </LinearLayout>
</ScrollView>

Here is the style for the scroll view:

<style name="RootScrollView">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">match_parent</item>
</style>

Here is the style for the content LinearLayout:

<style name="ScrollViewContent">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:paddingLeft">15dp</item>
    <item name="android:paddingRight">15dp</item>
    <item name="android:orientation">vertical</item>
    <item name="android:background">@drawable/image_legal_paper_tile</item>
</style>

The content view has a repeated background image_legal_paper_tile which is this:

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/legal_paper_tile" 
    android:gravity="fill_horizontal"
    android:tileMode="repeat" />

So, the image should stretch horizontally and repeat which creates a yellow legal paper pad in the background.

This is what the list and the detail view look like the phone emulator:

This is what the list and detail view look like on a real tablet. The yellow legal pad fragment SHOULD be filling the entire width of the screen, but it's not.

EDIT:

Here is the background legal paper image:

It's 320px wide. The phone emulator is 480px wide and the image stretches, correctly, to fill the width of the screen. It then repeats vertically as intended. However, it's not stretching to fill the width of the screen on the tablet.

The width shown on the tablet is NOT the native size of the image, because it changes size based on the content. When the fragment first loads, it is one width. Then I fill in the fields and execute the calculation which adds some text at the bottom of the content view. That text is wider than the existing content and so when the text is set the width of the fragment increases to support the wider content.

So, in short, no, the width on the tablet is not the native size of the image. The image IS stretching, just not stretching all the way.

Answer 1

On the ScrollView use android:fillViewport="true" and for child of ScrollView android:height="wrap_content". If you would like to have many child's with different attributes make a main child as container. Set it as wrap_content and its child as match_parent .

example :

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:fillViewport="true">

    <LinearLayout
        android:id="@+id/dynamic_frame"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/dimrix_sub_child"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:visibility="gone" >
        </LinearLayout>

        <LinearLayout
             android:id="@+id/dimrix_sub_child_21"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:visibility="gone" >
        </LinearLayout>
    </LinearLayout>
</ScrollView>

In this example I can set visibility in the code for each child and it will match parent as you wish .

Answer 2

Try adding android:fillViewport="true"to your ScrollView

remember that android:layout_height=”fill_parent” means “set the height to the height of the parent.” This is obviously not what you want when using a ScrollView. After all, the ScrollView would become useless if its content was always as tall as itself. To work around this, you need to use the ScrollView attribute called android:fillViewport. When set to true, this attribute causes the scroll view’s child to expand to the height of the ScrollView if needed. When the child is taller than the ScrollView, the attribute has no effect.

Answer 3

I had a similar problem and solved it this way :

    scrollView.setFillViewport(true);