Android - Make a ScrollView with LinearLayout

Question

I want to make a ScrollView with a LinearLayout inside. The linear layout contains 6 View that have the background CYAN, BLUE, CYAN, BLUE etc... This is the code:

public class TouchActivity extends Activity
{
    TouchedView TouchView;

    public void onCreate(Bundle icicle) 
    {
        super.onCreate(icicle);

        TouchView = new TouchedView(this);
        TouchView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT , LayoutParams.WRAP_CONTENT) );

        //setContentView(TouchView);
        setContentView(TouchView.ViewLayout);
    }

    class TouchedView extends ScrollView
    {
        LinearLayout ViewLayout;
        ListElement Elem1;
        ListElement Elem2;
        ListElement Elem3;
        ListElement Elem4;
        ListElement Elem5;
        ListElement Elem6;


        public TouchedView(Context context) 
        {
            super(context);

            ViewLayout = new TableLayout(TouchActivity.this);
            ViewLayout.setOrientation(LinearLayout.VERTICAL);

            Elem1 = new ListElement(TouchActivity.this , "CYAN");
            Elem1.setLayoutParams(new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT , 100 ) );
            Elem2 = new ListElement(TouchActivity.this , "BLUE");
            Elem2.setLayoutParams(new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT , 100 ) );
            Elem3 = new ListElement(TouchActivity.this , "CYAN");
            Elem3.setLayoutParams(new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT , 100 ) );
            Elem4 = new ListElement(TouchActivity.this , "BLUE");
            Elem4.setLayoutParams(new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT , 100 ) );
            Elem5 = new ListElement(TouchActivity.this , "CYAN");
            Elem5.setLayoutParams(new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT , 100 ) );
            Elem6 = new ListElement(TouchActivity.this , "BLUE");
            Elem6.setLayoutParams(new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT , 100 ) );

            ViewLayout.addView(Elem1);
            ViewLayout.addView(Elem2);
            ViewLayout.addView(Elem3);
            ViewLayout.addView(Elem4);
            ViewLayout.addView(Elem5);
            ViewLayout.addView(Elem6);

            setFillViewport(false);
            setContentView(ViewLayout);

        }

    }


    class ListElement extends View
    {
        public ListElement(Context context , String TypeName) 
        {
            super(context);

            if(TypeName.compareTo("CYAN") == 0) this.setBackgroundColor(Color.CYAN);

            if(TypeName.compareTo("BLUE") == 0) this.setBackgroundColor(Color.BLUE);    
        }
    }
}

The result is that the 6 view are too big to be contained in the LinearLayout:

http://img513.imageshack.us/img513/5406/androidbadscrollview2.jpg

But if I comment setContentView(TouchView.ViewLayout); and I uncomment //setContentView(TouchView); my activity should be filled with the ScrollView instead of the LinearLayout but unfortunately I can't see anything.

Note that the ScrollView contains the LinearLayout that is set by setContentView(ViewLayout);

Solution 1

See http://www.vogella.com/articles/Android/article.html#gridlayout_scrollview

Instead of the TextView you could declare any childs u want.
It's just important that your scrollview does only have ONE chield (i.e. a linearLayout).
Furthermore you should ALWAYS code as much layout in xml as possible!

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true"
    android:orientation="vertical" >

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

        <TextView
            android:id="@+id/TextView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is a header">
        </TextView>

    </LinearLayout>

</ScrollView>

Solution 2

I have done mainly two error:

The first is to pass a TableLayout parameter instead of LinearLayout parameter, i mean:

Elem1.setLayoutParams(new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT , 100 ) );

And second to extend a ScrollView seem to be not a good thing. So creating a simple ScrollView object with a LineraLayaout inside is the solution.

Here is the working code:

public class TouchActivity extends Activity
{

    public void onCreate(Bundle icicle) 
    {
        super.onCreate(icicle);

        ScrollView MainView;
        LinearLayout ViewLayout;

        ListElement Elem1;
        ListElement Elem2;
        ListElement Elem3;
        ListElement Elem4;
        ListElement Elem5;
        ListElement Elem6;

        MainView = new ScrollView(this); 

        ViewLayout = new LinearLayout(this);
        ViewLayout.setOrientation(LinearLayout.VERTICAL);
        ViewLayout.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT , LayoutParams.WRAP_CONTENT) );

        Elem1 = new ListElement(this , "CYAN");
        Elem1.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT , 100 ) );
        Elem2 = new ListElement(this , "BLUE");
        Elem2.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT , 100 ) );
        Elem3 = new ListElement(this , "CYAN");
        Elem3.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT , 100 ) );
        Elem4 = new ListElement(this , "BLUE");
        Elem4.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT , 100 ) );
        Elem5 = new ListElement(this , "CYAN");
        Elem5.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT , 100 ) );
        Elem6 = new ListElement(this , "BLUE");
        Elem6.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT , 100 ) );

        ViewLayout.addView(Elem1);
        ViewLayout.addView(Elem2);
        ViewLayout.addView(Elem3);
        ViewLayout.addView(Elem4);
        ViewLayout.addView(Elem5);
        ViewLayout.addView(Elem6);    

        ViewLayout.requestLayout();
        MainView.addView(ViewLayout);
        setContentView(MainView);

    }

    class ListElement extends View
    {
        public ListElement(Context context , String TypeName) 
        {
            super(context);

            if(TypeName.compareTo("CYAN") == 0) this.setBackgroundColor(Color.CYAN);

            if(TypeName.compareTo("BLUE") == 0) this.setBackgroundColor(Color.BLUE);    
        }
    }
}

Comments

[Bemipefe]

Thank you for the help @Thomas K ! This work for sure but i'm doing the gui without the xml file unless i want to declare an activity or add a permission. I would to follow your tip but the xml require to learn another syntax of another language. So why i can do this ? If a manually work is required i prefer to use the well know java and leave the xml to the automatic design tool like DroidDraw and other.