To Documents

A Simple Android App

• This document gives directions for building an Android App that displays text in a TextView control. When a button is clicked, the displayed text is changed to uppercase.
  
  1. Open Android Studio.
  2. Create a new application named ToUpperCase.
     Click the link Start a new Android Studio Project.
     In the Create New Project Dialog, enter the Application Name as ToUpperCase >>
     enter the Company Domain as sjost.it313.depaul.edu >> Click Next >>
     Check the checkbox Phone and Tablet and select the Minimum SDK API 15 >> Click Next >>
     Select Empty Activity >> Click Next.
     The Activity Name shows as Main Activity; the Layout name shows as activity_main; Click Finish.
  3. Configure Main Activity.
     Select the file activity_main.xml >> Design Tab >>
     Click on TextView that contains Hello World! >>
     In Properties Window, set ID to txtDisplay >>
     Change text to "Text to Display" >>
     Drag a button from the Pallette to the Main Activity >>
     Set the ID of the button to btnToUpper >>
     Change the text of the button to "To Uppercase" >>
     Click on the Main Activity Design to see the changes.
  4. View XML source code for Main Activity layout:
     Select Text Tab. Here is the XML source code:
     

     <?xml version="1.0" encoding="utf-8"?>
     <android.support.constraint.ConstraintLayout
         xmlns:android=
             "http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         xmlns:tools="http://schemas.android.com/tools"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
             tools:context=
            "com.it313.sjost.toupper.MainActivity">
     
     <TextView
         android:id="@+id/txtDisplay"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Text to Display"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
     
     <Button
         android:id="@+id/btnToUpper"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginBottom="161dp"
         android:layout_marginEnd="148dp"
         android:layout_marginStart="148dp"
         android:layout_marginTop="37dp"
         android:onClick="toUpper"
         android:text="To Uppercase"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/txtDisplay"
         app:layout_constraintVertical_bias="1.0" />
     
     
     </android.support.constraint.ConstraintLayout>
     

  5. View Java source code for Activity.
     Select file MainActivity.java. Here is the source code:
     

     package com.it313.sjost.toupper;
     import android.support.v7.app.AppCompatActivity;
     import android.os.Bundle;
     
     public class MainActivity extends AppCompatActivity {
     
         @Override
         protected void onCreate(Bundle savedInstanceState) {
             super.onCreate(savedInstanceState);
             setContentView(R.layout.activity_main);
         }
     }
     

  6. Run the app.
     Click the green triangle Run 'app' (Shift + F10) Button.
     Select the Galaxy Nexus API 25 Android Emulator on which to run the app.
  7. Add an event handler for the button.
     View the file activity_main.xml >> Design Tab >>
     Properties Window for the button >>
     Click the button to bring up the Properties Window >>
     Set the onClick property of the button to toUpper.
      
     Modify the source code for MainActivity.java to add the event handler:
     

     package com.it313.sjost.toupper;
     import android.support.v7.app.AppCompatActivity;
     import android.os.Bundle;
     import android.view.View;
     import android.widget.TextView;
     
     public class MainActivity extends AppCompatActivity {
     
         @Override
         protected void onCreate(Bundle savedInstanceState) {
             super.onCreate(savedInstanceState);
             setContentView(R.layout.activity_main);
         }
     
         public void toUpper(View view) {
             TextView display = 
                 (TextView) findViewById(R.id.txtDisplay);
             String s = display.getText( ).toString( );
             s = s.toUpperCase( );
             display.setText(s);
         }
     }
     

  8. Run the app.
     Click the green triangle Run 'app' (Shift + F10) Button.
     Select the Galaxy Nexus API 25 Android Emulator on which to run the app.
  9. Test the app.
     Click the To Uppercase button. The text in the TextView should change to uppercase.