ANDROID USE INTERFACE) LLABUS TECH - HYDERABAD] its, Layouts-Linear, Relative, Grid Comp Buttons, Radio and Toggle Event Handling - Handling Clicks es of Various UI Components.ndroid ut the A a 11 understand and Sey In this chapter we wil i rs wil 3 ‘The Importance of creating a UI that your ue : ated. : area terminotogy by Androl Set aa a The following sections explores some nel © fe programming metaphors nil ie wn : (1) Views : They are as controls or widgets. from View (2) View Groups : views. It can exte interconnected child (3) Fragments used to enca particularly usef creating reusable “ Android equivalent of Forms i provides several comme ERBB Android User Interface Fundame All user interface elements in an And and Group objects. (1) View : A view is an object th interact with: creen that the user can ViewGroup + A ViewGroup is a i @ P o's an object thet holds other view and n in order to define the layout of the interface ViewGroup objects "APPLICATION DEVELOPMENT‘each component ¢ fand ViewGroup, objects that are ViewGroup ——— EREB Assigning User A new ai Dur UE. To do that we have t: out resource to display. Bec most always use si andler. _ gle View instance. TI f external layout resou! By using layout resourc decouples our presentation layer from the applieatlogy logic, by providing the flexibility to change the presentation without changing the ead #0 this makes it possible to specify different layouts optimized for different hardware) Fonfigurations when changing them at runtime based on hardware changes, By using the findViewByld method we can obtain a reference to each oF a layout, myTexiView=(TextView) findViewByID(R. Id, myTextView);Be eaiconteniview methods accepts a single view Instance, 28 result, We Jayouts to add multiple controls to our activity. introducing Layouts f ss and are used 1} Layout or LayoutMangers are extensions position child Views within our UI. Layouts can t t > create arbitrarily gomplex UIs by using a combination of layo! jes a number Ofm layout classes. That we can use the to construgtl the UI for your Views, Fragmen Following list specifies some s that are available in the Android SDK (1) Frame Layout : These are the simp e framelayout pins each child view within it (2) Linear Layout : These Linear Lay horizontal line. er a vertical OF (8) RelativeLayout : It define the position: ve to the others ai to the screen boundaries. (4) GridLayout : It uses a rectangular grid « infinitely thin lines to layout Views in a st f rows and columns. This layout flexible and can be used to greatly simplify | EXEEE Defining Layouts The best way to define the layout is by using a XML external cura yous contain a single root element.: youl_width="match_parent™ android: layout_heigh ‘match_parent*> the position of and the other views. Pir Following program 3.1.3 modifies the layout that describes bither and that moves the buttons below the list view, most ‘APPLICATION DEVELOPME!‘can create complex without ‘construct UIs by using the relative layout. MPONE we can use to r controls that we find design t frequently using ins ANDROID APPLICATION DEVELOPMENT PROFESSIONAL PUBLICATIONS —_—(1) Buttons : The represents a push-button widget (2) Eatext Views : A subclass of the TexView view, IE Its text content. except that It allow (@) CheckBox : It Is a spe tates they are (4) RadioGroup and Rac“http: //scheme android:orientation=*vertical* android:layout_width =", afidroid:layout_height=" adaptor The abo several constants of ti following runs the PROFESSIONAL PUBLIGit displays the display the time ANDROID APPLICATION DEVELOPMENT ae PROFESSIONAL PU jefault method tii NBaseContenxt; ), “Time selectod:- 4 HimePickergetCurrentHiour, ) 4 * + timePicker getCurr foast.LENGTI E2MDisplaying the timePicker in @ Dialog Window In an act and the better way Is to display SD te diaic disappears and doesn't take any SHB in an acti (1) Called whe r @Override le PROMSIGHAS ION DEVELOPMENT APPLICATION DEVIPUBLICATION We den} shyeK to identir so firicanion Deyn PROFE! SSIONAL PUBLIGATIONSWhen the ANDROID APPLICATION DEVELOPMENT PROF “Fi pretation OFESSIONAL PUBLThis Is similar to the t Users to select a particular date on te ene BY Using th » the activity The followinc ; EEEEB Using the DatePicker v; PROFESSIONAL, PU{@) On the Android Emulator press the Fit to debug te 3.2.9 shows the Datepicker and Tinepicker views te pochaert Jan | 04 2011 * ANDROID APPLICATION DEVELOPMENT PROFESSIONinthour, minute, Static final int TIME_DIALOG, 10: : ID =o; ed: mePicker.getCurrentHour( ) + * + timePicker.getCurrentMinute( ), Toast, LENGTH_SHORT).show(switch (id) { case TIME_DIALOG_ID return new TimePicke! etl Hel } (4) On the Android Emulator press F11 to debug the application once the date clieking the Button It will display the dateset that was shown In the fe Fig. 3.2.10.PROFESSIONAL PUB APPLICATION DEVELOPMENT teenie‘android, widge! timePicker Import android. widget DatePick import android publ ¢@ py Calenda yretoday. get(Caienda YE _Month= today get(Catenaa: MONH---Button view. Button binOpen — (Button) finavi binOpen.setOnciickt is Public vc 'ewByld(R.id.binSet); stener(new View.OnClickLi 1 onClick(View v) { ast.maker istener( ) { \(getBaseContoxt fatePicker.getMonth( ) + @ov prote p month, day) stener, y } return nullyr year: month = monthOfYear; day = dayOfMonth Toast.makeText(getBaseContext( ). ‘you have selec + di | ° private TimeP’ hi } (2) On the Android Emulator press F11 to debug the application. In a dialog win We can see the Datepicker displayed when the activity is loaded. Next set and then click the set button. The toast window will display the data what ore you set. As shown in following Fig. 3.2.11,method variables like, (1) Year |) Month "APPLICATION DEVELOPMENT PROFESSIONALHandling Clicks or Changes of Various UI The following steps shows how to handle the view events 28 dm 5 file by adding the Srep 1 : We use the same here and statements in bold, setConte M1---Button view.“M=-Button view- Button binSave = InSave = (Button) tingviews, binSave.setOnCiick! ce ee istener(new vi w View OnClickListener{ } ngeListener( ) i checkedld) { on) FindViewByld(R.td,rdb4); DisplayToast(‘option 1 ¢ } else { DisptayToast(*Option 2 checked!’)(FoggleButton) findViewByld(A \d.toggiet); toggleButton.setOnClickListener(new View OnClickListener{ ) t } Step 2 + On the Android it Step 3 : In the toast window, erve the message tat displayed. ERB How it Works ie To handle the events that are fired by each view, firstly we have to programmalle locate the view that created during the onCreate() event. We can do It by ‘Aativity.findViewByiD( ) method, and supplying it with the Id of the view,OpeN:se10nClickListenerinow y, public void onClick Display When t onclick) s checked, method on the utton changes Radio in this group a M---Ra wayld(R.id.rdbGp 1); RadioGroup rac eckedChangeListener( ) fedioGroup.setOnCheckedChang! APPLICATION DEVELOPMENTTay Creating Fragments, I nents to Activity, Adding, g between Fragments and Removing and Repl Activates, Multi-Screen‘elesse, They ore also avaiable now os 2 part of the Imakes It possible to take advantage of fragments on platforms Fragments enables us to ctivities into fully encapsulated components, each. with its own lifec he main advantage of fragments: ease with which we can create dy gns that can be adapted! suite a range of tablets, ide variety Fragment de our of Android de activities in It easier f 4 unbin{ and t] QE Creating Frag f 7 PROFESSIONAL PUBold fragments have their own life cycle very S include a series of event handlers that mirror those | le our Iriggered as the Fragments is created, started, resumed, paused, make pe Fragments also include a number of additional callbacks that Unbinding the fragment from its parent activity, creation of the fragment jand the completion of the creation of the parent activity, Following Fig. 4.3. ws the fragment Teepe dnally Mf the oume o : 3 ot H }-fmnsmns} ao) imple i : Je event handlers, Following Program 4 e frag ye package cor import andr import android.app.Fragmer ; import android.os.B import android.view.L Import android. view. View import android, view.ViewGroup. ends Fragment Public class MySkeletonFragment extends‘superonAttach(activity). W Get a reference to the parent Activity. } W Called to do the initial creation of the Fragment @Override Public void onCreate(Bund! led once @Override public void onAct super.onActivityCre / Complete the Fragme pie Particularly anything that requires te 4 parent Activity to be initial , ent A k alize ent’s view to be fully inflalede #/ Calied at the start of the visible lifetime @Override Public void onStart( ); Super.OnStant( ); apieronResume( ), WPesume any paused Ui updates threads, of W Fragment but sus cesses that dont activity, 058 Is likely updates, tneads. of proc HW Suspend remaining U! # required when the Fragment isn't visible."public void onDestroyview( ) ( Wf Clean up resources related to the View super onDestroyview DERE Fragment-specific Lifecy Mo sients in the activity c EEXEM Attaching and Detaching Fragments from the Parent Our frag ends when it has been detached. These e and onDelach respectively rent activity d by the calls to o With any handler, as we called after a fragment/activity has become possible that onDetach will not be called if the parent activity process is t completing its full life cycle.UL is initialized and onDestroyView re: ‘our fragment firstly we and timers Be Yo" Pave Inflated our view hierarchy, i onl on retury feturn inflater.inflate (R ned from If our fragment need: steract ‘ith sca ’ ie wait until the o UI of its parent Activity then We triggered EERE Fragment States AS a result, frag Activity state transiti activity that is focu the corresponding en they belong to an When an activity paused and stopped eM activity is finally c ain in fragments are also e also inactive. When The activitie t nain advantage of using fragments to se ynamically add or remove fragments from an tiv As a result, each fragment visible and active lifecycle: Several times within the active i vit ERB ADDING FRAGMENTS TO ACTIVITY There is an simple way to add a fragment to an activity by including it within thes Attivity’s layout iy Using the fragment tag as given in the below Program 4:4lls \droid:layout_height="match_parents‘ y-LAUNCHERY/>: HER category are not declared for one of Your) If either the MAIL ar in the Home screen's list of apps. Activities, then your app i I n9% appe n wi World! application we just modified. 1 assume) Let's try to run our modified Hello had created yourAVD while doing environment setup. To run the app from Eclipse) les and click Run icon from the toolbar, Eclipse-Inst g Is fine with your setup and Whe of your project's activity fil HBP On your AVD and starts it and if everythin f will display Emulator window and you should see following log me yate( ) event entLet us try to click Red button © i || generate 07-19 18 Let us again try to click Menu but will generate following events messages in Log 07-19 15:01:13,995: 07-19 15:01:14.705 Next, let us again try to click Back button @) on the Android emulator and ie wil Generate following events messages in LogCat window in Eclipse IDE and this completeay the Acitivity Life Cycle for an Android Application. 07-19 15:83:15,687: D/Android ;(992): The onPause( ) event 7 07-19 16:33:15,525: D/Android :(892); The onStop( ) event 07-19 15:93:15.625: D/Android :(992): The onDestroy( ) event =.