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);
    }

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);

Rich’s Take on Android Development

In early 2012 I had the opportunity to explore Android development as related to industrial controls for Automation Solutions.  I immediately found the android developers website at google, but the dizzying array of options and terminology left my head spinning.  I wanted to get the information I needed fast without getting bogged down.  There are a couple ways to get across the techno-chasm, build a bridge using the tools at hand or go to school.  Because I am a techno explorere, I took the former.    This blog helps me unwind the material I’ve collected and, with luck, will be a benefit to future explorers.

Why is it so hard?  Cracking into Android world is no harder than any other.  It is largely a matter of getting into the “Android developer’s” head.    When I did development on the Palm Pilot, lo those many years ago, I faced the same learning challenge.  Same with Flash, and Java.  Learn their terminology.  Learn the framework.  Create a few experimental applications that get you into the tech, but not so much you lose your way and fail.  The key here is to take a bunch of baby steps so you never need a great leap into a techno black hole.

When I did development on the Palm Pilot, lo those many years ago, I faced the same learning challenge.  Same with Flash, and Java.

What about the literature?  Since I am a late-comer to the Android environment, there many books out there.  I took all the useful books I could find from the main branch of the Portland public library.

  • Android development for dummies
  • Developers guide to Android Development

 

What they do:   Install developer tools,  Create and run  a “hello world” app that shows how the simulator and IDE work together.  Next they talk about UI basics.  How to put stuff on a screen or Start talking about UI basics, yadda yadda yadda.

What I am going to do.  Not much different.  The projects should be multifaceted meaning they will implement a series of experimental applications.  Only the first is a throw-away. All others should be heading toward what a commercial application would need in terms of functionality and look-and-feel.

Uncover Android’s UI elements without getting overwhelmed.  Get in the habit of writing programs the Android way.   For example, use Strings.xml so translation from one language to another becomes nothing more than a linguistic exercise.  I will use XML based screen layouts, themes  and inline subclasses for button responses.

Project 1:  Hello World Application

  • Hello World
  • Add “About” screen
  • Add “preferences” screen (save the theme)
  • Add context menu

Project 2:  Save Data Locally

Project 3:  Background Services

Project 4:  getting data from external sources

Project 5:  game-time – super labrynth

Project 6:  Dear Abbey, jumble daily crossword puzzle app.