Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android align set of buttons programatically in layout

the thing which I want to achieve in my application is to create dynamically a set of buttons with different text size and after that align these view inside a linear layout. Here is a sample of what I want to achieve :

image . Depending on the textsize I want the buttons to be align in a single line, if the last button is bigger than the screen size, it should properly go to the next line.

Any suggestions how can I achieve this or what should I look for, because I know that if I try button.getWidth(); it will return 0 and it won't work.

Thanks for any kind of suggestions!

EDIT

To achieve this you can use a new layout open sources by Google called: FlexboxLayout. You can learn more about it in this post from Android Developers Blog.

like image 842
hardartcore Avatar asked Jan 30 '26 04:01

hardartcore


2 Answers

Thanks to @Kameswari 's code which gave me the right direction I achieve this by using :

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(5, 5, 5, 5);

String[] mKeywordsArray = mKeywords.split(", ");
if(mKeywordsArray != null){

    LinearLayout mNewLayout = new LinearLayout(getActivity()); // Horizontal layout which I am using to add my buttons.
    mNewLayout.setOrientation(LinearLayout.HORIZONTAL);
    int mButtonsSize = 0;
    Rect bounds = new Rect();

    for(int i = 0; i < mKeywordsArray.length; i++){

        String mButtonTitle = mKeywordsArray[i];
        Button mBtn = new Button(getActivity());
        mBtn.setPadding(10, 3, 10, 3);
        mBtn.setText(mButtonTitle);

        Paint textPaint = mBtn.getPaint();
        textPaint.getTextBounds(mButtonTitle, 0, mButtonTitle.length(), bounds);
            // size of all buttons in current horizontal layout
            // i am using +45 because of extra padding which is set in xml for this layout
        mButtonsSize += ( bounds.width() + 45);
        if(mButtonsSize < (mScreenWidth - 32)){ // -32 because of extra padding in main layout.
            mNewLayout.addView(mBtn, params);
        } else {
            mButtonsLayout.addView(mNewLayout);
            mNewLayout = new LinearLayout(getActivity());
            mNewLayout.setOrientation(LinearLayout.HORIZONTAL);
            mButtonsSize = bounds.width();
            mNewLayout.addView(mBtn, params); // add button to a new layout so it won't be stretched because of it's width.
        }

    }

    mButtonsLayout.addView(mNewLayout); // add the last layout/ button.
}
like image 78
hardartcore Avatar answered Feb 01 '26 19:02

hardartcore


You can try the following While adding the buttons you can calculate the how much width till occupied as

occupiedWidth = button1Width + button2Width + ...

Every button width = textWidth + 2*margin + 2*padding

You can get your width of the text which you put on the button like

String buttonText = "<Your Button Text>"
paint.getTextBounds(buttonText, 0, buttonText.length(), bounds);
int textWidth = bounds.width();

Add this new button margins and paddings as

int newWidth = textWidth + buttonMargin*2 + buttonPadding*2;

if the total width is exceeding the screenwidth then move to next row.

like image 31
Kameswari Avatar answered Feb 01 '26 18:02

Kameswari



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!