Wrapped Button Text Adds Extra Margin

Nathan Sokalski 4,121

I have a GridLayout of Buttons, one of which has text that wraps to 2 lines. However, this wrapping adds extra space above the Button, causing the Buttons to no longer be vertically aligned. If I place the Button with wrapped text inside a FrameLayout, it looks fine. However, having 1 Button inside a FrameLayout while the others are not makes the code much less efficient, and placing all the Buttons inside a FrameLayout would add a lot of extra elements, possibly hurting performance. Here is the xml for the Button with & without the FrameLayout:

<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="0" android:layout_row="2">  
	<Button style="@style/EntryButton" android:textSize="18dp" android:text="Two Lines"/>  
</FrameLayout>  

<Button style="@style/EntryButton" android:layout_column="0" android:layout_row="2" android:textSize="18dp" android:text="Two Lines"/>

And here are screenshots (from the Visual Studio 2022 Designer, but the same thing happens when debugging):

Why is the text wrapping adding extra space only when not inside the FrameLayout, and is there any easy way to avoid this?

1 answer

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 69,386 Reputation points Microsoft Vendor

2022-06-13T09:34:47.077+00:00

Hello,

is there any easy way to avoid this?

Please add android:layout_marginBottom= directly for your button.

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Nathan Sokalski 4,121 Reputation points

2022-06-13T16:04:34.34+00:00

That adds a margin below the Button, and does not get rid of the space above the Button. It also adds space below the other Button(s) in the row (therefore they are still misaligned with each other). If I add android:layout_marginTop with a negative value, it gets rid of the undesired space, but I do not know what that value should be (or how to calculate it). I also noticed that android:textSize is affecting the space above the Button (you probably noticed that the Button with the extra space above it has a smaller android:textSize than the one beside it). This means that even if the text does not wrap, using a smaller android:textSize adds extra space above the Button. Therefore, that means that both the wrapping & android:textSize are adding extra space. I will (in case it matters) mention that the style used for the Button has a fixed layout_height.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 69,386 Reputation points Microsoft Vendor

2022-06-14T07:54:22.867+00:00

If you calculate it at runtime. performance cost is bigger than use FrameLayout wrap the button. Based on my side, FrameLayout wrap the button is a good choose.

Nathan Sokalski 4,121 Reputation points

2022-06-14T15:08:44.577+00:00

What code would I use if I were to calculate it at runtime? Regardless of which way I actually do it, I still want to know how to do it with code so that it actually is a choice and to help me understand what is causing this to happen.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 69,386 Reputation points Microsoft Vendor

2022-06-15T09:55:43.68+00:00

You need to get the above Button and left Button's position with following code, then calculate it by button's width and padding

int[] location = new int[2]; btn.GetLocationInWindow(location); new Point(location[0], location[1]);
Sign in to comment

Share via

Wrapped Button Text Adds Extra Margin

1 answer