2x2 buttons in a scrollview

Question

I’m trying to put a matrix (2 x 2) of buttons into a constraint layout and then to put the constraint (with the 4 buttons included) layout into a scroll view and finally to add the scroll view into the main layout. The code is provided here below. Can anyone tell me what do I wrong since finally the bar appears instead of the matrix of buttons? It was planned to have 4 buttons visible, but in fact 2 buttons is appearing. Are there any suggestion how to make the task smarter way. Thank you in advance!


        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ConstraintLayout layout = findViewById(R.id.layout);

        ConstraintLayout.LayoutParams params = new ConstraintLayout.LayoutParams(200, 200);
        ConstraintLayout constraintLayout = new ConstraintLayout(MainActivity.this);
        constraintLayout.setLayoutParams(params);

        GradientDrawable shape1 = new GradientDrawable();
        shape1.setColor(Color.BLUE);

        GradientDrawable shape2 = new GradientDrawable();
        shape2.setColor(Color.GREEN);

        Button button11 = new Button(MainActivity.this);
        Button button12 = new Button(MainActivity.this);
        Button button21 = new Button(MainActivity.this);
        Button button22 = new Button(MainActivity.this);

        ConstraintLayout.LayoutParams params01 = new ConstraintLayout.LayoutParams(100,100);
        button11.setLayoutParams(params01);
        button11.setX(0);
        button11.setY(0);
        constraintLayout.addView(button11);

        ConstraintLayout.LayoutParams params02 = new ConstraintLayout.LayoutParams(100,100);
        button12.setLayoutParams(params02);
        button12.setX(100);
        button12.setY(0);
        constraintLayout.addView(button12);

        ConstraintLayout.LayoutParams params03 = new ConstraintLayout.LayoutParams(100,100);
        button21.setLayoutParams(params03);
        button21.setX(0);
        button21.setY(100);
        constraintLayout.addView(button21);

        ConstraintLayout.LayoutParams params04 = new ConstraintLayout.LayoutParams(100,100);
        button22.setLayoutParams(params04);
        button22.setX(100);
        button22.setY(100);
        constraintLayout.addView(button22);

        ScrollView SV = new ScrollView(MainActivity.this);
        ConstraintLayout.LayoutParams SVparams = new ConstraintLayout.LayoutParams(300,300);
        SV.setLayoutParams(SVparams);

        constraintLayout.setBackground(shape1);
        SV.setBackground(shape2);

        SV.addView(constraintLayout);
        layout.addView(SV);

    }

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
</androidx.constraintlayout.widget.ConstraintLayout>

score 1 · Accepted Answer · answered Jan 25 '20 at 17:31

My solution:

        ConstraintLayout.LayoutParams params03 = new ConstraintLayout.LayoutParams(100,100);
        params03.topToTop = PARENT_ID;
        params03.setMargins(0, 100, 0, 0);
        button21.setLayoutParams(params03);
        button21.setX(0);
        constraintLayout.addView(button21);

        ConstraintLayout.LayoutParams params04 = new ConstraintLayout.LayoutParams(100,100);
        params04.topToTop = PARENT_ID;
        params04.setMargins(0, 100, 0, 0);
        button22.setLayoutParams(params04);
        button22.setX(100);
        constraintLayout.addView(button22);

It looks like there's a bug when you put a ConstraintLayout inside a ScrollView. The ConstraintLayout's height defaults to WRAP_CONTENT. So when you set it to any other heights, it won't change. Also setY does not work. You have to set vertical constraints for the buttons in the bottom row to position them vertically.

Result:

kkaun · Answer 2 · 2020-01-25T16:22:28.457

If your target is really just simple 2x2 button grid(matrix), then I'm wondering why should you need to achieve this dynamically, when you can just describe all the layout in xml even if its just a fragment for some more complex view or, say, a list/grid item; moreover, you already have xml describing your ConstraintLayout. So in perspective it may look like this:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="300dp"
  android:layout_height="300dp"
  android:background="#8FFF0E">

  <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#105BFF">

    <Button
        android:id="@+id/btnFirst"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:id="@+id/btnSecond"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintStart_toEndOf="@id/btnFirst"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:id="@+id/btnThird"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btnFirst"/>

    <Button
        android:id="@+id/btnFourth"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintStart_toEndOf="@id/btnThird"
        app:layout_constraintTop_toBottomOf="@id/btnSecond"/>

  </androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>

After having it all in prepared view, you can either operate buttons by ids (either, hiding/showing them or changing their properties).

By the topic - you obviously can do it programmatically with the help of ConstraintSet. Check this one: ConstraintLayout: change constraints programmatically

2x2 buttons in a scrollview

2 Answers2

Result: