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.

Could you add a screenshot of what the iOS implementation would look like? I think you can do what I understand you're describing with a single RelativeLayout, but having some difficulty visualizing it. — Femi, Mar 30 '17 at 19:01

score 2 · Accepted Answer · answered Mar 30 '17 at 19:03

2

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

answered Mar 30 '17 at 19:03

Juan Martinez

770
5
16

invalid inside of a linear layout. – Sethmr Mar 30 '17 at 19:07
I changed the textEdit's to that though, and they still get off center with the icon to the left of them. – Sethmr Mar 30 '17 at 19:08
So I guess the gravity in the Relative layout is overriding the rest of them. That does get me somewhere. – Sethmr Mar 30 '17 at 19:10
So now I just can't find a way of centering the editText. – Sethmr Mar 30 '17 at 19:12
android:layout_centerInParent="true" is what seems to be doing it for me. How can I center the icons with one another horizontally now though? – Sethmr Mar 30 '17 at 19:16
I'm sorry about the late response... I can't think of a good way to align the icons, but you can try two options. If you know the dimensions for both of them you can just use marginLeft on the smallest one, or you can edit the smallest image and add padding so it gets of the same size as the largest one and the content is centered. – Juan Martinez Mar 31 '17 at 12:23
Thanks... those are the two things I thought of as well. I was just hoping there was a better option. – Sethmr Mar 31 '17 at 12:36

score 0 · Answer 2 · answered Apr 08 '17 at 00:07

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>

I like the previous answer better, but thank you for your time. — Sethmr, Apr 08 '17 at 11:54
You're welcome. I layout_gravity never works for me, so i put this together. @Sethmr — Carter Ray, Apr 08 '17 at 15:25

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

2 Answers2