Android Creating button dynamically and fill layout

Question

I'm creating a button dynamically. The number of button is depend on the size of arraylist. the problem is, after creating the button I will add to the layout using addview method. The problem is I'm using linear layout, as by default orientation for linear layout is horizontal, so the button will fill the layout horizontally. Because of that some of the button is not visible. What I'm trying to achieve is something look like this

multiple button in android messaging contact

My code is like below:

Button[] tv = new Button[arraylist.size()];
for(int i=0;i<arraylist.size();i++){                                
    tv[i] = new Button(getApplicationContext());
    tv[i].setText(arraylist.get(i).toString());
    tv[i].setTextColor(Color.parseColor("#000000"));
    tv[i].setTextSize(20);
    tv[i].setPadding(15, 5, 15, 5);     
    linearlayout.addView(tv[i]);    
}

If I set the orientation of linear layout to vertical the button will fill vertically. So if there any solution to create the button dynamically and fill the layout both horizontal and vertical as shown by image.

devunwired · Accepted Answer · 2012-01-15 15:46:20Z

7

There is not a canned layout in the SDK that does exactly what you are aiming for (i.e. lay out as many children horizontally as will fit, then flow to the next line to lay out some more), so you will need to create a custom ViewGroup that accomplishes this purpose. Luckily for you, Romain Guy created one live on-screen during a presentation at Devoxx.

Here is a link to that presentation video.

Here is a link to the sample code and slides.

HTH

answered Jan 15, 2012 at 15:46

devunwired

63.4k12 gold badges132 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zahary · Accepted Answer · 2012-01-18 16:08:47Z

After 2 days struggling thinking bout this problem finally I've found the solution. I've try put all my contact list, store it in arraylist and create button for each element and I'm quite satisfy with the result after display on the screen. Here is how I do the trick. I really appreciate for any comment from others.

variable declaration;

int currWidth;
int currCounter;
boolean isNewLine;
LinkedList<HashMap<String,Object>> button;
ArrayList<String> nameNumber = new ArrayList<String>();
contactWrapper = (LinearLayout) findViewById(R.id.multiple_selection);

create button onClick event;

for(int i=0;i<nameNumber.size();i++){                               
            tv[i] = new Button(getApplicationContext());                            
            String[] namePhone = nameNumber.get(i).toString().split("@@");
            phoneNumber.add(namePhone[1]);
            tv[i].setText(namePhone[0]);
            tv[i].setTag(namePhone[1]);
            tv[i].setTextColor(Color.parseColor("#000000"));                                
            tv[i].setTextSize(20);
            tv[i].setPadding(15, 5, 15, 5);                                 
            tv[i].measure(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            HashMap<String, Object> map = new HashMap<String,Object>();
            map.put("button", tv[i]);
            map.put("width", tv[i].getMeasuredWidth());                             
            button.add(map);
        }
        drawLayout();

drawlayout method is where I add button and arrange accordingly to fit the layout;

public void drawLayout(){
        int counter=0;
        contactWrapper.setOrientation(LinearLayout.VERTICAL);
        currCounter=0;
        currWidth=0;
        isNewLine=false;
        LinearLayout[] row = new LinearLayout[nameNumber.size()];
        row[currCounter] = new LinearLayout(getApplicationContext());
        @SuppressWarnings("rawtypes")       
        Iterator it = button.iterator();
        for(int i = 0; i<button.size(); i++){   
            it.next();  
            row[currCounter].setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT));
            currWidth += Integer.parseInt(button.get(i).get("width").toString());
            if(isNewLine){              
                if(currWidth < contactWrapper.getWidth()){  
                    row[currCounter].addView((View) button.get(i).get("button"));
                    if(!it.hasNext()){                      
                        contactWrapper.addView(row[currCounter]);
                    }else{                      
                        if(contactWrapper.getWidth()<(currWidth+Integer.parseInt(button.get(i+1).get("width").toString()))){
                            isNewLine=true;
                            contactWrapper.addView(row[currCounter]);
                            currCounter+=1; 
                            row[currCounter] = new LinearLayout(getApplicationContext());
                            currWidth=0;
                        }else{
                            isNewLine=false;
                        }
                    }
                }else{
                    isNewLine=true;
                    contactWrapper.addView(row[currCounter]);
                    currCounter+=1; 
                    row[currCounter] = new LinearLayout(getApplicationContext());
                    currWidth=0;
                }                                               
            }else{
                if(currWidth < contactWrapper.getWidth()){                                      
                    if(!it.hasNext()){
                        row[currCounter].addView((View) button.get(i).get("button"));
                        contactWrapper.addView(row[currCounter]);
                    }else{
                        row[currCounter].addView((View) button.get(i).get("button"));
                        if(contactWrapper.getWidth()<(currWidth+Integer.parseInt(button.get(i+1).get("width").toString()))){
                            isNewLine=true;
                            contactWrapper.addView(row[currCounter]);
                            currCounter+=1; 
                            row[currCounter] = new LinearLayout(getApplicationContext());
                            currWidth=0;
                        }else{
                            isNewLine=false;
                        }
                    }
                }else{
                    isNewLine=true;
                    contactWrapper.addView(row[currCounter]);
                    currCounter+=1; 
                    row[currCounter] = new LinearLayout(getApplicationContext());
                    currWidth=0;
                }
            }           
            counter++;
        }            
    }

this code quite messy + I'm not fully utilize the size of array for

LinearLayout[] row = new LinearLayout[nameNumber.size()];

but it work for me.

what are "contactWrapper, multiple_selection,tv, phoneNumber, LayoutParams" ??!!

confucius · Accepted Answer · 2012-01-15 11:51:51Z

0

use TableLayout instead of LinearLayout this is tutorial hope this will help you to get the idea

answered Jan 15, 2012 at 11:51

confucius

13.3k10 gold badges52 silver badges67 bronze badges

1 Comment

Zahary Over a year ago

Thanx for your feedback. I've try it before, but it stretch the button and one button display per row. In my case I want to wrap the text of the button. So number of button display per row depend on size of the button.

Roman Black · Accepted Answer · 2012-01-15 15:00:27Z

0

Does you set android:layout_width="fill_parent"? Do this if you don't.

answered Jan 15, 2012 at 15:00

Roman Black

3,4971 gold badge24 silver badges31 bronze badges

Comments

Orest · Accepted Answer · 2012-01-15 15:47:17Z

0

Well, you can try using more sophisticated way. You can create horizontal linear layout, and add buttons to it. Every time you're attempting to add new button, you check if there is place for it, by finding difference between layout's and buttons widths.

Each time your horizontal layout is filled, you add it to another vertical layout, and create another horizontal layout to store buttons left.

I used that trick in my apps.

answered Jan 15, 2012 at 15:47

Orest

1,8975 gold badges19 silver badges28 bronze badges

1 Comment

Zahary Over a year ago

yeah... I'm thinking bout that too, unfortunately I'm only able to get width of the linear layout only. For button width return 0 as the UI has not been sized and laid out on the screen yet so can you provide me sample code for what you've done to ur apps.

Muhammad Aamir Ali · Accepted Answer · 2013-05-01 10:08:54Z

try this its working fine

this.row = (LinearLayout)findViewById(R.id.tags); this.row.setOrientation(LinearLayout.VERTICAL); LinearLayout one = new LinearLayout(this);

    //get the size of the screen
    Display display = getWindowManager().getDefaultDisplay();
    this.screenWidth = display.getWidth();  // deprecated
    this.screenHeight = display.getHeight();// depreceted

    for(int i=0; i<6; i++) {

        one.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));

        this.button = new Button(this);
        button.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        if(i==0) {
            this.button.setText("Muhammad Aamir");
        } else if(i==1) {
            this.button.setText("Ahsan");
        } else if(i==2) {
            this.button.setText("Mujahid");
        } else if(i==3) {
            this.button.setText("Waqas");
        } else if(i==4) {
            this.button.setText("Ali");
        } else {
            this.button.setText("Ahmer");
        }

        //get the size of the button text
        Paint mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setTextSize(button.getTextSize());
        mPaint.setTypeface(Typeface.create(Typeface.SERIF, Typeface.NORMAL));
        float size = mPaint.measureText(button.getText().toString(), 0, button.getText().toString().length());
        size = size+14;
        this.totalTextWidth += size;

        if(totalTextWidth < screenWidth) {
            one.addView(button);
        } else {
            this.row.addView(one);
            one = new LinearLayout(this);
            one.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
            one.addView(button);
            this.totalTextWidth = size;
        }
    }
    this.row.addView(one);
}

Collectives™ on Stack Overflow

Android Creating button dynamically and fill layout

6 Answers 6

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related