How can we overlay the icon with rectangular shape in android

Question

I want to design the UI as shown at image below. We're unable to do that. Here is my code

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <EditText
        android:id="@+id/EditShop"
        android:drawableLeft="@drawable/user_icon"
        android:background="@drawable/rectangle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:hint="Shopname"
        android:inputType="text"
        android:padding="7dp"
        android:singleLine="true" />
</LinearLayout>

I want the output like:

You mean a person icon inside the edit text field? – Abhijit Chakra Aug 18 '17 at 09:06 — Abhijit Chakra, Aug 18 '17 at 09:06

score 0 · Answer 1 · answered Aug 18 '17 at 06:57

Try this.

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

    <EditText
        android:id="@+id/EditShop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/rectangle"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:hint="Shopname"
        android:inputType="text"
        android:padding="7dp"
        android:singleLine="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/user_icon"
        android:layout_alignBottom="@+id/EditShop"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

score 0 · Answer 2 · answered Aug 18 '17 at 06:57

Use RelativeLayout instead of LinearLayout.

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
    android:id="@+id/EditShop"
    android:drawableLeft="@drawable/user_icon"
    android:background="@drawable/rectangle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="20dp"
    android:hint="Shopname"
    android:inputType="text"
    android:padding="7dp"
    android:singleLine="true" />
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/user_icon"
    android:layout_alignBottom="@+id/EditShop"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

</RelativeLayout>

score 0 · Answer 3 · answered Aug 18 '17 at 07:26

0

You can try to use layer-list. But I'm not sure about correct scaling of it. Understanding Android's <layer-list>

Bulletproof solution is to draw your background in nine-patch. https://developer.android.com/studio/write/draw9patch.html

answered Aug 18 '17 at 07:26

Ufkoku

2,384
20
44

score 0 · Answer 4 · answered Dec 04 '18 at 08:41

Without needs to write code & great way, use ContraintLayout , By the way here is complete layout file & result pictures:

Resize EditText & Same result:

Layout Code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white" >

    <EditText android:layout_width="315dp" android:layout_height="65dp"
              android:id="@+id/editText" tools:layout_editor_absoluteY="131dp"
              tools:layout_editor_absoluteX="37dp"/>
    <ImageView
            android:layout_width="42dp"
            android:paddingLeft="5dp"
            android:layout_height="45dp" app:srcCompat="@android:drawable/ic_lock_lock"
            android:id="@+id/imageView2" android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/editText" app:layout_constraintBottom_toTopOf="@+id/editText"
            app:layout_constraintVertical_bias="0.556"
            app:layout_constraintEnd_toStartOf="@+id/editText" android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp" app:layout_constraintStart_toStartOf="@+id/editText"
            app:layout_constraintHorizontal_bias="0.34"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Change app:srcCompat="@android:drawable/ic_lock_lock" with your drawable icon or use android:src="@drawable/resourcename" for png resource — Hamed Jaliliani, Dec 04 '18 at 08:45

How can we overlay the icon with rectangular shape in android

4 Answers4