Input box for Android development EditText

Now let's briefly introduce the technical points:
1. How to use fillet input box and button background
2. How to realize the vertical line behind "mobile number" and "password"
3. How to nest the layout of input boxes
4. How to listen to the input events of the input box and the dynamic display and hide of the delete button
1. How to use fillet input box and button background
Android has prepared the xml tag shape for developers to customize some shapes.
So I'll define a white input box background. The code is as follows:

<!-- shape --> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" > 
<solid android:color="#ffffff" /> 
<!-- frame --> 
<stroke 
android:width="1dip" 
android:color="#ffffff" /> 
<!-- Infill color --> 
<padding 
android:bottom="10dp" 
android:left="10dp" 
android:right="10dp" 
android:top="10dp" /> 
<!-- fillet --> 
<corners android:radius="6dp" /> 
</shape>

Set it to the background of any View
android:background="@drawable/shape_wihte_frame"
2. How to realize the vertical line behind "mobile number" and "password"
It's actually very simple. Just write a vertical line with a width of 1dp or 1px (or whatever you think is more appropriate).

<View 
android:id="@+id/view1" 
android:layout_width="1dip" 
android:layout_height="fill_parent"
android:layout_centerVertical="true"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_toRightOf="@+id/textView1" 
android:background="#EEEFFF" />

3. How to nest the layout of input boxes
Android provides us with a variety of layouts, but you can't design a good interface with any of them. Must nest, many novices dare not to nest, we must be bold to nest to use a variety of layouts, will certainly combine the cool effect. The layout here is very simple, just a layer of nesting (the whole page layout nesting the layout of the input box).

<RelativeLayout 
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" 
android:background="@drawable/shape_wihte_frame"> 
<TextView 
android:id="@+id/textView1" 
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" 
android:lines="1" 
android:padding="1dp" 
android:text="cell-phone number" 
android:textSize="11sp" /> 
<View 
android:id="@+id/view1" 
android:layout_width="1dip" 
android:layout_height="fill_parent"
android:layout_centerVertical="true"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_toRightOf="@+id/textView1"
android:background="#EEEFFF" />
<EditText 
android:id="@+id/phonenumber"
android:layout_width="wrap_content"
android:layout_height="40dp" 
android:layout_centerVertical="true"
android:layout_marginLeft="2dp"
android:layout_toRightOf="@+id/view1" 
android:background="@drawable/transparent"
android:ems="19" 
android:hint="Please enter your mobile number" 
android:inputType="phone" 
android:padding="1dp" 
android:textSize="12sp" > 
<requestFocus /> 
</EditText> 
<ImageView 
android:id="@+id/del_phonenumber"
android:layout_width="20dp" 
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="3dp" 
android:src="@drawable/text_del" 
android:visibility="invisible" /> 
</RelativeLayout>

4. How to listen to the input events of the input box and the dynamic display and hide of the delete button
The idea is very simple. It is to listen to the input event of EditText. After that, if the input length is greater than 0, the delete button will be displayed. If = 0, the delete button will be hidden. Click the delete button to clear the input box. Here I write a tool class for you to call. High cohesion and low coupling are our common pursuit.

public class EditTextClearTools { 
public static void addclerListener(final EditText e1, final ImageView m1) { 
e1.addTextChangedListener(new TextWatcher() { 
@Override 
public void onTextChanged(CharSequence s, int start, int before, int count) { 
// TODO Auto-generated method stub 
} 
@Override 
public void beforeTextChanged(CharSequence s, int start, int count, int after) { 
// TODO 
} 
@Override 
public void afterTextChanged(Editable s) { 
// TODO Auto-generated method stub 
// Monitor if the input string length is greater than 0, the clear button will be displayed. 
String s1 = s + ""; 
if (s.length() > 0) { 
m1.setVisibility(View.VISIBLE);
 } else { 
m1.setVisibility(View.INVISIBLE); 
} 
} 
}); 
m1.setOnClickListener(new OnClickListener() { 
@Override 
public void onClick(View v) {
 	// TODO Auto-generated method stub 
// Clear input box 
e1.setText(""); 
} 
}); 
} 
}

Main program code

public class MainActivity extends Activity { 
EditText e1, e2; 
ImageView m1, m2; 
@Override 
protected void onCreate(Bundle savedInstanceState) {
 	super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
 	setContentView(R.layout.activity_user_login); 
init(); 
} 
private void init() { 
// TODO Auto-generated method stub 
e1 = (EditText) findViewById(R.id.phonenumber); 
e2 = (EditText) findViewById(R.id.password);
m1 = (ImageView) findViewById(R.id.del_phonenumber);
findViewById(R.id.del_phonenumber); 
m2 = (ImageView) findViewById(R.id.del_password);
// Add clear monitor atmosphere 
EditTextClearTools.addclerListener(e1, m1);
EditTextClearTools.addclerListener(e2, m2);
 } 
}

Tags: Android Mobile xml

Posted on Wed, 17 Jun 2020 22:12:59 -0400 by robinjohn