Android custom EditText cursor and underline color

<span id="Label3"></p><p><p>Recently in the writing of Small demo review foundation, in the use of edittext when suddenly found almost no notice of its cursor and underline the color, so spent a lot of time, read a lot of blog, now to summarize and share the Harvest.</p></p>1. First impressions: the native EditText<p><p>We have to modify the original edittext, first of all, of course, to recognize its true nature. Create a new project in Android studio, let mainactivity inherit from Appcompatactivity (why do you do this, say it later), and then place a edittext in the mainactivity layout:</p></p><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">linearlayout </span> <span class="hljs-attribute">xmlns: Android </span> =<span class="hljs-value"> "http://schemas.android.com/apk/res/android" </span> <span class=" Hljs-attribute ">xmlns:app </span> =<span class=" hljs-value ">" http://schemas.android.com/apk/res-auto "</span> Span class= "hljs-attribute" >android:orientation </span> =<span class="hljs-value"> "vertical" </span> <span class=" Hljs-attribute ">xmlns:tools </span> =<span class=" hljs-value ">" http://schemas.android.com/tools "</span> <span class="hljs-attribute">android:layout_width </span> =<span class="hljs-value"> "match_parent" </span> <span class=" Hljs-attribute ">android:layout_height </span> =<span class=" hljs-value ">" match_parent "</span> <span class=" Hljs-attribute ">tools:context </span> =<span class=" hljs-value ">" com.lindroid.edittext.MainActivity "</span> > </span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">EditText</span><span class="hljs-attribute">android:hint</span>=<span class="hljs-value">"native EditText"</span><span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_ Parent "</span><span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">" wrap_content "</span> /> </span></span><span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">linearlayout</span>></span></span></code></pre><p><p>Run the project and watch carefully to see that the cursor and underline are all PINK. Now let's start with a gradual change to the cursor Color.<br></p></p>2. Custom CURSOR Color<p><p>EditText has a property: <code>android:textCursorDrawable</code> it is used to set the cursor Style. In order to deepen the understanding, we first do an extra small experiment: set textcursordrawable to @null, which means to remove the system default style, but we all remember the property of the hidden cursor is <code>android:cursorVisible</code> , then what will the cursor look like? You can set different colors for text (android:textcolor) and hint text (android:textcolorhint properties), and then you will see that the cursor color is consistent with the Text.</p></p><p><p>After understanding <code>android:textCursorDrawable</code> The role, we can create a new Cursor_color.xml file under the drawable resource folder, which reads as follows</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span><span class="hljs-tag"><<span class="hljs-title">shape</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span> <span class="hljs-attribute">android:shape</span>=<span class="hljs-value">"rectangle"</span>></span> <span class="hljs-tag"><<span class="hljs-title">size</span> <span class="hljs-attribute">android:width</span>=<span class="hljs-value">"2dp"</span> /></span> <span class="hljs-tag"><<span class="hljs-title">solid</span> <span class="hljs-attribute">android:color</span>=<span class="hljs-value">"@android:color/holo_blue_light"</span> /></span><span class="hljs-tag"></<span class="hljs-title">shape</span>></span></code></pre></pre><p><p>The color of the cursor is the light blue that comes with the system, and the width is 2dp. Place a new edittext under the native edittext:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs xml"> <span class="hljs-tag"><<span class="hljs-title">EditText</span> <span class="hljs-attribute">android:textCursorDrawable</span>=<span class="hljs-value">"@drawable/cursor_color"</span> <span class="hljs-attribute">android:hint</span>=<span class="hljs-value">"自定义光标颜色"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span> /></span></code></pre></pre><p><p>The results are as follows:<br></p></p>3. EditText after canceling the background<p><p>In section 2nd, we set the property <code>android:textCursorDrawable</code> to "@null" and find that the cursor style becomes the same as the color of the text, so if the entire EditText background is set to "@null"? We can add a edittext and then increase the properties for it <code>android:background="@null"</code> :</p></p><p><p></p></p><p><p>As you can see, although the cursor style has not changed, but the underline disappears, but in addition, edittext's margin is not, if the cursor is not flashing, a glance looks like a textview.</p></p><p><p>Some of the online custom EditText underline tutorial is done this way, first remove the background, and then add a horizontal line below. This is a good operation, but for the sake of beauty, you still have to reset the spacing Value.</p></p>4, Custom Theme Change underline<p><p>Remember when we created Mainactivity to inherit appcompatactivity? The answer will be revealed when we get Here. This is done to use the material design style in the Appcompat-v7 package, for example, We can create a new myedittext style in the Styles.xml file:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs ruby"> <style name=<span class="hljs-string">"MyEditText"</span> parent=<span class="hljs-string">"Theme.AppCompat.Light"</span>> <item name=<span class="hljs-string">"colorControlNormal"</span>><span class="hljs-variable">@android</span><span class="hljs-symbol">:color/darker_gray</item></span> <item name=<span class="hljs-string">"colorControlActivated"</span>><span class="hljs-variable">@android</span><span class="hljs-symbol">:color/holo_orange_dark</item></span> <<span class="hljs-regexp">/style></span></code></pre></pre><p><p><code>colorControlNormal</code>Represents the default color of the control, <code>colorControlActivated</code> indicating the color of the control when it is activated, so that we can set the color of the edittext when it is not selected and Selected. Here I set the selected color to Orange.</p></p><p><p>Add an additional edittext to the activity_main.xml, plus the <code>android:theme="@style/MyEditText"</code> properties, as Follows:</p></p><p><p></p></p><p><p>As you can see, the color of the cursor and underline is modified, and the spacing remains.</p></p>5, Global Modification EditText Color<p><p>The previous practice is for a edittext to modify, if you need to edittext all the colors of the project to get rid of, then this is too much Work. Is there any way to make a one-foot-set?</p></p><p><p>I don't know if you found out, why edittext The default is the pink of the Sao qi? In fact, you set up several other controls (such as progressbar, switch, and so on), and their colors are basically pink. You just have to look at the styles.xml, and the Apptheme code is like This:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class="hljs applescript"> <style <span class="hljs-property">name </span> =< Span class= "hljs-string" > "apptheme" Parent=<span class="hljs-string"> "Theme.AppCompat.Light.DarkActionBar "</span> > <! <span class="hljs-comment">--Customize your theme here.--> </span> <<span class="hljs-property">item </span> <span class="hljs-property">name </span> =<span class="hljs-string"> "colorprimary" </span> > @color/colorprimary </<span class="hljs-property">item </span> > <<span class="hljs-property">item </span> <span class=" Hljs-property ">name </span> =<span class=" hljs-string ">" colorprimarydark "</span> > @color/colorprimarydark</ <span class="hljs-property">item </span> > <<span class="hljs-property">item </span> <span class=" Hljs-property ">name </span> =<span class=" hljs-string ">" coloraccent "</span> > @color/coloraccent</<span class="hljs-property">item </span> > </style> </code> </pre></pre><p><p>Did you see it? The coloraccent inside is the pink One. In order to understand these three colors, I specifically found a picture:<br></p></p>6. Custom underline when inheriting activity<p><p>The custom underline that we did before is inherited appcompatactivity, if you change to activity and then run on the phone below Android5.0, the effect is this:<br></p></p><p><p>Material Design Style disappeared, Although the color of the cursor can be modified, but the color of the underline is not changed. So we have to think of another way.</p></p><p><p>EditText is an input box, which we can understand: the underscore is simply to add a line to the bottom border of the input box. This can be done using the Layer-list (layer) in Android. Create a new two XML file: Et_underline_unselected.xml and et_underline_selected.xml, which is the background when the EditText is selected, while the latter is the background when unchecked:<br><strong>Et_underline_unselected.xml</strong></p></p><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-pi"><span class="hljs-pi"><?xml version= "1.0" encoding= "utf-8"?></span></span><span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">layer-list</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">item</span><span class="hljs-attribute">android:bottom</span>=<span class="hljs-value">"0dp"</span><span class="hljs-attribute">android:left</span>=<span class="hljs-value">" -2dp"</span><span class="hljs-attribute">android: </span>right =<span class="hljs-value">" -2dp"</span><span class="hljs-attribute">android:top</span>=<span class="hljs-value">" -2dp"</span>> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">shape</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">solid</span> <span class="hljs-attribute">android:color</span>=<span class="hljs-value">"@android: color/transparent"</span> /></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">stroke</span><span class="hljs-attribute">android:width</span>=<span class="hljs-value">"1dp"</span><span class="hljs-attribute">android:color</span>=<span class="hljs-value">"@android: color/darker_ Gray "</span> /> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">padding</span> <span class="hljs-attribute">android:bottom</span>=<span class="hljs-value">"4dp"</span> /></span></span> <span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">shape</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">Item</span>></span></span><span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">layer-list</span>></span></span></code></pre><p><p><strong>Et_underline_selected.xml</strong></p></p><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-pi"><span class="hljs-pi"><?xml version= "1.0" encoding= "utf-8"?></span></span><span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">layer-list</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">item</span><span class="hljs-attribute">android:bottom</span>=<span class="hljs-value">"0dp"</span><span class="hljs-attribute">android:left</span>=<span class="hljs-value">" -2dp"</span><span class="hljs-attribute">android: </span>right =<span class="hljs-value">" -2dp"</span><span class="hljs-attribute">android:top</span>=<span class="hljs-value">" -2dp"</span>> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">shape</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">solid</span> <span class="hljs-attribute">android:color</span>=<span class="hljs-value">"@android: color/transparent"</span> /></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">stroke</span><span class="hljs-attribute">android:color</span>=<span class="hljs-value">"@android: color/holo_green_light"</span><span class="hljs-attribute">android:width</span> =<span class="hljs-value">"2dp"</span> /> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">padding</span> <span class="hljs-attribute">android:bottom</span>=<span class="hljs-value">"4dp"</span> /></span></span> <span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">shape</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">Item</span>></span></span><span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">layer-list</span>></span></span></code></pre><p><p>I'm going to take layer-list as a list of layers, shape is an item in the list, because we only need to have a horizontal line in the bottom, so the shape is set to a negative value except the bottom margin in the List. There is a bit of distance between the cursor and the underscore, so the bottom padding of shape is set to 4dp. of course, The underline width is a little larger when Selected.</p></p><p>The <p> Creates a new secondactivity in the project, inherits the activity, and then places two edittext,background in the layout file as "@null" with the cursor using the light blue we had before. </p></p><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">linearlayout </span> <span class="hljs-attribute">xmlns: Android </span> =<span class="hljs-value"> "http://schemas.android.com/apk/res/android" </span> <span class=" Hljs-attribute ">xmlns:app </span> =<span class=" hljs-value ">" http://schemas.android.com/apk/res-auto "</span> Span class= "hljs-attribute" >xmlns:tools </span> =<span class="hljs-value"> "http://schemas.android.com/tools" </span> <span class="hljs-attribute">android:layout_width </span> =<span class="hljs-value"> "match_parent" </span> <span class="hljs-attribute">android:layout_height </span> =<span class="hljs-value"> "match_parent" </span> <span class="hljs-attribute">android:orientation </span> =<span class="hljs-value"> "vertical" </span> <span class=" Hljs-attribute ">tools:context </span> =<span class=" hljs-value ">" com.lindroid.edittext.SecondActivity "</span> </span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">edittext </span> <span class="hljs-attribute">android:id </span> =<span class="hljs-value"> "@+id/edittext1" </span> <span class="hljs-attribute">android:layout_width </span> =<span class="hljs-value"> "match_parent" </span> <span class="hljs-attribute">android:layout_height </span> =<span class="hljs-value"> "wrap_content" </span> <span class="hljs-attribute">android:layout_margin </span> =<span class="hljs-value"> "3dp" </span> <span class="hljs-attribute">android:background </span> =<span class="hljs-value"> "@null" </span> <span class="hljs-attribute">android:hint </span> =<span class="hljs-value"> " Custom EditText underline 1 "</span> <span class=" hljs-attribute ">android:textcursordrawable </span> = <span class="hljs-value"> "@drawable/cursor_color" </span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">EditText</span><span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/edittext2"</span><span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match _parent "</span><span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">" Wrap_content "</span><span class="hljs-attribute">android:layout_margin</span>=<span class="hljs-value">" 3DP " </span> <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@null"</span><span class="hljs-attribute">android:hint</span>=<span class="hljs-value">"custom edittext underline 2"</span> <span class="hljs-attribute"> Android:textcursordrawable</span>=<span class="hljs-value">"@drawable/cursor_color"</span> /> </span></span><span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">linearlayout</span>></span></span></code></pre><p><p>Then set the EditText listener event in the code</p></p><pre class="prettyprint"><code class=" hljs java"> <span class="hljs-javadoc"><span class="hljs-javadoc">/** initializes the edittext, which is unchecked by default **/</span></span>Edittext1.setbackgroundresource (r.drawable.et_underline_unselected); Edittext2.setbackgroundresource (r.drawable.et_underline_unselected);<span class="hljs-javadoc"><span class="hljs-javadoc">/** The first EditText Focus listener event **/</span></span>Edittext1.setonfocuschangelistener (<span class="hljs-keyword"><span class="hljs-keyword">New</span></span>View.onfocuschangelistener () {<span class="hljs-annotation"><span class="hljs-annotation">@Override</span></span> <span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">Onfocuschange</span></span>(View v,<span class="hljs-keyword"><span class="hljs-keyword">Boolean</span></span>Hasfocus) {<span class="hljs-keyword"><span class="hljs-keyword">if</span></span>(hasfocus) {LOG.E (TAG,<span class="hljs-string"><span class="hljs-string">"EditText1 Get focus"</span></span>); Edittext1.setbackgroundresource (r.drawable.et_underline_selected); }<span class="hljs-keyword"><span class="hljs-keyword">Else</span></span>{LOG.E (TAG,<span class="hljs-string"><span class="hljs-string">"EditText1 loses focus"</span></span>); Edittext1.setbackgroundresource (r.drawable.et_underline_unselected); } } });<span class="hljs-javadoc"><span class="hljs-javadoc">/** The second EditText Focus listener event **/</span></span>Edittext2.setonfocuschangelistener (<span class="hljs-keyword"><span class="hljs-keyword">New</span></span>View.onfocuschangelistener () {<span class="hljs-annotation"><span class="hljs-annotation">@Override</span></span> <span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">Onfocuschange</span></span>(View v,<span class="hljs-keyword"><span class="hljs-keyword">Boolean</span></span>Hasfocus) {<span class="hljs-keyword"><span class="hljs-keyword">if</span></span>(hasfocus) {LOG.E (TAG,<span class="hljs-string"><span class="hljs-string">"EditText2 Get focus"</span></span>); Edittext2.setbackgroundresource (r.drawable.et_underline_selected); }<span class="hljs-keyword"><span class="hljs-keyword">Else</span></span>{LOG.E (TAG,<span class="hljs-string"><span class="hljs-string">"EditText2 loses focus"</span></span>); Edittext2.setbackgroundresource (r.drawable.et_underline_unselected); } } });</code></pre><p><p>Note that to set all the EditText to run, the effect is as Follows:<br></p></p><p><p>The effect is implemented, but the code in the activity looks too verbose, so we can encapsulate the checked and unchecked states into the State Selector. Create a new Et_underline_selector.xml file under the drawable folder:</p></p><pre class="prettyprint"><code class=" hljs xml"><code class="hljs xml"><span class="hljs-pi"><?xml version= "1.0" encoding= "utf-8"? </span> <span class="hljs-tag"><<span class="hljs-title">selector </span> <span class="hljs-attribute">xmlns:android </span> =<span class="hljs-value"> "http://schemas.android.com/apk/res/android" </span>; </span> <span class=" Hljs-tag "><<span class=" hljs-title ">item </span> <span class=" hljs-attribute ">android:state_focused </span> =< Span class= "hljs-value" > "false" </span> <span class="hljs-attribute">android:drawable </span> = <span class="hljs-value"> "@drawable/et_underline_unselected" </span>/> <span class="hljs-tag"><< Span class= "hljs-title" >item </span> <span class="hljs-attribute">android:state_focused </span> = <span class="hljs-value"> "true" </span> <span class="hljs-attribute">android:drawable </span> =<span class="hljs-value"> "@drawable/et_underline_selected "</span>/> <span class=" hljs-tag "></<span class=" hljs-title ">selector </span>; </span> </code></code></pre><p><p><code>android:state_focused</code>Indicates whether the control receives FOCUS. Then set in the layout file <code>android:background="@drawable/et_underline_selector"</code> , the Activity's Focus Listener code is Deleted. run, you can see the exact same effect.</p></p>7. PostScript<p><p>Article at this end, but I have to learn a lot of things, the article in some of the knowledge out of my personal understanding, there may be deficiencies or mistakes, Welcome to correct me!</p></p><p><p>Because the code here is relatively simple, the project will not be uploaded, we have to knock, I believe there is no problem.</p></p>Reference documents<p><p>Android EditText Change Border color<br>How Android changes the EditText underline color style</p></p><p><p>Android custom EditText cursor and underline color</p></p></span>