Developer technologies | .NET | Xamarin
A Microsoft framework for building cross-platform mobile apps using .NET and C# with native performance and user interfaces.
Vertical Button Text Position with Fixed Height
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(134.4, 12%, 23%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ENS%3C/text%3E%3C/svg%3E)
Nathan Sokalski
4,111
Reputation points
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?
Developer technologies | .NET | Xamarin
{count} votes
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(128, 8%, 22%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EA%3C/text%3E%3C/svg%3E)
Anonymous2023-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,111 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
Drawableused 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 theButton(it does not move the text). How can I actually move the text (get rid of whitespace at the top)? -
Anonymous
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" -
Anonymous
2023-03-29T09:19:07.3866667+00:00 I have not heard from you for a couple of days. Please let me know if there is anything that I can help here.
Sign in to comment
Sign in to answer