Dabbling in Android: Editing, Saving, Loading and Deleting Text (Part I: Layout)

For the purposes of this tutorial, which will be posted in several parts, you'll need to download Android Studio and install at the very least API 19 using the Android SDK manager.

Create a new app project

Inside Android Studio:

1. File->New Project...
2. give it a name
3. set to a Minimum SDK of API 14 or above (ignore Wear)
4. select Blank Activity
5. press Finish

Buttons, Buttons, Buttons

Assuming you didn't change the default names for the main files in your app you should have a layout file called activity_my.xml (src->main->res->layout->activity_my.xml). And by default Android Studio opens this file for you first of all.

If this is the case make sure first of all that the the API version displayed at the top of the layout window is API 19 or below, then click on the "Design" tab (at the bottom of the window) and drag out three buttons from the palette menu onto your layout, placing them at the top of the screen. (Note: First you'll need to drag aside the "Hello World!" text view that was automatically created for you. Don't delete it!)

Rather than labelling the buttons directly, Android likes us to use the strings.xml file. So here's how we do that:

1. open strings.xml file (src->main->res->values->string.xml)
2. add the follow lines inside the resources tag:

<string name="buttonS">Save</string>
<string name="buttonR">Reload</string>
<string name="buttonD">Delete</string>

3. return to the layout file (activity_my.xml) and click on the "Text" tab so that you see the underlying XML
4. update the android:text attribute of the first button so that it reads "@string/buttonS", the second button so that it reads "@string/buttonR", and the third so it reads "@string/buttonD" 

You will see the preview version of the app screen update immediately with the labels.

Note: it is possible to double click a button in the Design view and then create a string resource and link using the ellipses button method described in this post (on developer.com) but it is good to be able to navigate to the strings file and know in general how to fix things if they go wrong using the plain XML versions of the Android Studio files.

Space is important

In the design view of the layout file, drag out some space to place below the buttons. (This can be found in the "expert" section of the palette.) And stretch it across the width of the screen but don't make it too high.

Text input (EditText)

Still with the layout file:

1. drag the text box to the bottom of the design layout. Make it the full width of the screen and drag the top of the box up to meet with the bottom of the space you created.
2. click the "Text" tab to see the XML once again. Change the tagname of the "TextView" to "EditText".
3. go back to the "Design" view and from the Properties list expand "gravity" and check "top". 
4. also delete the "hello world!" text
5. finally, you'll also see a warning that Android wants you to hint at an input type in the "Component Tree" view. Click the warning and select "text" as the input type.

Note: The nice thing about the EditText view is that it scrolls by default and doesn't let the keyboard obscure the input, so there's nothing extra to do here.

Code

Your layout file XML should now look something like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MyActivity">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/space"
        android:layout_alignRight="@+id/button3"
        android:layout_alignEnd="@+id/button3"
        android:layout_alignParentBottom="true"
        android:layout_below="@+id/space"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:gravity="top"
        android:inputType="text"
        android:id="@+id/textView" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/buttonS"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/buttonR"
        android:id="@+id/button2"
        android:layout_above="@+id/space"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/buttonD"
        android:id="@+id/button3"
        android:layout_alignTop="@+id/button2"
        android:layout_alignRight="@+id/space"
        android:layout_alignEnd="@+id/space"
        android:layout_gravity="right" />

    <Space
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_below="@+id/button"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/space"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

and your strings.xml file should look like this:

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

    <string name="app_name">My Application</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="buttonS">Save</string>
    <string name="buttonR">Reload</string>
    <string name="buttonD">Delete</string>

</resources>

and the Design version should look something like the image at the top of this post.

Note: although the layout automatically sets the width and height of the "Space" in pixels, the compiler warns that this is an unwise measurement. I've therefore changed the width to "match_parent" and the height to a dp (density independent) measurement for the Space (see Edwin Evans for more information about this).

Next time

Next time I'll discuss making the buttons do things that are now written on them to Save, Reload and Delete text files. And how to get the input from the text view (EditText) into the saved file.

Follow @sketchytech