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.
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>
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 :
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.stack.imgur.com/KLdWH.jpg
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.
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.
