TableLayout on ViewPager exceeds width even if set as match_parent

Question

TableLayout on ViewPager exceeds width even if set as match_parent

I am currently trying to create a custom view that displays a grid of items with an item at position 0 spanning 2 spans. Since I cannot create it using a simple gridview, I tried to create somewhat similar behavior that is produced from a ScrollView with a TableLayout that contains the views from the adapter. It works fine on a simple application where I just need to display the content, but once I added my work on the fragment that is contained in the viewPager, everything stretches beyond the width of the screen and I don't know why. I already set fillViewPort

to true but nothing happened and I tried to set table layout options and still didn't solve it.

Here's my code:

public class CustomHeaderGridView extends ScrollView {

    TableLayout tableLayout;

    private Adapter adapter;
    private final DataSetObserver observer = new DataSetObserver() {

        @Override
        public void onChanged() {
            setAdapter(adapter);
        }

        @Override
        public void onInvalidated() {
            removeAllViews();
        }
    };

    public CustomHeaderGridView(Context context) {
        super(context);
    }

    public CustomHeaderGridView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomHeaderGridView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public Adapter getAdapter() {
        return adapter;
    }

    public void setAdapter(Adapter adapter) {
        if (this.adapter != null) {
            this.adapter.unregisterDataSetObserver(observer);
        }
        this.adapter = adapter;
        if (this.adapter != null) {
            this.adapter.registerDataSetObserver(observer);
        }
        initViewsFromAdapter();
    }

    protected void initViewsFromAdapter() {
        removeAllViews();
        tableLayout = new TableLayout(getContext());
        tableLayout.setStretchAllColumns(true);
        TableLayout.LayoutParams table_params = new TableLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        tableLayout.setLayoutParams(table_params);
        addView(tableLayout);

        if (adapter != null) {
            /*for (int i = 0; i < adapter.getCount(); i++) {
                TableRow row_header = new TableRow(getContext());

                row_header.addView(adapter.getView(i,null,null));

                //row_header.addView(adapter.getView(i, null, this), i);
                tableLayout.addView(row_header);
            }*/
            setCustomTabItems();
        }


    }

    protected void refreshViewsFromAdapter() {
        int childCount = getChildCount();
        int adapterSize = adapter.getCount();
        int reuseCount = Math.min(childCount, adapterSize);

        for (int i = 0; i < reuseCount; i++) {
            adapter.getView(i, getChildAt(i), this);
        }

        if (childCount < adapterSize) {
            for (int i = childCount; i < adapterSize; i++) {
                addView(adapter.getView(i, null, this), i);
            }
        } else if (childCount > adapterSize) {
            removeViews(adapterSize, childCount);
        }
    }

    public void setColumnCount(int col_count){
     this.col_count = col_count;
    }

    int col_count = 2; //min 2 cols

    private void setCustomTabItems(){
        if(col_count==2){
            if(adapter.getCount()>0) {

                //header here
                TableRow row_header = new TableRow(getContext());

                View view_header = adapter.getView(0,null,null);
                TableRow.LayoutParams params = new TableRow.LayoutParams();
                params.span = 2;
                view_header.setLayoutParams(params);
                //todo add listener

                row_header.addView(view_header);

                tableLayout.addView(row_header);

                for (int i = 1; i < adapter.getCount(); i += col_count) {
                    TableRow row = new TableRow(getContext());

                    for (int ctr = 0; ctr < col_count; ctr++) {
                        try {
                            View view = adapter.getView(i + ctr,null,null);
                            //todo add listener

                            row.addView(view);
                        }catch (Exception e){
                            //Out of bounds since the count is not always even
                        }
                    }

                    tableLayout.addView(row);
                }
            }
        } else {
            //do something for col count more than 2
            if(adapter.getCount()>0) {

                //header here
                TableRow row_header = new TableRow(getContext());

                View view_header = adapter.getView(0, null, null);
                TableRow.LayoutParams params = new TableRow.LayoutParams();
                params.span = 2;

                ImageView img_header =  (ImageView) view_header.findViewById(R.id.img_item);
                ViewGroup.LayoutParams header_image_params = img_header.getLayoutParams();
                header_image_params.height = header_image_params.height*2 + 5;
                img_header.setLayoutParams(header_image_params);

                view_header.setLayoutParams(params);
                //todo add listener



                row_header.addView(view_header);

                //add the other subviews here that will be on the side of the header view
                int start_header_item = 1;
                for(int i = 0; i < col_count - 2; i++){
                    LinearLayout vertical_container = new LinearLayout(getContext());
                    TableRow.LayoutParams layout_params = new TableRow.LayoutParams();
                    layout_params.span = 1;
                    vertical_container.setLayoutParams(layout_params);
                    vertical_container.setOrientation(LinearLayout.VERTICAL);


                    //add the content views here
                    for(int ctr = start_header_item; ctr <= start_header_item + 1; ctr++){
                        try {
                            View view = adapter.getView(ctr, null, null);
                            //todo add listener

                            vertical_container.addView(view);
                        }catch (Exception e){
                            //Out of bounds since the count is not always even
                        }
                    }

                    start_header_item+=2;

                    row_header.addView(vertical_container);
                }

                tableLayout.addView(row_header);

                int start_item = (col_count + col_count - 3);
                for (int i = start_item; i < adapter.getCount(); i += col_count) {
                    TableRow row = new TableRow(getContext());

                    for (int ctr = 0; ctr < col_count; ctr++) {
                        try {
                            View view = adapter.getView(i + ctr,null,null);
                            //todo add listener

                            row.addView(view);
                        }catch (Exception e){
                            //Out of bounds since the count is not always even
                        }
                    }

                    tableLayout.addView(row);
                }
            }
        }
    }


}

and for display just use

MyAdapter adapter = new MyAdapter(getActivity(), items);
content_tab = (CustomHeaderGridView) view.findViewById(R.id.grid_content);
content_tab.setAdapter(adapter);

Note that this is still running, so I haven't applied any enhancements yet and I still have hardcoded IDs

ImageView img_header =ImageView)view_header.findViewById(R.id.img_item);

It's easy to enlarge the image by multiplying it by the height. Now it generally looks like this without putting it on the pager view:

enter image description here