Learn Pain Less

HomeOur TeamContact
Android
Material design Edit text (Carded) in Android
Pawneshwer Gupta
Pawneshwer Gupta
July 10, 2017
1 min
Material design Edit text (Carded) in Android

Material design Edit text (Carded) in Android

If you want to create Edit Text same as search bar in Google map and in google playstore. As shown in below screenshot.

Material design Edit text (Carded) in Android
Material design Edit text (Carded) in Android

Then you can easily create without any third-party library. They are actually cards (search bar cards). So we will also use CardView. You simply need to put your EditText inside CardView and you are done.

Material design Edit text (Carded) in Android
Material design Edit text (Carded) in Android

But if you do so, then you will see underline below EditText which will not look like google map’s search card. So the trick is set background of EditText to any color and your problem is solved.

Here is complete example code :

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp">
<EditText
android:id="@+id/search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:hint="Search ..."
android:textSize="14sp"
android:padding="8dp" />
</android.support.v7.widget.CardView>

As you can see i set background of EditText to white color and passing 8d. And my EditText looks exactly like google map’s search card

Material design Edit text (Carded) in Android
Material design Edit text (Carded) in Android

Note: if you set background of EditText to”@null” then your EditText will look exactly like google map’s search card but problem is that this will hide “pointer cursor”, which blink inside EditText. And you have to create custom drawable for cursor pointer. So better is to use background to same color as CardView.

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Tags

materialcardviewgoogle material design

Share


Pawneshwer Gupta

Pawneshwer Gupta

Software Developer

Pawneshwer Gupta works as a software engineer who is enthusiastic in creating efficient and innovative software solutions.

Expertise

Python
Flutter
Laravel
NodeJS

Social Media

Related Posts

how to make fully Android Transparent Status bar
how to make fully Android Transparent Status bar
January 10, 2018
1 min
Learn Pain Less  © 2024, All Rights Reserved.
Crafted with by Prolong Services

Quick Links

Advertise with usAbout UsContact Us

Social Media