Vertical Button Text Position with Fixed Height

Question

Vertical Button Text Position with Fixed Height

Nathan Sokalski 4,056

I have a Button with a fixed height, and I need to offset the position of the text upwards. Increasing the bottom padding does not work, because the bottom of the text is initially cropped due to the Button having a fixed height. How can I reposition the text in the Button?

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 43,931 Reputation points Microsoft Vendor

2023-03-16T05:19:28.0266667+00:00
Increasing the bottom padding does not work

I test follow button, it is working. Please set the value of bottom padding to the half the value of height.

<Button HeightRequest="150" Padding="0,0,0,80" FontSize="Large" Text="Phone2" BackgroundColor="Aqua" HorizontalOptions="Center" VerticalOptions="Center" />

Which platform is not working when running code? Could you minimize code to just what is needed to reproduce the problem?

Nathan Sokalski 4,056

First of all, it looks like you are using Xamarin.Forms, but I am using Xamarin.Android. Here is a sample & screenshot of my code:

<Button android:layout_width="wrap_content" android:layout_height="30dp" android:minWidth="0dp" android:minHeight="0dp" android:paddingLeft="5dp" android:paddingTop="0dp" android:paddingRight="5dp" android:paddingBottom="0dp" android:background="@drawable/databuttonborder" android:textSize="30dp" android:textColor="@color/Black" android:text="TESTING"/>

Screenshot 2023-03-16 121510

And here is the code from databuttonborder (the Drawable used as my background):

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
	<solid android:color="@color/White"/>
	<stroke android:width="1dp" android:color="@color/Black"/>
</shape>

Setting android:paddingBottom="5dp" just adds more whitespace to the bottom of the Button (it does not move the text). How can I actually move the text (get rid of whitespace at the top)?

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 43,931 Reputation points Microsoft Vendor

2023-03-17T09:05:47.4+00:00
We cannot get rid of all of the wihtespace, but we can move the text to upper.

Please add the following properties to your Button.

android:insetTop="0dp" android:gravity="top|center"

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 43,931 Reputation points Microsoft Vendor

2023-03-16T05:19:28.0266667+00:00

Increasing the bottom padding does not work

I test follow button, it is working. Please set the value of bottom padding to the half the value of height.

<Button HeightRequest="150" Padding="0,0,0,80" FontSize="Large" Text="Phone2" BackgroundColor="Aqua" HorizontalOptions="Center" VerticalOptions="Center" />

Which platform is not working when running code? Could you minimize code to just what is needed to reproduce the problem?
Nathan Sokalski 4,056 Reputation points

2023-03-16T16:28:09.8166667+00:00

First of all, it looks like you are using Xamarin.Forms, but I am using Xamarin.Android. Here is a sample & screenshot of my code:

<Button android:layout_width="wrap_content" android:layout_height="30dp" android:minWidth="0dp" android:minHeight="0dp" android:paddingLeft="5dp" android:paddingTop="0dp" android:paddingRight="5dp" android:paddingBottom="0dp" android:background="@drawable/databuttonborder" android:textSize="30dp" android:textColor="@color/Black" android:text="TESTING"/>

And here is the code from databuttonborder (the Drawable used as my background):

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/White"/> <stroke android:width="1dp" android:color="@color/Black"/> </shape>

Setting android:paddingBottom="5dp" just adds more whitespace to the bottom of the Button (it does not move the text). How can I actually move the text (get rid of whitespace at the top)?
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 43,931 Reputation points Microsoft Vendor

2023-03-17T09:05:47.4+00:00

We cannot get rid of all of the wihtespace, but we can move the text to upper.

Please add the following properties to your Button.

android:insetTop="0dp" android:gravity="top|center"

Vertical Button Text Position with Fixed Height

Activity