CODEWITHSUNDEEP
androidxmlandroid-edittextandroid-button
Alexiz Hernandez
Alexiz Hernandez

Reputation: 359

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

Upvotes: 2

Views: 1705

Answers (4)

takmilul
takmilul

Reputation: 96

may be this code can help you. This is the activity.xml file. use TextView as Button.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FF929999">

    <EditText
        android:id="@+id/userName"
        android:layout_width="fill_parent"
        android:layout_height="48.0dip"
        android:layout_marginBottom="16.0dip"
        android:background="@drawable/input_field"
        android:hint="username"
        android:inputType="textNoSuggestions"
        android:paddingLeft="16.0dip"
        android:paddingRight="16.0dip"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textColorHint="#b3ffffff"
        android:textCursorDrawable="@null"/>

    <TextView
        android:id="@+id/saveButton"
        android:layout_width="match_parent"
        android:layout_height="48.0dip"
        android:background="@drawable/button_border"
        android:gravity="center"
        android:text="Save"
        android:textColor="#ccffffff"
        android:textSize="16sp"
        android:textStyle="bold"/>

</LinearLayout>

input_field.xml file should look like this:

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#1affffff"/>
    <corners android:radius="2.0dip"/>
</shape>

And button_border.xml will be like this:

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#1affffff"/>
            <stroke 
                 android:width="1.0dip"
                 android:color="#80ffffff"/>
            <corners android:radius="2.0dip"/>
        </shape>
   </item>
   <item>
      <shape android:shape="rectangle">
          <solid android:color="#00000000"/>
          <stroke 
              android:width="1.0dip" 
              android:color="#33ffffff"/>
          <corners android:radius="2.0dip"/>
      </shape>
   </item>

enjoy the design.

Upvotes: 2

Yasin Ka&#231;maz
Yasin Ka&#231;maz

Reputation: 6663

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 : https://i.sstatic.net/KLdWH.jpg

Upvotes: 3

Asif Patel
Asif Patel

Reputation: 1764

Use Drawable with border and transparent color for EditText and Button, and the entire violet background is image, not gradient drawable. And also use TransitionDrawable for transitioning between two drawables like Instagram.

Upvotes: 1

Egg
Egg

Reputation: 2056

It looks like they are using a single gradient drawable for the background of the login layout and then the EditTexts have a mostly-transparent white background and the Button has a fully transparent background. To round the corners of the EditText/Button, set the background to a drawable that looks something like this:

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
    <solid android:color="@android:color/transparent"/>
    <corners 
        android:bottomRightRadius="2dp" 
        android:bottomLeftRadius="2dp" 
        android:topLeftRadius="2dp" 
        android:topRightRadius="2dp"/> 
</shape>

Upvotes: 3

Related Questions