Is it possible to change the size of icon inside EditText

Question

I am creating a login window with username and password fields and in each I would like to put icons. When I add icon to EditText field I cannot change the size of icon.

Icon is inside EditText field because I want to change EditText background when it is focused.

I tried to put icon and EditText view inside LinearLayout, but I couldn't change layout background when EditText is focused.

My EditText code:

<EditText
    android:id="@+id/user_name_edit_text"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="35dp"
    android:layout_marginRight="35dp"
    android:layout_marginTop="35dp"
    android:background="@drawable/custom_border_selector"
    android:drawablePadding="5dp"
    android:hint="@string/username"
    android:singleLine="true"
    android:textColor="#757575"
    android:textSize="15sp"
    android:drawableLeft="@drawable/ic_person_grey_24dp"
    />

EditText visual:

Answer 1

You can change the icon and use a smaller one on focus. This is the method you should use.

public void setCompoundDrawablesWithIntrinsicBounds (
                                       int left, int top, int right, int bottom)

Sets the Drawables (if any) to appear to the left of, above, to the right of, and below the text. Use 0 if you do not want a Drawable there. The Drawables' bounds will be set to their intrinsic bounds.

Now to add padding you can use this

 public void setCompoundDrawablePadding (int pad)

Sets the size of the padding between the compound drawables and the text.

Related XML Attributes:

android:drawablePadding

More information here and here. There are many other methods you might find interesting.

Answer 2

In case you'd like to solve the problem in xml, here's sample code where you can manipulate your image size/padding:

<!-- USERNAME INPUT -->
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/edit_text_selector">

    <!-- INPUT -->
    <EditText
        android:id="@+id/username_input"
        android:layout_marginLeft="-10dp"
        android:layout_toRightOf="@+id/username_icon"
        android:text=""
        android:hint="Username"
        android:padding="10dp"
        android:background=""
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <!-- ICON -->
    <ImageView
        android:padding="3dp"
        android:id="@+id/username_icon"
        android:src="@drawable/perm_group_personal_info"
        android:layout_width="40dp"
        android:layout_height="40dp" />

</RelativeLayout>

And here is how it looks like: