How to make the outer border of the control, not the inner border, the control border

How to make the outer border of the control, not the inner border, the control border

Reprinted please indicate the source, thank you: http://blog.csdn.net/harryweasley/article/details/46906681

Statement in advance: this blog is based on a TV set-top box and uses a remote control for all operations.

Check it first. After selection, edittext has a border.

As shown in, when the ui wants us to make such an effect, it is certainly easy for everyone to make it and directly change the background, as shown below:

In layout, add editText to background.

<EditText            android:id="@+id/edittext_search"            android:layout_width="@dimen/edit_text_width"            android:layout_height="46dp"            android:layout_marginLeft="@dimen/search_grid_left"            android:layout_marginRight="@dimen/search_grid_left"            android:layout_marginTop="@dimen/search_edittext_top"            android:background="@drawable/background_edittext_selector"            android:paddingLeft="10dp"            android:textColor="@color/white"            android:textSize="@dimen/text_detail_app_name" />

In res/drawable, create the background_edittext_selector.xml file, as shown below:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:state_focused="true"  android:drawable="@drawable/edittext_background"></item></selector>

In res/drawable, The edittext_background.xml file is as follows:

<? Xml version = "1.0" encoding = "UTF-8"?> <Shape xmlns: android = "http://schemas.android.com/apk/res/android"> <! -- Internal color --> <solid android: color = "@ color/edittext_bg"/> <! -- Edge line color --> <stroke android: width = "3dp" android: color = "@ color/selected_bg"/> <! -- Rounded margin --> <corners android: radius = "0dp"/> </shape>

In this way, the effect is achieved.

However, the ui says that what you do is the internal border. What I want is the outer border.

So how should we do this? It is still the above ideas. When editText has no focus, we will set the edge line width to 6dp and the color is not set. When editText gets the focus, we will set the edge line width to 3dp, and set the color. Haha.

 <EditText            android:id="@+id/edittext_search"            android:layout_width="@dimen/edit_text_width"            android:layout_height="46dp"            android:layout_marginLeft="@dimen/search_grid_left"            android:layout_marginRight="@dimen/search_grid_left"            android:layout_marginTop="@dimen/search_edittext_top"            android:background="@drawable/background_edittext_selector"            android:paddingLeft="10dp"            android:textColor="@color/white"            android:textSize="@dimen/text_detail_app_name" />

Set two drawable values here. The width and color are different.

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:state_focused="true"  android:drawable="@drawable/selected_edittext_background"></item>    <item   android:drawable="@drawable/edittext_background"></item></selector>

When edittext_background does not obtain the focus, the edge line is 6dp and the color is not set.

<? Xml version = "1.0" encoding = "UTF-8"?> <Shape xmlns: android = "http://schemas.android.com/apk/res/android"> <! -- Internal color --> <solid android: color = "@ color/edittext_bg"/> <! -- Edge line color --> <stroke android: width = "6dp"/> <! -- Rounded margin --> <corners android: radius = "0dp"/> </shape>

After selected_edittext_background gets the focus, it is shown as follows:

<? Xml version = "1.0" encoding = "UTF-8"?> <Shape xmlns: android = "http://schemas.android.com/apk/res/android"> <! -- Internal color --> <solid android: color = "@ color/edittext_bg"/> <! -- Edge line color --> <stroke android: width = "3dp" android: color = "@ color/selected_bg"/> <! -- Rounded margin --> <corners android: radius = "0dp"/> </shape>

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.