CODEWITHSUNDEEP
androidandroid-layoutandroid-relativelayout
user2354693
user2354693

Reputation: 3

Android Button Text offset in RelativeLayout

I'm creating a calculator to learn the basics of programming using Android Studio. In my creation of a very basic RelativeLayout for the standard calculator screen the first button on the screen has text out of alignment from all the other buttons. (It is even on other screens such as the scientific and programming activities) Why would one single button just display the text out of alignment? Note its the same on the physical phone as it is in the simulator phone screen so its not some type of simulator / actual hardware difference. I drew a line on the image to better show the alignment difference example. Also tried Gravity="Center" and it does not change the text alignment. 

Button
    android:id="@+id/stnd_btn_mc"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_below="@+id/mytextView"
    android:onClick="stnd_btn_memory"
    android:paddingTop="0dp"
    android:gravity="center"
    android:text="MC" />
<Button
    android:id="@+id/stnd_btn_mr"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_alignBaseline="@+id/stnd_btn_mc"
    android:layout_alignBottom="@+id/stnd_btn_mc"
    android:layout_alignLeft="@+id/stnd_btn_sqrt"
    android:layout_toEndOf="@+id/stnd_btn_mc"
    android:layout_toRightOf="@+id/stnd_btn_mc"
    android:onClick="stnd_btn_memory"
    android:text="MR" />
<Button
    android:id="@+id/stnd_btn_mplus"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_alignBaseline="@+id/stnd_btn_mc"
    android:layout_alignBottom="@+id/stnd_btn_mc"
    android:layout_alignLeft="@+id/stnd_btn_exp"
    android:layout_toRightOf="@+id/stnd_btn_mr"
    android:onClick="stnd_btn_memory"
    android:text="M+" />
<Button
    android:id="@+id/stnd_btn_Memoryminus"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_alignBaseline="@+id/stnd_btn_mc"
    android:layout_alignBottom="@+id/stnd_btn_mc"
    android:layout_alignLeft="@+id/stnd_btn_overx"
    android:layout_toEndOf="@+id/stnd_btn_mplus"
    android:layout_toRightOf="@+id/stnd_btn_mplus"
    android:onClick="stnd_btn_memory"
    android:text="M-" />

Calculator Simulator Screen

This is the XML to the whole page as requested. Thank you.

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/content_standard"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.robertgenthner.standardactivity.StandardActivity"
    tools:showIn="@layout/app_bar_standard">
    <TextView
        android:id="@+id/mytextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:gravity="right"
        android:text="0.00"
        android:textSize="40dp"
        android:textStyle="bold" />
    <!--FIRST ROW OF BUTTONS START-->
    <Button
        android:id="@+id/stnd_btn_mc"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_below="@+id/mytextView"
        android:onClick="stnd_btn_memory"
        android:gravity="center"

        android:text="MC" />
    <Button
        android:id="@+id/stnd_btn_mr"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignBaseline="@+id/stnd_btn_mc"
        android:layout_alignBottom="@+id/stnd_btn_mc"
        android:layout_alignLeft="@+id/stnd_btn_sqrt"
        android:layout_toEndOf="@+id/stnd_btn_mc"
        android:layout_toRightOf="@+id/stnd_btn_mc"
        android:onClick="stnd_btn_memory"
        android:text="MR" />
    <Button
        android:id="@+id/stnd_btn_mplus"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignBaseline="@+id/stnd_btn_mc"
        android:layout_alignBottom="@+id/stnd_btn_mc"
        android:layout_alignLeft="@+id/stnd_btn_exp"
        android:layout_toRightOf="@+id/stnd_btn_mr"
        android:onClick="stnd_btn_memory"
        android:text="M+" />
    <Button
        android:id="@+id/stnd_btn_Memoryminus"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignBaseline="@+id/stnd_btn_mc"
        android:layout_alignBottom="@+id/stnd_btn_mc"
        android:layout_alignLeft="@+id/stnd_btn_overx"
        android:layout_toEndOf="@+id/stnd_btn_mplus"
        android:layout_toRightOf="@+id/stnd_btn_mplus"
        android:onClick="stnd_btn_memory"
        android:text="M-" />
    <!--FIRST ROW OF BUTTONS END-->
    <!--SECOND ROW OF BUTTONS START-->
    <Button
        android:id="@+id/stnd_btn_percent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/stnd_btn_mr"
        android:layout_marginTop="10dp"
        android:onClick="stnd_btn_functions"
        android:text="%" />
    <Button
        android:id="@+id/stnd_btn_sqrt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/stnd_btn_percent"
        android:layout_toEndOf="@+id/stnd_btn_percent"
        android:layout_toRightOf="@+id/stnd_btn_percent"
        android:onClick="stnd_btn_functions"
        android:paddingLeft="10dp"
        android:text="√" />
    <Button
        android:id="@+id/stnd_btn_exp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/stnd_btn_sqrt"
        android:layout_toEndOf="@+id/stnd_btn_sqrt"
        android:layout_toRightOf="@+id/stnd_btn_sqrt"
        android:onClick="stnd_btn_functions"
        android:paddingLeft="10dp"
        android:text="X^2" />
    <Button
        android:id="@+id/stnd_btn_overx"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/stnd_btn_exp"
        android:layout_toEndOf="@+id/stnd_btn_exp"
        android:layout_toRightOf="@+id/stnd_btn_exp"
        android:onClick="stnd_btn_functions"
        android:paddingLeft="10dp"
        android:text="1/X" />
    <!--SECOND ROW OF BUTTONS END-->
    <!--THIRD ROW OF BUTTONS START-->
    <Button
        android:id="@+id/stnd_btn_ce"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/stnd_btn_percent"
        android:layout_marginTop="10dp"
        android:onClick="stnd_btn_functions"
        android:text="CE" />
    <Button
        android:id="@+id/stnd_btn_c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/stnd_btn_ce"
        android:layout_alignBottom="@+id/stnd_btn_ce"
        android:layout_toEndOf="@+id/stnd_btn_ce"
        android:layout_toRightOf="@+id/stnd_btn_ce"
        android:onClick="stnd_btn_functions"
        android:paddingLeft="10dp"
        android:text="C" />
    <Button
        android:id="@+id/stnd_btn_bksp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/stnd_btn_c"
        android:layout_toEndOf="@+id/stnd_btn_c"
        android:layout_toRightOf="@+id/stnd_btn_c"
        android:onClick="stnd_btn_functions"
        android:paddingLeft="10dp"
        android:text="bksp" />
    <Button
        android:id="@+id/stnd_btn_divide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/stnd_btn_bksp"
        android:layout_toEndOf="@+id/stnd_btn_bksp"
        android:layout_toRightOf="@+id/stnd_btn_bksp"
        android:onClick="stnd_btn_functions"
        android:paddingLeft="10dp"
        android:text="÷" />
    <Button
        android:id="@+id/stnd_btn_7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/stnd_btn_bksp"
        android:layout_marginTop="10dp"
        android:onClick="stnd_btn_numbers"
        android:text="7" />
    <!--THIRD ROW OF BUTTONS END-->
    <!--FORTH ROW OF BUTTONS START-->
    <Button
        android:id="@+id/stnd_btn_8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/stnd_btn_7"
        android:layout_toEndOf="@+id/stnd_btn_7"
        android:layout_toRightOf="@+id/stnd_btn_7"
        android:onClick="stnd_btn_numbers"
        android:paddingLeft="10dp"
        android:text="8" />
    <Button
        android:id="@+id/stnd_btn_9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/stnd_btn_8"
        android:layout_toEndOf="@+id/stnd_btn_8"
        android:layout_toRightOf="@+id/stnd_btn_8"
        android:onClick="stnd_btn_numbers"
        android:paddingLeft="10dp"
        android:text="9" />
    <Button
        android:id="@+id/stnd_btn_multiply"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/stnd_btn_9"
        android:layout_toEndOf="@+id/stnd_btn_9"
        android:layout_toRightOf="@+id/stnd_btn_9"
        android:onClick="stnd_btn_functions"
        android:paddingLeft="10dp"
        android:text="X" />
    <Button
        android:id="@+id/stnd_btn_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/stnd_btn_7"
        android:layout_marginTop="10dp"
        android:onClick="stnd_btn_numbers"
        android:text="4" />
    <!--FORTH ROW OF BUTTONS END-->
    <!--FIFTH ROW OF BUTTONS START-->
    <Button
        android:id="@+id/stnd_btn_5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/stnd_btn_4"
        android:layout_toEndOf="@+id/stnd_btn_4"
        android:layout_toRightOf="@+id/stnd_btn_4"
        android:onClick="stnd_btn_numbers"
        android:paddingLeft="10dp"
        android:text="5" />
    <Button
        android:id="@+id/stnd_btn_6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/stnd_btn_5"
        android:layout_toEndOf="@+id/stnd_btn_5"
        android:layout_toRightOf="@+id/stnd_btn_5"
        android:onClick="stnd_btn_numbers"
        android:paddingLeft="10dp"
        android:text="6" />
    <Button
        android:id="@+id/stnd_btn_minus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/stnd_btn_6"
        android:layout_toEndOf="@+id/stnd_btn_6"
        android:layout_toRightOf="@+id/stnd_btn_6"
        android:onClick="stnd_btn_functions"
        android:paddingLeft="10dp"
        android:text="-" />
    <!--FIFTH ROW OF BUTTONS END-->
    <!--SIXTH ROW OF BUTTONS START-->
    <Button
        android:id="@+id/stnd_btn_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/stnd_btn_4"
        android:layout_marginTop="10dp"
        android:onClick="stnd_btn_numbers"
        android:text="1" />
    <Button
        android:id="@+id/stnd_btn_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/stnd_btn_1"
        android:layout_toEndOf="@+id/stnd_btn_1"
        android:layout_toRightOf="@+id/stnd_btn_1"
        android:onClick="stnd_btn_numbers"
        android:paddingLeft="10dp"
        android:text="2" />
    <Button
        android:id="@+id/stnd_btn_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/stnd_btn_2"
        android:layout_toEndOf="@+id/stnd_btn_2"
        android:layout_toRightOf="@+id/stnd_btn_2"
        android:onClick="stnd_btn_numbers"
        android:paddingLeft="10dp"
        android:text="3" />
    <Button
        android:id="@+id/stnd_btn_plus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/stnd_btn_3"
        android:layout_toEndOf="@+id/stnd_btn_3"
        android:layout_toRightOf="@+id/stnd_btn_3"
        android:onClick="stnd_btn_functions"
        android:paddingLeft="10dp"
        android:text="+" />
    <!--SIXTH ROW OF BUTTONS END-->
    <!--SEVENTH ROW OF BUTTONS START-->
    <Button
        android:id="@+id/stnd_btn_posneg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/stnd_btn_1"
        android:layout_marginTop="10dp"
        android:onClick="stnd_btn_functions"
        android:text="±" />
    <Button
        android:id="@+id/stnd_btn_0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/stnd_btn_posneg"
        android:layout_toEndOf="@+id/stnd_btn_posneg"
        android:layout_toRightOf="@+id/stnd_btn_posneg"
        android:onClick="stnd_btn_numbers"
        android:paddingLeft="10dp"
        android:text="0" />
    <Button
        android:id="@+id/stnd_btn_period"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/stnd_btn_0"
        android:layout_toEndOf="@+id/stnd_btn_0"
        android:layout_toRightOf="@+id/stnd_btn_0"
        android:onClick="stnd_btn_functions"
        android:paddingLeft="10dp"
        android:text="." />
    <Button
        android:id="@+id/stnd_btn_equal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/stnd_btn_period"
        android:layout_toEndOf="@+id/stnd_btn_period"
        android:layout_toRightOf="@+id/stnd_btn_period"
        android:onClick="stnd_btn_functions"
        android:paddingLeft="10dp"
        android:text="=" />
</RelativeLayout>

Upvotes: 0

Views: 403

Answers (1)

Isaac
Isaac

Reputation: 1452

If you remove the paddingTop from the first button the text should line up

Edit:

To tidy up the code you could also try to use a Grid layout (Saves having to align everything manually)

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_column="4">

    <Button
        android:id="@+id/stnd_btn_mc"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:onClick="stnd_btn_memory"
        android:text="MC" />
    <Button
        android:id="@+id/stnd_btn_mr"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:onClick="stnd_btn_memory"
        android:text="MR" />
    <Button
        android:id="@+id/stnd_btn_mplus"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:onClick="stnd_btn_memory"
        android:text="M+" />
    <Button
        android:id="@+id/stnd_btn_Memoryminus"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:onClick="stnd_btn_memory"
        android:text="M-" />
</GridLayout>

Upvotes: 2

Related Questions