Linear Layout with Weights and Scroll View

Question

I'm trying to create a responsive layout using weights but I also need to use a scroll view in this case.

This is my code at this moment:

<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"
tools:context=".EncyclopediaFragment">

    <!--Linear Container-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="100">

        <!--Title Box-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="20"
            android:orientation="horizontal"
            android:weightSum="100">

            <!--Empty Space-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="5">


            </LinearLayout>

            <!--Text Box-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="95">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="@string/encyclopedia_mosntersLabel"
                    android:gravity="center"
                    android:textAlignment="viewStart"/>

            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="40">

        </LinearLayout>

    </LinearLayout>

but it needs to be like this .

That layout is suppose to be responsive with weights but at the same time I need to make it possible to scroll.

So my question is: how can I create a layout responsive with weights and at the same time a layout that can scroll down, just like in the picture?

Answer 1

If you have a determined number of 6 Monsters and 8 Towers, here is how you should organize your layout:

    <ScrollView 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="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Monsters"/>

            <!-- the following LinearLayout should be repeated twice for 6 Monsters -->

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <MonsterView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <MonsterView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <MonsterView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

            </LinearLayout>

            ...


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Towers"/>        

            <!-- the following LinearLayout should be repeated twice for 6 Towers -->

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

            </LinearLayout>

            ...


            <!-- attention here for two Towers in the last row -->        

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:weightSum="3">

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

            </LinearLayout>

        </LinearLayout>
    </ScrollView>

Answer 2

<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"
tools:context=".EncyclopediaFragment">

<!--Toolbar-->
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<!--Linear Container With Weights--> 

</RelativeLayout>
</ScrollLayout>
</RelativeLayout>

Answer 3

The content inside your ScrollView should use wrap_parent , and if you want to stretch the content inside it set android:fillViewport="true" . Try this:

<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"
tools:context=".EncyclopediaFragment">

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

        <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

            <!--Linear Container--> 

        </RelativeLayout>
    </ScrollLayout>
</RelativeLayout>