Style of editText on Android with shadow similar to Google search

Question

Style of editText on Android with shadow similar to Google search

Navigation

#1 by (1 votes)

1

How can I achieve a style for editText on Android like the one in the next image?

The part of the magnifying glass is a button, also the editText has a shadow very similar to the one that is using the editText of the Google search engine ( the editText of the image has a small shadow that in the image does not you can observe very well ).

That design I did for web and I'm starting on Android (using Android Studio).

And if it is possible, I would like to be able to do the same animation as the google animation bar: when the mouse is placed on top or it is given a tap (in case of the mobile) then the shadow will be bigger.

android edittext

asked by kev 12.01.2017 в 08:03

source

1 answer

Doubt with animations on Android Google Maps API, error "No Access-Control-Allow-Origin"

score 1 · Answer 1

After a while I achieved these styles: in the activity layout, use this code for the editText and for an ImageButton:

<EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textAutoCorrect"
        android:hint="@string/hintext_buscar"
        android:ems="10"
        android:id="@+id/editTextBuscar"
        android:textAlignment="center"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:layout_centerVertical="true"
        android:layout_alignParentStart="true"
        android:background="@drawable/edittext_border"
        android:elevation="2.5dp"
        android:layout_toStartOf="@+id/btnBuscar" />

<ImageButton
        android:theme="@style/AppTheme.Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/searchicon"
        android:id="@+id/btnBuscar"
        android:paddingTop="18.5dp"
        android:paddingBottom="18.5dp"
        android:contentDescription="buscarbtn"
        android:layout_centerVertical="true"
        android:layout_alignParentEnd="true" />

And create an xml in drawable with the following code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Background Color -->
    <solid android:color="#ffffff" />
    <!-- Border Color -->
    <stroke android:width="1dp" android:color="#ffffff" />
    <!-- Round Corners -->
    <corners android:radius="1dp" />
    <padding android:top="12dp" android:bottom="12dp"></padding>

</shape>