Custom Controls for Android UI programming-CustomEditText and android custom ui

Source: Internet
Author: User

Custom Controls for Android UI programming-CustomEditText and android custom ui

Based on the previous blogAndroid UI programming-custom controls (I)-ImageButtonWe also have a preliminary understanding of custom controls. Now we can try to customize EditText. You can share the following two methods of custom UI programming. In the previous blog, I have some detailed descriptions of custom controls. In this blog, if you still have some questions, for more information, see the previous blog "Android UI programming-custom controls (I)-ImageButton.

Example: The input box with the delete button is displayed:


Basic prototype construction:

You can see two things from the above: EditText on the left and the picture on the right (a Button here ). When the input in EditText is empty, the clear button on the right is not displayed. Once the content is entered in EditText, the clear button on the right is displayed.

Design and function addition: 1. Design

After we have selected the skeleton, the rest is to wear clothes. Now let's see how to dress it. The following is the sample code:

<RelativeLayout xmlns:android=""    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal" >    <EditText        android:id="@+id/input_edittext"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_centerVertical="true"        android:layout_marginLeft="10dp"        android:layout_marginTop="5dp"        android:layout_marginBottom="5dp"        android:background="@null"        android:layout_toLeftOf="@+id/clear_button"        android:ems="10" >    </EditText>    <Button        android:id="@+id/clear_button"        android:layout_width="30dp"        android:layout_height="30dp"        android:layout_centerVertical="true"        android:background="@drawable/clear_button"        android:layout_marginRight="10dp"        android:layout_alignParentRight="true"        android:visibility="invisible" /></RelativeLayout>

2. Add features

Function addition is implemented in Java code, Because Java code can dynamically adjust the function, but cannot write the dynamic adjustment function in xml code. Java code implements the following functions:

Function of listening text box:

public void addTextChangedListener() {        mInput.addTextChangedListener(new TextWatcher() {                        @Override            public void onTextChanged(CharSequence s, int start, int before, int count) {                int len = mInput.getText().toString().length();                if (len > 0) {                    mClear.setVisibility(View.VISIBLE);                } else {                    mClear.setVisibility(View.INVISIBLE);                }            }                        @Override            public void beforeTextChanged(CharSequence s, int start, int count,                    int after) {            }                        @Override            public void afterTextChanged(Editable s) {            }        });    }

Clear Text:

private void setClearEvent() {        mClear.setOnClickListener(new OnClickListener() {                        @Override            public void onClick(View v) {                mInput.setText("");            }        });    }

Usage Analysis: 1. Use in xml Code

The Code is as follows:

<com.demo.customview.clearedittext.widgets.ClearEditText        android:id="@+id/activity_main_clear_edittext"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp" />

2. Use in Java code

ClearEditText clearEditText = (ClearEditText) findViewById (R. id. activity_main_clear_edittext); clearEditText. setHint ("input text for testing"); clearEditText. addTextChangedListener ();

Example: insert an expression in EditText:

Custom class implementation:

I won't go into a long article here. Because the content is very single. The Java implementation code is as follows:

Public class SmiliesEditText extends EditText {public SmiliesEditText (Context context) {super (context);} public SmiliesEditText (Context context, AttributeSet attrs) {super (Context, attrs );} @ Override protected void onDraw (Canvas canvas) {super. onDraw (canvas) ;}@ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec);} public void insertIcon (int id) {// continuous string of SpannableString. The length is immutable and some objects can be appended. If it is variable, SpannableStringBuilder is used, refer to the sdk documentation SpannableString ss = new SpannableString (getText (). toString () + "[smile]"); // obtain the resource Drawable d = getResources () for the image to be displayed (). getDrawable (id); // set the height d. setBounds (0, 0, d. getIntrinsicWidth (), d. getIntrinsicHeight (); // The bottom of the span should align with the baseline of the surrounding text. ImageSpan span = new ImageSpan (d, ImageSpan. ALIGN_BASELINE); // append the image ss. setSpan (span, getText (). length (), getText (). length () + "[smile]". length (), Spannable. SPAN_INCLUSIVE_EXCLUSIVE); setText (ss );}}

Usage Analysis: 1. Use in xml Code

<Com. demo. customview. clearedittext. widgets. smiliesEditText android: id = "@ + id/example" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: layout_below = "@ + id/activity_main_clear_edittext" android: singleLine = "true" android: text = "Hello smile" android: hint = "you can enter an expression." android: textSize = "14sp" android: layout_marginTop = "20dp"/>

2. Use in Java code

SmiliesEditText et=(SmiliesEditText)findViewById(;        et.insertIcon(;        System.out.println(et.getText().toString());

Source code download:


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.