Android - EditText custom style

Question

I haven't used custom styles before. I want to customize the style of EditText on my app to be exactly like in the image below.

I'm not asking you to design it for me. Just point me in the right direction. Thanks in advance!

Answer 1

You can use layer list for styling. Create this file in drawable folder bg_search.xml

<?xml version="1.0" encoding="utf-8"?>
      <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item>
           <shape android:shape="rectangle">
           <solid android:color="@android:color/darker_gray" />
           <corners android:radius="5dp" />
           </shape>
    </item>

     <item
       android:bottom="2dp"
       android:left="1dp"
       android:right="1dp">
           <shape android:shape="rectangle">
           <solid android:color="@android:color/white" />
           <corners android:radius="5dp" />
           </shape>
      </item>
  </layer-list>

and apply as a background of your EditText

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_search"
        android:drawableLeft="@android:drawable/ic_menu_search"
        android:drawablePadding="15dp"
        android:hint="Search SoundCloud"
        android:padding="16dp" />

Output: