Exercise 1: First Android App

Transcription

1 Exercise 1: First Android App Start a New Android Studio App Open Android Studio. Click on Start a new Android Studio project. For Application name enter First App. Keep other fields as default and click Next. On the next screen, click on the Phone and Tablet drop down menu, and select API 23: Android 6.0 (Marshmallow). Click Next. Keep the default Empty Activity and click Next. Keep the defaults and click Next. 1

2 Real Devices Quick Start If you have an Android smartphone, you can quickly test this blank sample app on your phone as long as it is a version higher than 6.0. You can check your Android version in Settings About Phone or Settings System About Phone (if Android 8.0 or higher). If you have Android 6.0 or higher, you can enable apps to run on your real device by going to Settings About Phone or Settings System About Phone (if Android 8.0 or higher) and tapping Build number 7 times. This will enable the Developer options menu. Now that you have activated the Developer options menu, go to Settings Developer options or Settings System Developer options (if Android 8.0 or higher), and find USB debugging. Enable USB debugging, and you should be able to run apps on your real device. 2

3 Connect your Android smartphone to your laptop through your USB cable. Now run your app. You should see a choice between running the app on your real device, or running it on the virtual device you created. Choose your real device. If your get the option for Instant Run, choose Proceed without Instant Run. 3

4 Since this keeps popping up whenever you want to run an app, you can disable this in Android Studio Preferences. Under Build, Execution, Deployment, Select Instant Run, uncheck Enable Instant Run, and click OK. You should see the Hello World! on your smartphone. It is preferable to keep running your apps on the smartphone vs. on virtual devices. 4

5 Changing the Android App Appearance The appearance of the Android App can be manipulated in the app/res/layout/activity main.xml file. Open this file (double click) to see a similar screen as below. Select a Button in the Common view box. Hold the button and drag it into the window as shown. 5

6 During our exercises, when adding a new View, while highlighted, we should click on the Infer Constraints so that the views are positioned on the screen as intended. Without the Infer Constraints, all views added will appear on the upper left corner. You can add different kinds of widgets in this manner. Drag a switch to the window. While highlighted, click on the Infer Constraints. If done correctly you will see arrows positioning the views as indicated by the green circles. 6

7 Click the run app button, and select your device to run. You should see that the application was updated with your changes to the appearance. Click the button and switch on the screen to see the animations. 7

8 Back in Android Studio, view the main activity.xml as text. You can see the appearance visually or in text by clicking Design or Text. While viewing main activity.xml as text, find the property of the Textview that displays Hello World!, and change it so that it says EGG 101. Run the app after to confirm the change you made. 8

9 Back in Android Studio, view the main activity.xml as Design. You can manipulate some views with user interface. For example, highlight the TextView and change the textsize. Other settings, such as the textcolor can also be changed. Run the app again to see that the size of the TextView was changed. 9

10 Small Summary: Appearance of a window is in an XML file in app/res/layout/ (main activity.xml in our example) Can be viewed in Design or Text Easily drag and drop common views (e.g. button, textview) Use Infer Constraints to line up views in window Can be manipulated in Text (code) or in Design (user interface) 10

11 Adding Some Logic Now we will add some logic, so that button presses will do something. Logic is added in the app/java/- com.example.{{your username.first app/mainactivity.java file. You can have a reference of the code we will add by clicking on First add some lines of code to Android Studio. The following lines will give us a Button, TextView, and boolean variables that we can manipulate. public class MainActivity extends AppCompatActivity { // ////////////// Copy t h i s Button my button ; // v a r i a b l e f o r a button TextView my textview ; // v a r i a b l e f o r a t e x t view boolean o n o r o f f = f a l s e ; // ////////////// Copy t h i protected void oncreate ( Bundle s a v e d I n s t a n c e S t a t e ) { super. oncreate ( s a v e d I n s t a n c e S t a t e ) ; setcontentview (R. layout. a c t i v i t y m a i n ) ; When you copy and paste code, you may see some words in red. To fix that, if you click on the word, you may see the prompt like below. Hit the alt and return key at the same time to get rid of the error. You can also just highlight and retype the word in red to get rid of the error. 11

12 Go to your main activity.xml file. Highlight the button, and for the ID attribute in the upper right, put button if it is not already there. Highlight the text view, and put textview in the ID attribute if it is not already there. 12

13 Now, we will connect our variables to the views in the main activity.xml file. Add the following lines inside the oncreate function (in protected void oncreate ( Bundle s a v e d I n s t a n c e S t a t e ) { super. oncreate ( s a v e d I n s t a n c e S t a t e ) ; setcontentview (R. l a y o u t. a c t i v i t y m a i n ) ; // ////////////// Copy t h i s my button = ( Button ) findviewbyid (R. id. button ) ; // g e t i d from appearance my textview = ( TextView ) findviewbyid (R. id. textview ) ; // g e t i d from appearance // ////////////// Copy t h i s When the button is clicked, we will add some logic so that if the variable on or off is on, the text color will turn to white, and background color will turn to black. When on or off is off the text color will turn to black, and background color will turn to protected void oncreate ( Bundle s a v e d I n s t a n c e S t a t e ) { super. oncreate ( s a v e d I n s t a n c e S t a t e ) ; setcontentview (R. l a y o u t. a c t i v i t y m a i n ) ; my button = ( Button ) findviewbyid (R. id. button ) ; // g e t i d from appearance my textview = ( TextView ) findviewbyid (R. id. textview ) ; // g e t i d from appearance // ////////////// Copy t h i s my button. s e t O n C l i c k L i s t e n e r (new View. O n C l i c k L i s t e n e r ( ) public void o n C l i c k ( View view ) { //when t h e button i s c l i c k e d i f ( o n o r o f f ){ // i f on my textview. settextcolor ( Color.WHITE) ; // s e t t e x t color to white my textview. setbackgroundcolor ( Color.BLACK) ; // s e t background color to b l a c k o n o r o f f=f a l s e ; //now o f f e l s e { // i f o f f my textview. s e t T e x t C o l o r ( Color.BLACK) ; // s e t t e x t c o l o r to b l a c k my textview. setbackgroundcolor ( Color.WHITE) ; // s e t background color to white o n o r o f f=true ; //now on ) ; // ////////////// Copy t h i s The complete app should look similar as below. You can copy and paste (except the first line. The first line is different for everyone s computer) the example from exercise1_button.txt. 13

14 Run the app. You should see that by clicking the button, you can change the colors of the text view. 14

15 Small Summary: Code, where the action happens, is in the MainActivity.java file. You connect variables in code to views from the main activity.xml file (appearance). All kinds of logic can be implemented in code. Apps process some inputs (like touching the screen), make decisions (based on your code), actuate outputs (change the color of the textview). 15

16 Using Some Sensors Android phones have many sensors that can be tapped into and used in apps. We will add a textview, take readings from an Android smartphone s ambient light sensor, and display the readings on the new textview. 1. Open the main activity.xml file 2. Delete your Switch if you still have it. 3. Drag and drop a new TextView into the window, and click Infer Constraints 4. In the ID attribute, put light textview, and increase the text size. To use the Android OS sensors, we will use the SensorManager, Sensor, SensorEvent, and SensorEventListener. We will access the sensor framework by using the SensorManager, and get the specific ambient light sensor with Sensor. We will make our Main Activity react to when there are new readings from the ambient light sensor by making it a SensorEventListener. Finally, when new readings come, we will obtain the data from SensorEvent and display it on the textview we added. Your MainActivity should look like below. You can copy and paste (except the first line. The first line is different for everyone s computer) the example from exercise1_sensor.txt. 16

17 import android. app. S e r v i c e ; import android. g r a p h i c s. Color ; import android. hardware. Sensor ; import android. hardware. SensorEvent ; import android. hardware. S e n s o r E v e n t L i s t e n e r ; import android. hardware. SensorManager ; import android. support. v7. app. AppCompatActivity ; import android. os. Bundle ; import android. view. View ; import android. widget. Button ; import android. widget. TextView ; public c l a s s MainActivity extends AppCompatActivity implements S e n s o r E v e n t L i s t e n e r { Button my button ; // v a r i a b l e f o r a button TextView my textview ; // v a r i a b l e f o r a t e x t view boolean o n o r o f f = f a l s e ; // ////////////// New TextView l i g h t t e x t V i e w ; //new t e x t v i e w f o r d i s p l a y i n g sensor data SensorManager my Sensor Manager ; // f o r accessing Android sensors Sensor my Sensor ; // f o r s p e c i f i c sensor chosen // ////////////// protected void oncreate ( Bundle s a v e d I n s t a n c e S t a t e ) { super. oncreate ( s a v e d I n s t a n c e S t a t e ) ; setcontentview (R. l a y o u t. a c t i v i t y m a i n ) ; my button = ( Button ) findviewbyid (R. id. button ) ; // g e t i d from appearance my textview = ( TextView ) findviewbyid (R. id. textview ) ; // g e t i d from appearance // ////////////// New l i g h t t e x t V i e w = ( TextView ) findviewbyid (R. i d. l i g h t t e x t V i e w ) ; // g e t i d from appearance my Sensor Manager = ( SensorManager ) getsystemservice ( S e r v i c e. SENSOR SERVICE ) ; // connect with Android OS sensor manager my Sensor = my Sensor Manager. g e t D e f a u l t S e n s o r ( Sensor. TYPE LIGHT ) ; // s e l e c t l i g h t sensor // ////////////// New my button. s e t O n C l i c k L i s t e n e r (new View. O n C l i c k L i s t e n e r ( ) public void o n C l i c k ( View view ) { //when t h e button i s c l i c k e d i f ( o n o r o f f ){ // i f on my textview. settextcolor ( Color.WHITE) ; // s e t t e x t color to white my textview. setbackgroundcolor ( Color.BLACK) ; // s e t background color to b l a c k o n o r o f f=f a l s e ; //now o f f e l s e { // i f o f f my textview. s e t T e x t C o l o r ( Color.BLACK) ; // s e t t e x t c o l o r to b l a c k my textview. setbackgroundcolor ( Color.WHITE) ; // s e t background color to white o n o r o f f=true ; //now on ) ; // ////////////// protected void onpause ( ) { super. onpause ( ) ; my Sensor Manager. u n r e g i s t e r L i s t e n e r ( t h i s ) protected void onresume ( ) { super. onresume ( ) ; my Sensor Manager. r e g i s t e r L i s t e n e r ( this, my Sensor, SensorManager.SENSOR DELAY NORMAL) public void onsensorchanged ( SensorEvent event ) { i f ( event. s e n s o r. gettype ( ) == Sensor. TYPE LIGHT){ l i g h t t e x t V i e w. s e ttext ( Value : + event. v a l u e s [ 0 ] ) ; // s e t t h e t e x t view to v a l u e t h a t came from 17

18 public void onaccuracychanged ( Sensor s e n s o r, int a c c u racy ) { // ////////////// New Run your app. It should display the light intensity reading on the new text view. If you have a physical device, change the ambient light your phone senses by moving your hand closer to the top of your screen where the sensor is. If you have a virtual device, you can go to..., Virtual Sensors, Additional Sensors, and slide the light intensity bar to imitate the change in light intensity. 18

19 It is very easy to change the type of sensor that is being read. For example, a proximity sensor is used to detect when a person is holding their phone to their ear. Change the line where Sensor is chosen from TYPE LIGHT to TYPE PROXIMITY. Also replace the inside of the onsensor Changed method with the following: You can copy and paste (except the first line. The first line is different for everyone s computer) this example from faculty.unlv.edu//egg101/exercise1_proximity.txt. i f ( event. s e n s o r. gettype ( ) == Sensor.TYPE PROXIMITY){ i f ( event. v a l u e s [0]==0){ l i g h t t e x t V i e w. s e ttext ( Nearby : Yes ) ; e l s e { l i g h t t e x t V i e w. s e ttext ( Nearby : No ) ; Run your app. It should display Yes or No depending on if an object is nearby. If you have a physical device, move your hand closer to the top of your screen where the sensor is to see the changes. If you have a virtual device, you can go to..., Virtual Sensors, Additional Sensors, and slide the proximity bar to 0 to imitate an object close by. 19

20 Small Summary: Smartphone sensors can be easily used and read in Android OS. There are many type of sensors that can be used (we used the ambient light sensor, and proximity sensor). Our activity listens to changes in the sensor readings and acts when new data is available. In our app, we simply display the new value of the reading. 20