Add Vertical and Horizontal Scrolling Programmatically to LinearLayout in Android

Question

I'm trying to create a layout of a activity as follows:

the game_board.xml code is is follows:

<LinearLayout 
        android:id="@+id/layoutFilterContent"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:weightSum="4"
        android:background="#837E7C" >

        <LinearLayout 
            android:id="@+id/layoutTopicGrade"
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="0dp"
            android:background="#BCC6CC" >

        </LinearLayout>

        <LinearLayout 
            android:id="@+id/layoutGames"
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="3"
            android:padding="0dp"
            android:background="#E5E4E2" >

        </LinearLayout>

    </LinearLayout>

The java code in GameBoardActivity.java is as follows:

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.ActionBar.LayoutParams;
import android.app.Activity;
import android.view.Menu;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.ScrollView;

public class GameBoardActivity extends Activity {

    LinearLayout topicGrade;
    LinearLayout gameContent;
    ScrollView scroll;
    ImageButton[] imgBtn;

    @SuppressWarnings("deprecation")
    @SuppressLint({ "NewApi", "InlinedApi", "ResourceAsColor" })
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.game_board);

        topicGrade = (LinearLayout)findViewById(R.id.layoutTopicGrade);

        scroll = new ScrollView(this);
        scroll.setBackgroundColor(android.R.color.transparent);
        scroll.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
        scroll.addView(topicGrade);

        imgBtn = new ImageButton[15];

        for(int i=0;i<15;i++){
            imgBtn[i] = new ImageButton(this);
            imgBtn[i].setId(i);
            imgBtn[i].setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT));
            topicGrade.addView(imgBtn[i]);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.game_board, menu);
        return true;
    }

}

I'm getting error as: The specified child already has a parent. You must call removeView() on the child's parent first.

I first tried adding buttons to LinearLayout1 without ScrollView, and I'm able to add the buttons as I want, but when I implement ScrollView I'm getting the error as mentioned above. So I got stuck and didn't try anything on LinearLayout2

Please anyone help me to design the activity shown above,

Solution 1

what do you want do achiev? this is what you actually doing:

setContentView(R.layout.game_board);

->game_board is inflatet with both childs layoutTopicGrade and layoutGames

topicGrade = (LinearLayout)findViewById(R.id.layoutTopicGrade);

->this is a instance of layoutTopicGrade

scroll = new ScrollView(this);

->you create a scroll view

scroll.addView(topicGrade);

->you add topicGrade to the scroll view

This failed, because topicGrade already has a parent (layoutFilterContent)

this.setContentView(scroll);

->you set the croll view as content.
(why did you set R.layout.game_board as content before?)

if you only want topicGrade in a ScrollView as ContentView, why didn't you create a xml with this structure?

if it is recommended to do it like you do, the solution is:

topicGrade = (LinearLayout)findViewById(R.id.layoutTopicGrade);
((LinearLayout)topicGrade.getParent()).removeView(topicGrade)

but i can't see why you should do it in this way ^^

--edit: now i've got it, here is the you need:

<?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"
android:weightSum="4" >

<ScrollView
    android:id="@+id/scrollView1"
    android:layout_width="wrap_content"
    android:layout_height="match_parent" 
    android:layout_weight="1">
    <LinearLayout
        android:id="@+id/vertical_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    </LinearLayout>
</ScrollView>

<HorizontalScrollView
    android:id="@+id/horizontalScrollView1"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="3">

    <LinearLayout
        android:id="@+id/horizontal_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >
    </LinearLayout>
</HorizontalScrollView>
</LinearLayout>

Solution 2

Each element can have exactly one parent, that's an XML file structure.

In your layout xml file you defined layoutTopicGrade as the child of layoutFilterContent. Then, in the code, you set layoutTopicGrade as the child of the newly created ScrollView.

You should wrap your layoutTopicGrade the ScrollView. Also, since you're not doing any dynamic configuration to the ScrollView, there's no reason adding it in the code, you should do it straight in the layout xml file:

<ScrollView android:id="@+id/scrollViewTopicGrade"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/transparent" >
    <LinearLayout 
        android:id="@+id/layoutTopicGrade"
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:padding="0dp"
        android:background="#BCC6CC" >
    </LinearLayout>
</ScrollView>

---

EDIT

In order to have layoutTopicGrade take 25% of parent's width and layoutGames take 75%, do the following:

1. Move the layout_weight and layout_width from layoutTopicGrade to the ScrollView.
2. Set ScrollView's layout_weight to .25.
3. Set layoutGames's layout_weight to .75.
4. layoutTopicGrade's children should have layout_width set to fill_parent.

See this answer.

---

ADDITION

BTW, looks like the line this.setContentView(scroll); should be deleted. Activity.setContentView is used to set a view for the whole activity = whole screen. But your ScrolView is apparently only for the topic layout. Rather the whole game board is the activity's content view, as you use it a few lines of code earlier: setContentView(R.layout.game_board); (so keep that one).