缩放孩子后如何修复滚动视图大小？

Question

I am trying to zoom out a GridLayout that is inside a HorizontalScrollView. When the GridLayout is scaled (50%), the HorizontalScrollView keep the original size, which leads to a lot of blank space. How can I adjust the HorizontalScrollView size so that it fits the scaled GridLayout?

Here is a simplified version of what I am trying to do so that it is easier to understand:

Java code:

public class MainActivity extends AppCompatActivity {

    GridLayout gridLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        gridLayout = (GridLayout) findViewById(R.id.gridlayout);

    }

    public void zoomButton(View v){
        gridLayout.setScaleX(0.5f);
        gridLayout.setScaleY(0.5f);
    }

}

XML:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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/relative_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <HorizontalScrollView
            android:id="@+id/horizontalscrollview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <GridLayout
                android:id="@+id/gridlayout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:columnCount="5"
                android:transformPivotX="0dp"
                android:transformPivotY="0dp"
                tools:context=".MainActivity">

                <TextView
                    android:id="@+id/txt"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#335BF1"
                    android:padding="48dp"
                    android:text="NUMBER 01" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#34C40C"
                    android:padding="48dp"
                    android:text="NUMBER 02" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#335BF1"
                    android:padding="48dp"
                    android:text="NUMBER 03" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#34C40C"
                    android:padding="48dp"
                    android:text="NUMBER 04" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#335BF1"
                    android:padding="48dp"
                    android:text="NUMBER 05" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#34C40C"
                    android:padding="48dp"
                    android:text="NUMBER 06" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#335BF1"
                    android:padding="48dp"
                    android:text="NUMBER 07" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#34C40C"
                    android:padding="48dp"
                    android:text="NUMBER 08" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#335BF1"
                    android:padding="48dp"
                    android:text="NUMBER 09" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#34C40C"
                    android:padding="48dp"
                    android:text="NUMBER 10" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#335BF1"
                    android:padding="48dp"
                    android:text="NUMBER 11" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#34C40C"
                    android:padding="48dp"
                    android:text="NUMBER 12" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#335BF1"
                    android:padding="48dp"
                    android:text="NUMBER 13" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#34C40C"
                    android:padding="48dp"
                    android:text="NUMBER 14" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#335BF1"
                    android:padding="48dp"
                    android:text="NUMBER 15" />

            </GridLayout>

        </HorizontalScrollView>

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="16dp"
        android:onClick="zoomButton"
        android:text="ZoomOut" />

</RelativeLayout>

Before Zooming Out:

After Zooming Out (manually scrolled to show more of the blank space):

Answer 1

The size of the view does not change when the scale is changed.

When you zoom in your grid layout, the reason why your horizontalscroll view does not change its size is because for HorizontalScrollView, the size of gridlayout has not changed at all.

How can I adjust the HorizontalScrollView size so that it fits the scaled GridLayout?

you will have to change the size of your grid layout at the same time when you focus. This will not be easy as i can see that you are using the padding in your tables. So, when you decrease the size of your tables in gridlayout, your padding will misbehave and you will have incorrect view.

The minimum that can be done in your case is that you can change the height of HorizontalScrollView, for width you will have to deal with padding issues.

Code for Height Change

MainActivity

public class MainActivity extends AppCompatActivity {

    GridLayout gridLayout;
    HorizontalScrollView horizontalScrollView;
    RelativeLayout relative_layout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridLayout = (GridLayout) findViewById(R.id.gridlayout);
        horizontalScrollView = (HorizontalScrollView) findViewById(R.id.horizontalscrollview);
        relative_layout = (RelativeLayout) findViewById(R.id.relative_layout);
    }

    public void zoomButton(View v){
        gridLayout.setScaleY(0.5f);
        gridLayout.setScaleX(0.5f);

        FrameLayout.LayoutParams layout1 = new FrameLayout.LayoutParams(gridLayout.getWidth(), gridLayout.getHeight());
        gridLayout.setLayoutParams(layout1);

        RelativeLayout.LayoutParams layout = new RelativeLayout.LayoutParams(horizontalScrollView.getWidth(), horizontalScrollView.getHeight()/2);
        horizontalScrollView.setLayoutParams(layout);
    }
}

Answer 2

I found a better way of dealing with the blank space other then trying to change the view size dinamically.

I added listeners for scroll changes and limited the scrolling according to the math below (considering that I am scaling by 0.5f):

sView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
    @Override
    public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {

        if (scrollY >= gridLayout.getHeight/2-sView.getHeight){
            sView.setScrollY(gridLayout.getHeight/2-sView.getHeight);
        }

    }
});

hView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
    @Override
    public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {

        if (scrollX >= gridLayout.getWidth/2-hView.getWidth){
            hView.setScrollX(gridLayout.getWidth/2-hView.getWidth);
        }

    }
});

It solved my issue, I hope it's useful for someone else.