Android: How to add programmaticaly fixed size buttons without deformation in a layout?

Question

I want to create a Card Deck app that contains (lets say) from 0 to 10 total cards as it runs.

I have a RelativeLayout created with XML inside a parent layout, this RelativeLayout has width to match parent and height to wrap content.

Now i want to add fixed size buttons (cards) to that layout and when the don't have room they must not deformate but be scaled and placed on top of the other.

When i just add them it happens this: https://postimg.org/image/ic8pmaju7/

But i want to achieve something like this : https://postimg.org/image/567dj49j9/

*For second image i used setmargins(xleft,x,x,x);...xleft++; , but when i have 2 or 5 buttons they keep being on the top of the other button, instead of just use the free space.

So im asking if there is a layout or a method that when there is no room (small screen or too many buttons) puts buttons on top and next of the other button than deforming them.

Answer 1

ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.

Using the ConstraintLayout you can do it, and spending less user processing than if you use nested LinearLayouts .

To put button next to button and adjust them in according to screen size, you can use the Chains , that is a resource of ConstraintLayout .

Chains provide group-like behavior in a single axis (horizontally or vertically). The other axis can be constrained independently.

Click here to read more about ConstraintLayout and Click here to read more about Chains .

Answer 2

Ok, guys i tryied what you suggested but i couldnt't achieve what i wanted, so i spent HOURS working on it and i ended up with some math and some help of fuctions to (at last) find the solution. I will post my code if someone wants to give a try:

    public void ChangeView(View view) {
    //here we put number of cards that we want to be scaled and displayed (cards=buttons)
    int CardMax=13;//13 for example!!!

    //getting scale for dpi of phone screen(i think??)
    final float scale = getResources().getDisplayMetrics().density;
    // getting some values we need to know
    // **THESE VALUES DEPEND FROM SCREEN RESOLUTION OR THE SIZE OF BUTTON**
    int layWidth = layout.getWidth();  //getting layout width that equals screen width(in pixels)
    int btnWidth = (int) (50 * scale); //setting and scaling the width of the button for any screen
    int maxLayfit=layWidth/btnWidth;   //getting how many buttons can be added to layout without deformation
    int layMidWidth = layWidth / 2;    //getting layouts half width (that helps to start adding buttons from middle)
    int StrMeasur;                     // this help how to start setting the buttons
    if (CardMax <= maxLayfit) {        // if cards are less than Layout can hold without deformation
        StrMeasur = CardMax;           // StrMeasur equals number of cards
    } else {
        StrMeasur = maxLayfit;         // else equals max number of cards without deformation
    }
    int pointer=0;                     //pointer that will say where to put the first button
    pointer = layMidWidth - ((btnWidth / 2) * StrMeasur);//depends of how many cards we have and button width
    int start =layMidWidth-((btnWidth / 2) * StrMeasur);
    int nextBtn = 0;                   //nextBtn says where to put the next button
    //here we set the buttons on top and next to the previous button as we need **TRICKY PART**
    if (CardMax > maxLayfit-1) {       //if number of cards is bigger than the number the layout can hold
                                       //then we calculate first card position (start/pointer) and the last card position(=layout width-button width)
                                       //we find how many equal parts the layout has to be divided with the given cards
                                       //and we get the width of the part to set it as pointer of the next card place
        nextBtn =(((layWidth-start)-btnWidth)-start)/CardMax;
    }else{
        nextBtn=btnWidth;              //else the pointer just set buttons next to the other
    }
    //Here we display all the buttons
    for (int i = 0; i < CardMax; i++) {
        Button cards = new Button(this);
        cards.setWidth(btnWidth);
        cards.setHeight((int) (90 * scale));
        RelativeLayout.LayoutParams params2 = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        params2.setMargins(pointer, 0, 0, 0);
        cards.setLayoutParams(params2);
        cards.setText("" + (i + 1));
        cards.setId(i);
        layout.addView(cards);
        pointer = pointer + nextBtn;
    }
}

I belive it will work on any screen.