Search code examples
javaandroidtableviewimage-resizingscreen-resolution

inserting images to table view don't cover the whole screen


enter image description here When my images are in a resolution of 128x128 and inserted to a tableview(that should cover the whole screen), they don't cover the whole screen but when I resize them to 256x256 then they cover the whole screen. Can't I use 9 patch image or something else to make them cover the whole screen and behave as needed in any screen resolution? Must I use the density?

I tried to set fitXY to my views but it didn't solve my problem.

I'm not sure if needed but here's my code:

I created 4 gif image buttons and added them to a list of gif image buttons:

for (int i = 0; i < 4; ++i) {
    GifImageButton myButton = new GifImageButton();
    myButton.setBackgroundResource(drawables[i]); // add some drawable to the button background
    myButton.setLayoutParams(new TableRow.LayoutParams(0, TableRow.LayoutParams.MATCH_PARENT, 1.0f));
    listButtons.add(myButton);
}

Then I created a tablelayout (rows = 2, columns = 2) programmatically and added it to my layout:

MyTableLayout tableLayout = new MyTableLayout(this);
tableLayout.createTableLayoutOfButtons(tableRows /*=2*/, tableCols /*=2*/, listButtons);
mylinearLayout.addView(tableLayout);

my MyTableLayout class is:

public class MyTableLayout extends TableLayout {

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

    // indexListButtons is the current index of the listButtons elements. so as long as there are buttons, we will add them to the table rows
    int indexListButtons = 0;
    public void createTableLayoutOfButtons(int numRows, int numCols, List<GifImageButton> listButtons) {
        setLayoutParams(new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT, TableLayout.LayoutParams.MATCH_PARENT));

        for (int i = 0; i < numRows; ++i) {
            TableRow tableRow = new TableRow(getContext());
            tableRow.setGravity(Gravity.CENTER);

            tableRow.setLayoutParams(new TableLayout.LayoutParams(
                    TableLayout.LayoutParams.MATCH_PARENT,
                    TableLayout.LayoutParams.MATCH_PARENT));

            for (int j = 0; j < numCols; ++j, ++indexListButtons) {
                // indices 0, 1, 2, 3
                if (indexListButtons < listButtons.size()) {
                    tableRow.addView(listButtons.get(indexListButtons));
                }
                // indices bigger than 3 don't exist so insert empty views in order to make each of the views in the same size
                else {
                    // not enough buttons
                    TableRow.LayoutParams params = new TableRow.LayoutParams(0, TableRow.LayoutParams.MATCH_PARENT, 1.0f);
                Button btn = new Button(getContext());
                btn.setLayoutParams(params);
                btn.setVisibility(View.INVISIBLE);
                tableRow.addView(btn);
                }
            }
            addView(tableRow);
        }
    }
}

======

EDIT

======

Veselin Todorov, let me understand if this was your meaning. thanks..

public class MyTableLayout extends TableLayout {

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

    // indexListButtons is the current index of the listButtons elements. so     as long as there are buttons, we will add them to the table rows
    int indexListButtons = 0;
    public void createTableLayoutOfButtons(int numRows, int numCols,     List<GifImageButton> listButtons) {
        setLayoutParams(new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT, TableLayout.LayoutParams.MATCH_PARENT));

        for (int i = 0; i < numRows; ++i) {
            TableRow tableRow = new TableRow(getContext());
            LinearLayout newLinearLayout = new LinearLayout(getContext());
            newLinearLayout.setLayoutParams(new     LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT, 1.0f));
            newLinearLayout.setOrientation(LinearLayout.VERTICAL);
            tableRow.addView(newLinearLayout, new TableLayout.LayoutParams(
                    TableLayout.LayoutParams.MATCH_PARENT,
                    TableLayout.LayoutParams.MATCH_PARENT, 1.0f));
            tableRow.setGravity(Gravity.CENTER);

            for (int j = 0; j < numCols; ++j, ++indexListButtons) {
                // indices 0, 1, 2, 3
                if (indexListButtons < listButtons.size()) {
                    newLinearLayout.addView(listButtons.get(indexListButtons));
                }
                // indices bigger than 3 don't exist so insert empty views     in order to make each of the views in the same size
                else {
                    // not enough buttons
                    TableRow.LayoutParams params = new     TableRow.LayoutParams(0, TableRow.LayoutParams.MATCH_PARENT, 1.0f);
                    Button btn = new Button(getContext());
                    btn.setLayoutParams(params);
                    btn.setVisibility(View.INVISIBLE);
                    newLinearLayout.addView(btn);
                }
            }
            addView(tableRow);
        }
    }
}

Solution

  • You can get the expected result by doing something like this:

        LinearLayout main = new LinearLayout(context);
        main.setOrientation(LinearLayout.VERTICAL);
    
        // for(etc. etc.)
        LinearLayout currentRow = new LinearLayout(context);
        currentRow.setOrientation(LinearLayout.HORIZONTAL);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(MATCH_PARENT, 0);
        params.weight = 1.0f;
        currentRow.setLayoutParams(params);
    
        View viewOne = new View(context);
        params = new LinearLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT);
        viewOne.setLayoutParams(params);
        currentRow.addView(viewOne);
    
        View viewTwo = new View(context);
        params = new LinearLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT);
        viewTwo.setLayoutParams(params);
        currentRow.addView(viewTwo);
    
        main.addView(currentRow);
        //} end of for
    

    You can wrap the code that creates the "currentRow" layout in your loop if you need more rows. This way you don't have to use a table layout and its relatively simple to create. The downside is it's not that efficient because it uses nested layouts but should not be a problem.

    Another thing to consider is if you need many rows like 10 or more you should probably use a RecyclerView with a GridLayoutManager so you don't create too much views and a very heavy layout.