Category Archives: UI Tidbits

Recipes for a better user experience.

by

Text Input Dialog with Validation

What I want:

  • Displays like normal input field, act like a button.
  • When user taps, a dialog pops up
  • User can only leave when when valid data is entered or cancel button is pressed

Accomplished

  1. create the activity XML including the input field in question
  2. create another layout file including an edit box, ok and cancel buttons
  3. edit the activity code to lockout edits and fire the pop_dialog when touched
  4. in the same activity code, create a pop_dialog

1 – build an activity main.xml with an input field with id=strText
Note the hack that keeps the field from getting the cursor | when the screen opens. Also the first LinearLayout’s android:orientation=”vertical” to keep the screen in one nice looking direction.

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
         android:orientation="vertical"        
        >
 <!-- hack so autofocus goes here and later edittext elements dont have cursor flash -->
<LinearLayout
    android:focusable="true" android:focusableInTouchMode="true"
    android:layout_width="0px" android:layout_height="0px"/>
<!--  end hack -->

            <LinearLayout
                android:id="@+id/linearLayout3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <EditText
                    android:id="@+id/strText"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content" >
                </EditText>

            </LinearLayout>

    </LinearLayout>

2  – build a dialog activity screen with an input field and ok/cancel buttons

Right click  layout/new/android/xml file.  Resource type: layout, file: dialog_text.xml

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
         android:orientation="vertical" 
        >
        <EditText
            android:id="@+id/strEditText"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:inputType="textShortMessage">

            <requestFocus />
        </EditText>
        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/btnOk"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="OK" android:layout_weight="1"/>

            <Button
                android:id="@+id/btnCancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Cancel" android:layout_weight="1"/>

        </LinearLayout>
    </LinearLayout>

edit the activity code to lockout edits and fire the pop_dialog when touched

public class SpinnerActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        /* turn our input box into a display-only button that fires the dialog popup */
        EditText t1=(EditText)findViewById(R.id.strText);
        t1.setOnTouchListener(new OnTouchListener()
        {
			public boolean onTouch(View arg0, MotionEvent arg1) {
				// TODO Auto-generated method stub
				 if (arg1.getAction() == MotionEvent.ACTION_DOWN) {
					 editText_dialog(R.id.strText);
		         }
				return false;
			}
        });
    }
}

in the same activity code, create a pop_dialog

    public void editText(final int id){
    	final Dialog dialog = new Dialog(this);
        dialog.setContentView(R.layout.dialog_text);
        dialog.setTitle("You got that right:");
        dialog.setCancelable(false);
        final EditText strEditText=(EditText)dialog.findViewById(R.id.strEditText);
        Button xbutton = (Button) dialog.findViewById(R.id.btnOk);
        xbutton.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {
        		EditText sText=strEditText;
        		String x=sText.getText().toString();
        		// validation 
                if(x.equals("")){ 
                	/* bad - hilight in red */ 
                  //showToast
                	sText.setBackgroundColor(Color.argb(220, 0xff, 0xa0, 0xa0));
                	sText.requestFocus();
                }else{
                   /* good - copy the field back to the display and close dialog */
                  TextView target=(TextView)findViewById(id);
                  target.setText(x);
                  dialog.dismiss();
                  //other stuff to do
                }        	
            }
        }); 
        Button xbutton2 = (Button) dialog.findViewById(R.id.btnCancel);
        xbutton2.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {
                  dialog.dismiss();
            }
        }); 
        WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
        lp.copyFrom(dialog.getWindow().getAttributes());
        lp.width = WindowManager.LayoutParams.FILL_PARENT;
        dialog.show();
        dialog.getWindow().setAttributes(lp);
    }
by

View in portrait mode

In layout – not so useful

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
         android:orientation="vertical"        
        >

In the manifest – very good

<activity 
    android:name=".MyActivity" 
    android:screenOrientation="portrait"
    android:configChanges="orientation|keyboardHidden|keyboard"/>

In Code

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

Special bonus – full screen

        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
                                WindowManager.LayoutParams.FLAG_FULLSCREEN);