Android Customize your edittext to easily change the bottom line color _android

The problem with the recent Android project is that in order to keep the app style consistent, you need to change the original EditText bottom color to orange. Some solutions have been searched on the Internet, and we hereby record the summary.

Effect chart

The default EditText bottom line color is blue,

We want to achieve the orange effect

Implementation methods

1. Prepare two background plans

One as the default background for EditText, and the other as the background of the input

Note

Use 9.png, do not use PNG, otherwise the picture will blur, spend

Create an XML file with selector in the folder drawable

<!--drawable/edittext_shape.xml-->
<selector xmlns:android= "http://schemas.android.com/apk/res/ Android ">

 <item android:drawable=" "@drawable/edittext_default" android:state_focused= "false"/>
 <item android:drawable= "@drawable/edittext_focused" android:state_focused= "true"/>

</selector>

Create a new style in the styles.xml below the values folder

This step is to reuse this style, or you can write code directly in the layout layout XML without using style.

<!--drawable/values/styles.xml-->

<style name= "Smsedittext" >
 <item name= "Android:layout_" MarginLeft ">20dp</item>
 <item name=" Android:layout_marginright ">20dp</item>
 < Item Name= "Android:layout_margintop" >20dp</item>
 <item name= "Android:layout_width" >match_ parent</item>
 <item name= "android:layout_height" >wrap_content</item>
 <item name= " Android:textsize ">16sp</item>
 <item name=" Android:background "> @drawable/edittext_shape</ Item>
</style>

Refer to the custom EditText in the layout layout file

<!--drawable/layout/fragment_bomb.xml-->
<linearlayout
 android:id= "@+id/input"
 android: Layout_width= "Match_parent"
 android:layout_height= "match_parent"
 android:orientation= "vertical
 " android:padding= "20DP" >

 <edittext
  android:id= "@+id/phone"
  style= "@style/smsedittext"
  android:hint= "@string/phone_hint"
  android:inputtype= "phone"
  android:maxlength= "one"
  android: maxlines= "1"/>

 <edittext
  android:id= "@+id/times"
  style= "@style/smsedittext"
  android: hint= "@string/times_hint"
  android:inputtype= "number"
  android:maxlines= "1"/>
</ Linearlayout>

Add a straight line to the bottom of the edittext (imitation Micro-letter)

The original effect is that the bottom of the edittext is a concave line, which is not very beautiful. The micro-letter input box below is a straight line. How to achieve it? You can change the picture above to a straight line type, but you need the help of the art staff PS. We can also use the XML file to draw the graph to achieve the desired straight effect.

Drawing lines with XML

Originally wanted to use XML to draw lines, to make a micro-letter input box of the kind below is a straight line, found that the pure use of XML is not beautiful, this or let the art to do a background map may be better.

View this article:Android uses XML to implement split lines

EditText Remove Border

Android:background= "@null"

This code can remove the EditText border
EditText Bottom Add line

Create a new line.xml in drawable

<shape xmlns:android= "http://schemas.android.com/apk/res/android"
android:shape= "Rectangle" >

 < Solid android:color= "@color/orange_normal"/>

 <size android:height= "
  1dp"
  android:width= " 1000DP "/>

</shape>

Referencing in a layout layout file

<edittext
  android:id= "@+id/phone"
  android:layout_width= "match_parent"
  android:layout_height= "Wrap_content"
  android:background= "@null"
  android:drawablebottom= "@drawable/line"
  android:hint= "@string/phone_hint"
  android:inputtype= "phone"
  android:maxlength= "one"
  android:maxlines= "1"/>

The above is the entire content of this article, I hope to help you learn.