Android Development Tutorial for beginners

Views:
 
Category: Education
     
 

Presentation Description

This presentation contains the "android application development" i.e. started from scratch.Any beginner who have basic knowledge of programming, wants to learn android application development can prefer this tutorial and can develop his own apps.

Comments

Presentation Transcript

Slide1:

Android Basics By VIVEK GAUR MUKUL VARSHNEY Department of Computer Science Aligarh Muslim University

Slide2:

Contents Creating a new project Buttons Text View Image View Edit Text Theme Compiling & Running the project Starting the emulator How to make phone as an emulator Java Activity, XML file and Android Manifest Drawable folder & Resource Folder(res) Linear Layout(Vertical & Horizontal) Scroll View “findViewById” method and “onClickListener” Moving to new java activity( Multiactivity ) Sample Hand-on Work Exercise

Slide3:

(a) Creating a new project Click “Start a new android studio project” Or Go to “File” and click “New” then “New Project”

Slide4:

1.Enter the “Application Name”. Let it be “My Application”. 2.Click “Next”

Slide5:

1.Select “Phone and Tablets”(May be automatically selected). 2.Click “Next”

Slide6:

1.Now there are various type of activities that one can choose. For sake of simplicity, choose “Empty Activity”. 2.Click “Next”

Slide7:

Enter the home a ctivity name. Let it be “ MainActivity ” and click “Finish”. Now, your project creation is successful. Wait till building of project finishes.

Slide8:

Output: 1.MainActivity.java 2.activity_main.xml

Slide9:

This is “activity_main.xml” (Text)

Slide10:

This is “activity_main.xml” (Design)

Slide11:

PROJECT STRUCTURE: It defines the basic file system which is used in the Android project . It locates .java files, .xml files, and o ther files that a user uses/creates/copies in the Project. ACT IVITY LAYOUT : Layout is the fixed reason which is displayed as the UI. We do all interface related work in the layout or the XML f ile and it is reflected in the layout as we go on modifying XML file contents.

Slide12:

PALETTE (TOOLBAR) : It contains xml code of various elementary tools like Button, Radio Button, Switch, Text View, Edit Text, etc. These elementary tools can be dragged and dropped into the layout of the activity in design mode. In text mode on e can see the actual xml code corresponding tool. For example for Button, <Button android:text =“CALCULATE SUM BUTTON” android:width =“ match_parent ” android:height =“50dp” android:onClick =“ calculateSumFunction ”/> CALCULATE SUM BUTTON

Slide13:

(b) Buttons Three commonly used buttons in android: a. RADIO BUTTON b. SWITCH c. SIMPLE BUTTON d. IMAGE BUTTON Every button in android has some event(event is actually a function which results in some action). For example, clicking a button may change the desktop background. The event listener can be defined by mentioning the name in the “ onClick ” property of the button. But we will use a different approach to do this .i.e., the “onClickListener”. We will deal with the simple button here in upcoming samples. “Between two events there is an action and between two actions there is an event”

Slide14:

(c) Text View It is used for displayin g text. You cant write text into this field. XML: Hello World! < TextView android: layout_width = " wrap_content " android: layout_height = " wrap_content " android: text = "Hello World!" android:id = "@+id/ textView " />

Slide15:

(d) Image View It is used for displayin g image. XML: < ImageView android: layout_width = " wrap_content " android: layout_height = " wrap_content " android:id = "@+id/ myProfileImageView “ a ndroid:background =“@ drawable/abc.png” />

Slide16:

(e) Edit Text Here the text can be entered via keyboard. XML: < EditText android :gravity = "center" android :layout_width = "200dp" android :layout_height = "100dp" android :text = "I AM EDIT TEXT" />

Slide17:

(f) Theme The theme defines the appearance of the layout that we use in android. Theme can be changed from android manifest file or using the app theme feature. This is “AndroidManifest.xml” (see android:theme attribute”)

Slide18:

To change theme via “ AppTheme ”. Open the layout file of the activity (say activity_main.xml) in “Design” mode. An option “ AppTheme ” appers at the top. Two popular themes are available for beginners: 1.With action bar 2.Without action bar We will use default theme .i.e., with action bar.(Try changing themes at your own)

Slide19:

Layout with “ACTION BAR” Layout without “ACTION BAR” Action Bar

Slide20:

(g) Compiling and Running Project: In order to compile your project: Click “Build” ->“Rebuilt Project” Compilation process is lengthy because of multiple parsing(one for XML, one for JAVA, one for build.gradle (app level and project level both), etc.). Parsing of different type of file formats is done at once. Compile + Run Power Run Stop Run Run/Stop Project Power option is used when project is already in run state

Slide21:

(h) Starting the Emulator: Emulator is simply virtual mobile in your computer (no separate physical existence , but in term of software only). It uses computer machine as the hardware platform. It is a mobile software which runs on a bigger machine. 1.Click ( ) “Run” button. 2. If there is no emulator in available or connected devices then , click “Create New Virtual Device”. Otherwise choose any one of available virtual device -> Click “Ok” to run the project in that device.

Slide22:

3. On clicking “Create New Virtual Device”. Choose a device(choose default one) and click “Next”.

Slide23:

4. Choose one of installed Operating System and click “Next”.

Slide24:

5. Enter AVD(Android Virtual Device) name click finish the, this device will be listed in the “Available Virtual Device Option”. Use “Show Advanced Settings to change device ram size, memory size , enable/ diable actual device frame, etc.

Slide25:

6. Select any one of the device from the list of available devices and “OK”. Your project will compile first and later run in that device.

Slide26:

( i ) How to make phone as an emulator: Open your android phone settings > About Phone Tap 6 to 8 times continuously on the “Build Number” turn on developer mode Press back to go to setting again Click on “Developer Option” Turn On Developer Option (radio button) Go below in same window and tick USB debugging Take a US B cable and connect your phone to the laptop No w when you click the “Run” button at the project you want to run. Your phone will be displayed. Select your device and run the project Now you r phone is working in developer mode.

Slide27:

(j) Java (activity & non activity classes), XML and Android Manifest: Every activity in android has java activity class and the XML file. Java activity class user defines what the activity will do when any event occurs. The XML file(s) of that activity contains design specification .i.e., how the layout will look. The empty activity has exactly one XML file(for front end) and JAVA activity class(for back end). In JAVA activity class the code need to be defined. For example is a button is clicked on screen, what event is going to occur( say transferring from one activity to another) then, code will look like Intent myIntent =new Intent( getApplicationContext (), AnotherActivityName.class ); startActivity ( myIntent ); JAVA non-activity class is just similar to the class that are created in NetBeans, Eclipse,etc . It has nothing to do with layout of any activity(XML files), unless it is coded to do so. Non activity java classes are not linked to any layout activity files by default. There is also option of using C++ class as non activity class. Android Manifest: It is a XMl file that contains information about all the activities and their features( eg . Theme, Home activity or not, etc.) that are created during the app development. It also contains information about several permissions used in the application(Like access camera, internet, alarm manager, broadcast manager, flash light access, etc.).

Slide28:

Linked XML layout activity file Java activity class

Slide29:

Android Manifest XML file

Slide30:

(k) Drawable and Resource(res) Folder : Copy paste images into drawable folder(res/drawable) that are to be used in the project. Layout folder contains the activity XML files. For ex, activity_main.xml,activity_signup.xml,etc . Mipmap folder contains the icons and other standard graphics. For ex, An application icon that is to be used during app publishing on google play must be generated using the “Image Asset” of the android studio, which generates standard icon required as per Google play store requirements and also based on all phone API levels. Value folder has three files(more can be added if required): 1.Colors: It stores color values in RGB form eg . #FF0000. 2.Strings: It stores the string values that can be used anywhere in the project files. For ex, appname =“EASYALERTAPPLICATION” 3.Styles: Manage and modify any selected theme here. Changing color of the action bar.

Slide31:

(l) Linear Layouts(vertical and horizontal) : Linear Layout(horizontal)

Slide32:

Linear Layout( vertic al)

Slide33:

LINEAR LAYOUT VERTICAL=> Divides a fixed area into parallel vertical small areas. HORIZONTAL=> Divides a fixed area into parallel horizontal small areas. Linear Layout(horizontal) Linear Layout( vertic al)

Slide34:

(m) Scroll View : When the size of contents that are to be displayed on mobile screen are very large then, in that case we use the “Scroll View”. Using scroll view one can add any amount of data or pallete tools(such as image view, text view, buttons, etc.) on the screen. One can scroll UP-DOWN or LEFT-RIGHT to see the data on the screen with a limitation that only a portion of all contents will be displayed. A B C D E F G H I J K L 1 2 3 4 5 6 7 8 9 10

Slide36:

(n) “ findViewById ” and “ onClickListener ” : findViewById is used to get the view of any item based on its id. Id for any item in android is user defined. Views are important as it helps us to manage what is to be done with any element by using type casting. For example, Button, ImageView , etc. Button but=(Button) findViewById ( R.id.myButtonId ); ImageView imgView =(ImageView0findViewById( R.id.myImageView ); “ setOnClickListener ” is used to define the event for a button .i.e., what is to be done on simple button click. For example, Button butt=(Button) findViewById ( R.id.myButtonId ); Butt.setOnclickListener ( new OnClickListener ( @override Public void onClick () { Toast.makeText ( getApplicationContext (),”Hello World !”, Toast.LENGTH_LONG ).show(); } ) );

Slide37:

(o) Moving to new Activity in Android(Multiactivity) : Create a new activity in java(say OtherActivity ). Add a simple button to xml of default “ MainActivity ” with id=“but1”. Define “Button” event handler as given below. So if this button is pressed the “ OtherActivity ” will be opened up. package com.example.lenovo.myapplication ; import android.content.Intent ; import android.support.v7.app.AppCompatActivity; import android.os.Bundle ; import android.view.View ; import android.widget.Button ; public class MainActivity extends AppCompatActivity { @Override protected void onCreate (Bundle savedInstanceState ) { super .onCreate ( savedInstanceState ); setContentView ( R.layout. activity_main ); Button but=(Button) findViewById (R.id. but1 ); but.setOnClickListener ( new View.OnClickListener () { @Override public void onClick (View view) { Intent i = new Intent( getApplicationContext (), OtherActivity. class ); startActivity ( i ); } }); } }

Slide38:

(p) Sample Hand-on Work : EXAMPLE(1): Write this XML lines in activity_main.xml.Write only the < ScrollView > tag. <? 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.example.lenovo.myapplication.MainActivity " > < ScrollView android :layout_width = "368dp" android :layout_height = "495dp" tools :layout_editor_absoluteY = "8dp" tools :layout_editor_absoluteX = "8dp" > < LinearLayout android :layout_width = " match_parent " android :layout_height = " wrap_content " android :orientation = "vertical" android :gravity = "center" > < EditText android :gravity = "center" android :layout_width = " match_parent " android :layout_height = "100dp" android :hint = "Input text here" android :id = "@+id/editText1" /> < Button android :layout_width = " match_parent " android :layout_height = "50dp" android :text = "Show Me Input Text" android :id = "@+id/but1" /> < TextView android :gravity = "center" android :layout_width = " match_parent " android :layout_height = "100dp" android :text = "Text Display" android :textColor = "#FF0000" android :id = "@+id/textView1" /> </ LinearLayout > </ ScrollView > </ android.support.constraint.ConstraintLayout >

Slide39:

public class MainActivity extends AppCompatActivity { Button but ; EditText editText ; TextView textView ; @Override protected void onCreate (Bundle savedInstanceState ) { super .onCreate ( savedInstanceState ); setContentView ( R.layout. activity_main ); but =(Button) findViewById (R.id. but1 ); editText =( EditText ) findViewById (R.id. editText1 ); textView =( TextView ) findViewById (R.id. textView1 ); but .setOnClickListener ( new View.OnClickListener () { @Override public void onClick (View view) { //Here wee write the code for button event String s= editText .getText (). toString (); editText .setText ( "" ); textView .setText ( s.toUpperCase ()); } }); } }

Slide40:

EXAMPLE(2): Adding “Toast” to your android activity. Wherever a message is to be given. *Modify the “ onClickListener ” code that you have written in MainActivity as shown below. but.setOnClickListener ( new View.OnClickListener () { @Override public void onClick (View view) { //Here wee write the code for button event String s= editText .getText (). toString (); if ( s.trim ().length()== 0 ) { Toast. makeText ( MainActivity. this , "Please enter something first" , Toast. LENGTH_SHORT ).show(); } else { Toast. makeText ( MainActivity. this , "You entered: " + s.toUpperCase (), Toast. LENGTH_SHORT ).show(); editText .setText ( "" ); textView .setText ( s.toUpperCase ()); } } Run the app now

Slide41:

EXAMPLE(3): Setting image in an “ ImageView ”. Steps: 1. Create a new Activity “ SplashActivity ” 2.Copy the image that you want to show. 3.Paste that image in the “drawable” folder of the project. 4.Open the XML file of that activity from res>layouts folder. 5.Add an image view into that as follows: <? 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.example.lenovo.myapplication.OtherActivity " > < LinearLayout android :layout_width = "368dp" android :layout_height = "495dp" android :orientation = "vertical" android :background = "#FFFFFF" android :gravity = "center" tools :layout_editor_absoluteY = "8dp" tools :layout_editor_absoluteX = "8dp" > < ImageView android :layout_width = "200dp" android :layout_height = "200dp“ android:id =“@id/graphic” android :background = "@drawable/java1" /> </ LinearLayout > </ android.support.constraint.ConstraintLayout >

Slide42:

What do you see in design of that XML? I got this

Slide43:

EXAMPLE(4): How to get “ SplashActivity ” as the Splash Screen? Steps: 1. Open AndroidManifest.XML Check Linear Layout height and width both should be “ match_parent ” See the “. SplashActivity ” tag and the “. MainActivity ” tag Remove the “. SplashActivity ” from splashactivity tag and write in its place the name of “. MainActivity ” Remove the “. MainActivity ” from the mainactivity tag and write in its place the name of “. SplashActivity ” Change “ AppTheme ” to Theme.AppCompat.NoActionBar in the tag of “ SplashActivity ” In the java class of the SplashActivity add the following code.

Slide44:

SplashActivity JAVA CLASS public class SplashActivity extends AppCompatActivity { @Override protected void onCreate (Bundle savedInstanceState ) { super .onCreate ( savedInstanceState ); setContentView ( R.layout. activity_splash ); Thread timerThread = new Thread(){ public void run(){ try { sleep ( 10000 ); } catch ( InterruptedException e){ e.printStackTrace (); } finally { Intent intent = new Intent( SplashActivity. this ,MainActivity. class ); startActivity (intent); } } }; timerThread.start (); } @Override protected void onPause () { super .onPause (); finish(); } }

Slide45:

<? xml version= "1.0" encoding= "utf-8" ?> < manifest xmlns: android = "http://schemas.android.com/ apk /res/android" package= " com.example.lenovo.myapplication " > < application android :allowBackup = "true" android :icon = "@mipmap/ ic_launcher " android :label = "@string/ app_name " android :roundIcon = "@mipmap/ ic_launcher_round " android :supportsRtl = "true" android :theme = "@style/ AppTheme " > < activity android :name = ". SplashActivity " android :theme = "@style/ Theme.AppCompat.NoActionBar " > < intent-filter > < action android :name = " android.intent.action.MAIN " /> < category android :name = " android.intent.category.LAUNCHER " /> </ intent-filter > </ activity > < activity android :name = ". OtherActivity " /> < activity android :name = ". MainActivity " ></ activity > </ application > </ manifest > Android Manifest Run the app now

Slide46:

Example(5) Animation in Android. Steps: 1.Create a new folder “ anim ” in the res directory. 2.Create a new XML animation resource filenamed “slide.xml” 3.Modify that animation resource xml file as follows: <? xml version= "1.0" encoding= "utf-8" ?> < set xmlns: android = "http://schemas.android.com/ apk /res/android" android :fillAfter = "true" > < scale android :duration = "10000" android :fromXScale = "1.0" android :fromYScale = "0.0" android :interpolator = "@ android:anim / linear_interpolator " android :toXScale = "1.0" android :toYScale = "1.0" /> </ set >

Slide47:

4. Open the java file of SplashActivity and modify it as follows: public class SplashActivity extends AppCompatActivity { @Override protected void onCreate (Bundle savedInstanceState ) { super .onCreate ( savedInstanceState ); setContentView ( R.layout. activity_splash ); ImageView imagex =( ImageView ) findViewById ( R.id. graphic ); Animation animationx = AnimationUtils. loadAnimation ( getApplicationContext (), R.anim. slide ); imagex.startAnimation ( animationx ); Thread timerThread = new Thread(){ public void run(){ try { sleep ( 10000 ); } catch ( InterruptedException e){ e.printStackTrace (); } finally { Intent intent = new Intent( SplashActivity. this ,MainActivity. class ); startActivity (intent); } } }; timerThread.start (); } } Run the app now

Slide48:

Example(6) How to create an exit dialog in android? Steps: 1.Open the MainActivity 2. Add the “ onBackPressed ” method(overridable) in the MainActivity.java with the following code. @Override public void onBackPressed () { new AlertDialog.Builder ( this ). setIcon ( android.R.drawable. ic_dialog_alert ). setTitle ( "Exit" ) . setMessage ( "Are you sure you want to exit?" ) . setPositiveButton ( "yes" , new DialogInterface.OnClickListener () { @Override public void onClick ( DialogInterface dialog, int which) { Intent intent = new Intent( Intent. ACTION_MAIN ); intent.addCategory ( Intent. CATEGORY_HOME ); intent.setFlags ( Intent. FLAG_ACTIVITY_NEW_TASK ); startActivity (intent); finish(); } }). setNegativeButton ( "no" , null ).show(); } Run the app now

Slide49:

Example(6) How to move from one activity to another? Steps: 1.Create a new Activity (say with name OtherActivity ) 2. Add a button in the XML of main activity as follows: < Button android :layout_width = " match_parent " android :layout_height = "50dp" android :text = "GO TO NEW ACTIVITY" android :background = "#FF0000" android :textColor = "#FFFFFF" android :id = "@+id/ moveToActivity " />

Slide50:

butActi =(Button) findViewById ( R.id. moveToActivity ); butActi.setOnClickListener ( new View.OnClickListener () { @Override public void onClick (View view) { Intent intent= new Intent( getApplicationContext (), OtherActivity. class ); startActivity (intent); } }); Button butActi ; 3. Define the variable “ butActi ” of type BUtton as the instance variable of the class MainActivity.class 4.In the “ onCreate ” method add the following code at the bottom Run the app now & click the button “GO TO NEW ACTIVITY”

Slide51:

Make an android application containing two “ EditText ” boxes and a button “Click Me”. On clicking the button “Click Me” the contents of the two edit texts must be swapped. [HINT: use “ setText ” and “ getText ” methods for Edit Texts.] [Use basic java concepts to swap the two strings] [Use OtherActivity.class ] (q) Exercise

Slide52:

Solution: Layout XML file of the OtherActivity will be: <? 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.example.lenovo.myapplication.OtherActivity " > < LinearLayout android :layout_width = "368dp" android :layout_height = "495dp" android :orientation = "vertical" android :background = "#FFFFFF" android :gravity = "center" tools :layout_editor_absoluteY = "8dp" tools :layout_editor_absoluteX = "8dp" > < EditText android :layout_width = " match_parent " android :layout_height = "150dp" android :hint = "Enter String1 Here" android :id = "@+id/ editTextP " /> < EditText android :layout_width = " match_parent " android :layout_height = "150dp" android :hint = "Enter String2 Here" android :id = "@+id/ editTextQ " /> < Button android :layout_width = "140dp" android :layout_height = "30dp" android :background = "#FF0000" android :text = "Click Me" android :id = "@+id/ butClickMe " android :textColor = "#FFFFFF" /> </ LinearLayout > </ android.support.constraint.ConstraintLayout >

Slide53:

public class OtherActivity extends AppCompatActivity { Button b1 ; EditText eT1 , eT2 ; @Override protected void onCreate (Bundle savedInstanceState ) { super .onCreate ( savedInstanceState ); setContentView ( R.layout. activity_other ); b1 =(Button) findViewById ( R.id. butClickMe ); eT1 =( EditText ) findViewById ( R.id. editTextP ); eT2 =( EditText ) findViewById ( R.id. editTextQ ); b1 .setOnClickListener( new View.OnClickListener () { @Override public void onClick (View view) { String s1,s2; s1= eT1 .getText(). toString (); s2= eT2 .getText(). toString (); Toast. makeText ( OtherActivity. this , "Swap Complete" , Toast. LENGTH_SHORT ).show(); eT1 .setText(s2); eT2 .setText(s1); } }); } } This is OtherActivity.class Run the program

Slide54:

Thank you !!!!!!! 

authorStream Live Help