How can i allign an object to the center with an image to the left of it?

Question

Here is what I want:

In iOS this is sooooo simple, but android it seems impossible. I want the text boxes center of the screen no matter what. When I add an image, the text boxes shift even though they are center aligned and the images are not. I want the icons centered with one another, but that also seems difficult unless they are in the same layout. Should I have them all in the same Relative Layout?

I have the main layout as a Linear layout using weights to give everything an appropriate height dimension with individual Relative or linear layouts being what is weighted. Is this an accepted pattern?

Here is an example of one of the icon textViews and textEdits.

            <RelativeLayout
                android:id="@+id/passwordRelativeLayout"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="83"
                android:gravity="center">

                <ImageView
                    android:id="@+id/passwordImageView"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:adjustViewBounds="true"
                    android:contentDescription="@string/email_ph"
                    android:gravity="center_horizontal"
                    android:src="@mipmap/lock_icon"
                    android:layout_alignParentBottom="true"
                    android:layout_toStartOf="@+id/passwordTextView" />

                <TextView
                    android:id="@+id/passwordTextView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_alignStart="@+id/passwordEditText"
                    android:labelFor="@+id/passwordEditText"
                    android:text="@string/password"
                    android:textColor="@color/white"
                    android:textSize="24sp" />

                <EditText
                    android:id="@+id/passwordEditText"
                    android:layout_width="500dp"
                    android:layout_height="45dp"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentEnd="true"
                    android:layout_below="@+id/passwordTextView"
                    android:layout_gravity="center_horizontal"
                    android:background="@mipmap/text_box_background"
                    android:gravity="center"
                    android:inputType="textPassword" />
            </RelativeLayout>\

This doesn't have the margins setup, but I'm just concerned with getting the pixel perfect centering setup for now.

Answer 1

First of all, remove the android:gravity="center" attribute from the RelativeLayout , and use android:layout_centerHorizontal="true" on the childs you want to center (the EditText in this case, also remove the android:layout_gravity="center_horizontal" attribute from it). Let me know if it helps

Answer 2

Here you go: should just have to change a few things, like the drawableLeft. Change it to your email mipmap and lock mipmap. Other than a few different id that you can change and the background of the layout, this should work. Proof it works

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="vertical"
>


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2.8"
        android:text="Email"
        android:textAlignment="viewStart"
        android:textColor="@android:color/black"
        android:textSize="20sp"
        android:gravity="bottom"
        />

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2.8" />


</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/edittext2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="5"
        android:drawableStart="@mipmap/ic_launcher"
        android:inputType="text"
        android:selectAllOnFocus="false"
        android:textColor="@android:color/black"
        />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2.8"
        android:text="Password"
        android:textAlignment="viewStart"
        android:textColor="@android:color/black"
        android:textSize="20sp"
        android:gravity="bottom"
        />

    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2.8" />


</LinearLayout>


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">


    <EditText
        android:id="@+id/edittext1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableStart="@mipmap/ic_launcher"
        android:inputType="text"
        android:textColor="@android:color/black" />


</LinearLayout>

<View
    android:layout_width="match_parent"
    android:layout_height="10dp" />

</LinearLayout>