Scrollbar for multiple linear layout view in android

Question

I am having a popup view in an android app. For the portrait screen the popup page showing properly, but if i rotate the screen to landscape the popup layout display partially. I have click buttons in the popup. Can't view the buttons in landscape mode. The popup page i am using is

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/popup_element"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#333333"
    android:gravity="center"
    android:orientation="vertical"
    tools:ignore="ButtonStyle" >

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/choose_emotion"
        android:textColor="@color/white"
        android:textSize="20sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="15dp"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/emo_sad"
            android:layout_width="83dp"
            android:layout_height="83dp"
            android:layout_marginEnd="5dp"
            android:layout_marginRight="5dp"
            android:background="@drawable/sky_ring"
            android:text="@string/emo_sad"
            android:textColor="@color/white"
            android:textSize="12sp" />

        <Button
            android:id="@+id/emo_happy"
            android:layout_width="83dp"
            android:layout_height="83dp"
            android:background="@drawable/yellow_ring"
            android:text="@string/emo_happy"
            android:textColor="@color/white"
            android:textSize="12sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/emo_depressed"
            android:layout_width="83dp"
            android:layout_height="83dp"
            android:background="@drawable/blue_ring"
            android:text="@string/emo_depressed"
            android:textColor="@color/white"
            android:textSize="12sp" />

        <Button
            android:id="@+id/emo_question"
            android:layout_width="83dp"
            android:layout_height="83dp"
            android:layout_margin="8dp"
            android:background="@drawable/gray_ring_question"
            android:textColor="@color/white"
            android:textSize="12sp" />

        <Button
            android:id="@+id/emo_anxious"
            android:layout_width="83dp"
            android:layout_height="83dp"
            android:background="@drawable/orange_ring"
            android:text="@string/emo_anxious"
            android:textColor="@color/white"
            android:textSize="12sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/emo_neutral"
            android:layout_width="83dp"
            android:layout_height="83dp"
            android:background="@drawable/white_ring"
            android:layout_marginEnd="5dp"
            android:layout_marginRight="5dp"
            android:text="@string/emo_neutral"
            android:textColor="@color/white"
            android:textSize="12sp" />

        <Button
            android:id="@+id/emo_angry"
            android:layout_width="83dp"
            android:layout_height="83dp"
            android:background="@drawable/red_ring"
            android:text="@string/emo_angry"
            android:textColor="@color/white"
            android:textSize="12sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btn_done_popup"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginBottom="20dp"
            android:layout_marginEnd="5dp"
            android:layout_marginRight="5dp"
            android:text="@string/done_btn"
            android:textColor="@color/white" />

        <Button
            android:id="@+id/btn_close_popup"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginBottom="20dp"
            android:text="@string/cancel_btn"
            android:textColor="@color/white" />

    </LinearLayout>

</LinearLayout>

How can i display the full page in the screen in landscape or for small screens? Any help would be appreciated. Thanks in advance.

Answer 1

Check This I used your xml(change your background):-

  <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/popup_element"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#333333"
android:gravity="center"
android:orientation="vertical"
tools:ignore="ButtonStyle" >

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="choose_emotion"
            android:textColor="@color/white"
            android:textSize="20sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="15dp"
            android:gravity="center"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/emo_sad"
                android:layout_width="83dp"
                android:layout_height="83dp"
                android:layout_marginEnd="5dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/ic_launcher"
                android:text="emo_sad"
                android:textColor="@color/white"
                android:textSize="12sp" />

            <Button
                android:id="@+id/emo_happy"
                android:layout_width="83dp"
                android:layout_height="83dp"
                android:background="@drawable/ic_launcher"
                android:text="emo_happy"
                android:textColor="@color/white"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/emo_depressed"
                android:layout_width="83dp"
                android:layout_height="83dp"
                android:background="@drawable/ic_launcher"
                android:text="emo_depressed"
                android:textColor="@color/white"
                android:textSize="12sp" />

            <Button
                android:id="@+id/emo_question"
                android:layout_width="83dp"
                android:layout_height="83dp"
                android:layout_margin="8dp"
                android:background="@drawable/ic_launcher"
                android:textColor="@color/white"
                android:textSize="12sp" />

            <Button
                android:id="@+id/emo_anxious"
                android:layout_width="83dp"
                android:layout_height="83dp"
                android:background="@drawable/ic_launcher"
                android:text="emo_anxious"
                android:textColor="@color/white"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/emo_neutral"
                android:layout_width="83dp"
                android:layout_height="83dp"
                android:layout_marginEnd="5dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/ic_launcher"
                android:text="emo_neutral"
                android:textColor="@color/white"
                android:textSize="12sp" />

            <Button
                android:id="@+id/emo_angry"
                android:layout_width="83dp"
                android:layout_height="83dp"
                android:background="@drawable/ic_launcher"
                android:text="emo_angry"
                android:textColor="@color/white"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/btn_done_popup"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_marginBottom="20dp"
                android:layout_marginEnd="5dp"
                android:layout_marginRight="5dp"
                android:text="done_btn"
                android:textColor="@color/white" />

            <Button
                android:id="@+id/btn_close_popup"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_marginBottom="20dp"
                android:text="cancel_btn"
                android:textColor="@color/white" />
        </LinearLayout>
    </LinearLayout>
</ScrollView>

Answer 2

Try this as you know ScrollView can have only one child so you put the ScrollView as parent Layout and then One child will be the linearlayout and then that will work. Try like this:

<ScrollView 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:fillViewport="true">

<LinearLayout
    android:id="@+id/popup_element"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#333333"
    android:gravity="center"
    android:orientation="vertical"
    tools:ignore="ButtonStyle" >

<TextView
    android:id="@+id/textView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/choose_emotion"
    android:textColor="@color/white"
    android:textSize="20sp" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="15dp"
    android:gravity="center"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/emo_sad"
        android:layout_width="83dp"
        android:layout_height="83dp"
        android:layout_marginEnd="5dp"
        android:layout_marginRight="5dp"
        android:background="@drawable/sky_ring"
        android:text="@string/emo_sad"
        android:textColor="@color/white"
        android:textSize="12sp" />

    <Button
        android:id="@+id/emo_happy"
        android:layout_width="83dp"
        android:layout_height="83dp"
        android:background="@drawable/yellow_ring"
        android:text="@string/emo_happy"
        android:textColor="@color/white"
        android:textSize="12sp" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="5dp"
    android:gravity="center"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/emo_depressed"
        android:layout_width="83dp"
        android:layout_height="83dp"
        android:background="@drawable/blue_ring"
        android:text="@string/emo_depressed"
        android:textColor="@color/white"
        android:textSize="12sp" />

    <Button
        android:id="@+id/emo_question"
        android:layout_width="83dp"
        android:layout_height="83dp"
        android:layout_margin="8dp"
        android:background="@drawable/gray_ring_question"
        android:textColor="@color/white"
        android:textSize="12sp" />

    <Button
        android:id="@+id/emo_anxious"
        android:layout_width="83dp"
        android:layout_height="83dp"
        android:background="@drawable/orange_ring"
        android:text="@string/emo_anxious"
        android:textColor="@color/white"
        android:textSize="12sp" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:gravity="center"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/emo_neutral"
        android:layout_width="83dp"
        android:layout_height="83dp"
        android:background="@drawable/white_ring"
        android:layout_marginEnd="5dp"
        android:layout_marginRight="5dp"
        android:text="@string/emo_neutral"
        android:textColor="@color/white"
        android:textSize="12sp" />

    <Button
        android:id="@+id/emo_angry"
        android:layout_width="83dp"
        android:layout_height="83dp"
        android:background="@drawable/red_ring"
        android:text="@string/emo_angry"
        android:textColor="@color/white"
        android:textSize="12sp" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/btn_done_popup"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginBottom="20dp"
        android:layout_marginEnd="5dp"
        android:layout_marginRight="5dp"
        android:text="@string/done_btn"
        android:textColor="@color/white" />

    <Button
        android:id="@+id/btn_close_popup"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginBottom="20dp"
        android:text="@string/cancel_btn"
        android:textColor="@color/white" />

</LinearLayout>

But it is better that you use RelativeLayout instead of using so many linearlayouts. Hope it helps.

Answer 3

A ScrollView is a FrameLayout, meaning you must place one child in it containing the entire contents to scroll; this child may itself be a layout manager with a complex hierarchy of objects.

So you have to solve your problem with concept clearing you can follow my answer of this question. may it will clear your concept and help to solve your problem.

you can only take single tag(Child Layout) in scrollview. if you have put multiple Linear Layout then take single linearlayout and then put other Linear Layout in this.