Alexiz Hernandez Alexiz Hernandez - 5 months ago 28
Android Question

How to design EditText and Button in Android

How can I design my

EditText
and
Button
like in the
Instagram
application? I understand that I would need to do this by using
Drawable
files but every link I have found only shows how to design using
Gradients
which looks horrible. I just want something simple but not sure where to start.

enter image description here

Answer

All you need to do is create a Button or Edittext or TextView with transparent background and colored border like:

activity code :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorpink">

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Transparent Button with blue border"
    android:id="@+id/button"
    android:padding="10dp"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/transparent_button_selector"
    android:textColor="@color/colorPrimary"
    android:textAllCaps="false"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true" />

</RelativeLayout>

transparent_button_selector.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- pressed state -->
<item android:state_pressed="true"><shape>

    <solid android:color="@android:color/transparent" />
    <stroke android:width="2dp" android:color="@color/colorPrimary" />
    <corners  android:radius="22dp" />

</shape></item>

<!-- focused state -->
<item android:state_focused="true"><shape>

    <solid android:color="@android:color/transparent" />
    <stroke android:width="2dp" android:color="@color/colorPrimary" />
    <corners android:radius="22dp" />

</shape></item>
<!-- normal state -->
<item><shape>

    <solid android:color="@android:color/transparent"/>
    <stroke android:width="2dp" android:color="@color/colorPrimary" />
    <corners android:radius="22dp" />

</shape></item>
</selector>

colors :

<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="colorpink">#AAFF4081</color>

And its looking like :

enter image description here

You can change transparent_button_selector.xml , change colors, radius values, borders and try to create your layout firstly and then think about background. Yes i will say gradient too . There is one question here for it : changing-gradient-background-colors-on-android-at-runtime

Also you can play with backgorund color, if you use few transparent white like #33FFFFFF then the result will be like : http://imgur.com/poGN2nn