androidandroid-layoutpixel-perfect

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


Here is what I want:

enter image description here

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.


Solution

  • 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