An outrageously simple note taking android app made even better (part 3)

As promised we will improve further the NoteTaking app in this tutorial.

We will change the look of the app to have EditText instead of TextView to display notes on main screen. Also clicking on note will open the note for editing and save it as a new note.

Here is the main.xml

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

Notice that it’s just a plain layout file I have seperated the add button in addnotebutton.xml.

<?xml version="1.0" encoding="utf-8"?>

<Button  xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/AddNote"
        android:id="@+id/addnote"
        android:onClick="addNote"/>

This will make it easy to dynamically create the view to show all notes. There would be more effiecient ways to do this but for sake of simplicity I will recreate the view each time.

Below is the textvies.xml

<?xml version="1.0" encoding="utf-8"?>

<EditText xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/textview1"
          android:onClick="onClickTextView1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"/>

Notice that the file has a new onClick line which is defining the function onClickTextView1 method to be executed each time a user clicks on any note.

Update1:

It seems that TextView can be made clickable as well using

android:clickable="true"

Here is changed textviews.xml

<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/textview1"
          android:onClick="onClickTextView1"
          android:clickable="true"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"/>

For loop in MyActivity.java will be like this.

for ( Notes nt: notes) {

            TextView b = (TextView) inflater.inflate(R.layout.textviews,null);
            b.setText(nt.getNote());
            lLayout.addView(b);
        }

Thanks to stackoverflow(http://stackoverflow.com/questions/3328757/how-to-click-or-tap-on-a-textview-text)

End Update2:

Now here is MyActivity.java

public class MyActivity extends Activity {
    public final static String EXTRA_MESSAGE = "com.example.NoteTaking.MESSAGE";
    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
    public void addNote ( View theButton) {
        Intent intent = new Intent(this, EditNoteActivity.class);
        intent.putExtra("ACTION","addnote");
        startActivity(intent);
    }
    public void onClickTextView1 ( View textview) {
        Intent intent = new Intent(this, EditNoteActivity.class);
        intent.putExtra("ACTION","oldnote");
        intent.putExtra(EXTRA_MESSAGE,((TextView)textview).getText().toString());
        startActivity(intent);
    }
    public void onResume () {
        super.onResume();
        setContentView(R.layout.main);

        LinearLayout lLayout = (LinearLayout)findViewById(R.id.layout1);
        final LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        Button add = (Button) inflater.inflate(R.layout.addnotebutton, null);
        lLayout.addView(add);
        NotesDatabase db =new NotesDatabase(this);

        List<Notes> notes = db.getAllNotes();
         for ( Notes nt: notes) {
             EditText b = (EditText) inflater.inflate(R.layout.textviews,null);
            b.setKeyListener(null);
            b.setText(nt.getNote());
            lLayout.addView(b);
        }
    }
}

We have moved most of the functionality into onResume as this will be called when the Activity starts as well as each time Activity resumes. It’s mostly like old code except that it adds the button also dynamically through inflator. Also we are setting the setKeyListner to null as we don’t want it to be editable.

In onClickTextView1 we are creating a new intent and passing it along with key value pair of “ACTION” and “oldnote” to specify that a old note needs to be set in. We are also passing the note with EXTRA_MESSAGE. Similarly in addNote we are passing the “ACTION” AS “addnote”.

Now following is EditNoteActivity.java

public class EditNoteActivity extends Activity {
    public final static String EXTRA_MESSAGE = "com.example.NoteTaking.MESSAGE";
    String action;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.editnote);
        Intent intent = getIntent();
        EditText text = (EditText) findViewById(R.id.editText1);

        Bundle extras = intent.getExtras();
        if ( extras.getString("ACTION").equals("oldnote")) {
            action = "oldnote";
            text.setText(extras.getString(EXTRA_MESSAGE));
        }
    }

    public void onClickSave(View theButton) {
        EditText text = (EditText) findViewById(R.id.editText1);
        NotesDatabase db =new NotesDatabase(this);

        db.addNote(new Notes(text.getText().toString()));
        finish();
    }
    public void onClickBack(View theButton) {
        finish();
    }
}

Here we getting the intent in onCreate which we passed from Myactivity.java in addNote or onClickTextView1 methods, by getIntent method. intent.getExtras returns the key value pairs we put inside the intent. Only if the “oldnote” is passed we retreive the note using EXTRA_MESSAGE  identifier string.  Rest is similar to what we did earlier.

Now run the app and we you will something similar.

No doubt there is still a lot of room for improvement, and we shall keep doing that.

Thanks for reading, thanks to all those who helped specially Lars Vogel (http://www.vogella.com/articles/AndroidIntent/article.html).

Update2:

These updates could have been a new post , but anyways.

You could set the style of TextView from update1 as described below in textviews.xml and back.xml.

textviews.xml

<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/textview1"
          android:background="@layout/back"
          android:onClick="onClickTextView1"
          android:clickable="true"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"/>

Here android:background=”@layout/back” specify the style as defined in back.xml.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <solid android:color="#ffffff" />
    <stroke android:width="1dip" android:color="#4fa5d5"/>
    <padding
            android:left="7dp"
            android:top="7dp"
            android:right="7dp"
            android:bottom="7dp" />
</shape>

Also in for loop in oNResume of MyActivity set font color to black.

b.setTextColor(Color.BLACK) ;

Here is the final app till now.

Once again thanks to stackoverflow (http://stackoverflow.com/questions/3496269/how-to-put-a-border-around-an-android-textview)

End Update2