Develop rich user interfaces for the given Android application. Develop Android application using the given view. Explain the significance of the given display alert. Develop the given application using time and date picker. To learn Designing User Interface with View in Android To study varoious Ul Controls Tolearn Text View, Edit Text; Checkbox, Button (Image and Toggle), Progress Bar etc., with Examples Tounderstand List View, Grid View, Image View, Scroll View, Date Picker etc., with Examples [view class represents the basic building block for User Interface (UI) components.{A View occupies a rectangular area on the screen and is responsible for drawing and event handling Wiew is the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.). ‘The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties. | AViewGroup is a special view that can contain other views (called children.) The view group is the base class for layouts and views containers.) ‘The view is the component which Android provides us to design the layouts of the app. A Viewis a ‘Superclass for all the UI components.. of View Gabel), Button, EditText(TextField), CheckBox ete. g a hierarchy ag ‘+ The User Interface (U1) for each component of i 2 eee hoe organizes child view, ‘ViewGroup, as shown, 4.1, Each view group Is an part of the UL. while the cild views may te input controls or other widgets that draw some . A TextView is a complen, * ATextView displays text to the user and optionally bane be a ita text editor, however the basic class is configured to not allow ‘ie 7 fh standard read-only text label that supports string formatting, =a for as ‘word wrapping. A TextView is a entire text editor, however the basic class " aaa editing. A TextView Inherits all of TextView attributes and Inherits all TextView m is - seihigeatage of TextView: 4d: Supply an identifier name of this view, to later retrieve it with View.findViewByID) er Activity. findViewByid(, ‘ i ee Yetus ry to run the application. Assume we had created our AVD while doing environment setup. To Fun the app from Android studio, open one of our Project's activity files and click Run @ icon from the toolbar. Android studio installs the SPP on our AVD and starts it and if everything is fine with our setup and application, it will display following Emulator window editable its multiline entry, word wrapping and hint text. A EditText isan ioe Se neres itself to be editable. It is the predefined subclass of TextView ‘overlay over TextView that includes rich editing capabilities. “)opaque) (float). {isan attribute used swe set the id ofa EditText. ‘android:ide"@rid/simpleéditText” android:layout_height="wrap_content” android: layout_width="watch. hile gravity: The gravity attribute is an optional a 7 rr Uke left right, center, op, bottom, center_vertical, center. ‘code with explanation included in which we set the right gravity nn attribute used to set the hint i. what we want user to enter in this edit tet ‘Whenever, user start to type in edit text the hint will automatically ly disappear. Below exampe code with explanation in which we set the hint of a edit text. an sp (scale independent pixey or dp arnt ef te tn ec uk Wot a size for the text of a Button, nsity pixel), Below is the example code in which we set the 40sp inMainActivity java add the fo ee nn ieport android. support. 7.30 gop import android os. Bungie, seal import android. view. Heng; inport android.view.Menutten, import android. view. view import android. widget. sutton igport android.widget.Textyiiy, blic class Mainactiva n patie ty extendsAppconpatactivity( protected vold onCreate(sundle savedtnstancestate super-onCreate(savedinstancestatey; tte sercontentView(R.layout activity main); __//set the layout FinalTextview simpletextview =(Textview) findviewById(R.id. simpleTextView); //get the id for TextView Button changeText =(Button) FindviewByrd(R.id.btnchangeText); //get the id for button changeText.. setOnClickListener(neuview.OnClickListener(){ @override publicvoid onClick(View view){ simpleTextView.setText("after Clicking"); //set the text after clicking button pe that can be pressed or clicked by the user. ee ot tral button witha custo image In abutton. tn ‘button with an image that can be pressed or clicked bybackground that changes Ui Calg “Ady default it looks like a normal button with the standard button during different button states. Fig. 4.3: Image Buttons Properties of ImageButton: “4. id: The id is an attribute used to uniquely identify a image button. Below is the example code jn which we set the id of a image button. pA ‘sre: The src is an attribute used to set a source file of image or we can say image in the image button to make layout look attractive. Below is the example code in which we set the source of an image button. Make sure we have saved an image in drawable folder name, home, before using below code. ‘Imagesutton android: d="@+14/simpletmageButton" android: 1ayout_width="wrap_content* android: 1ayout_height="wrap_content™ android:srce"@drawable/home"/>< 1 --src(source) file an Amagebutton--» eee background attribute is used to set the background of an image button, We can set & drawable in the background of a Button. Below is the example code in which we set the black color for the background and an home image as the Source of the image button, from drawable folder which display 4 nap_content” rc="@drawable/home”1m the below example Of imag” S8t 20dp padding from all the sides of the view--> ' One is simple ima, we display two custom image buttons with source and Image button and whenever we qj” "ith simple background and other one isa round corner toast Below is the code and final outpue, Put the name of the button will be displayed in a | which we used solid and corner ; image ‘Properties, solid is used to set the background color for the button and corner is used to set the radius for button corners. <2eml version="1.8" encodings"utf-8"?> : <1-- round corners for imagebutton--> Step 3: Open app — layout - activity_main.xml (or) main.xml and add following code: In this step, we | open an xml file and add the code which display two custom image buttons by using src, background, gravity and other attributes in Relative Layout. 2, checked: The checked is an attribua, The ile should be true or false where true shows the checked state and false shows amchecked state of a toggle button. The default value of checked attribute is false. We can also set the current state Programmatically Below we set true value for checked attribute sets the current state to 3c gravity: The gravity attribute is an optional attribute which is used to control the alignment of the text in ToogleButton like left, right, center, top, bottom, center_vertical, center horizontal ete, <1-- gravity of the toggle button--> \&. textOn and textOff: The textOn attribute is used to set the text when toggle button is in checked/on state, We can set the textOn in XMLas well as in the java class. Below is the example code with explanation included in which we set the textOn “Enabble Attribute Of Toggle button” for a toggle button. ‘textStyle: The textStyle attribute is used to set the text style of the text of a Toggle button. We can ‘set bold, italic and normal. If we need to use two or more styles for a text view then “|” operator is ‘used. Below we set the bold and italic text styles for text of a toggle button. ‘ + 10. drawableBottom, drawableTop, drawableRight and drawableLeft: These attribute draw the Grawable below, top, right and left of the text of ToggleButton. Below we set the icon to the Top of the ‘extofa ToggleButton. in the similar way we can try for other three attribute ourself, Si--Make sure to add ic_launcher image in drawable folder--> «Button android: d="@+1d/subaitButton* android: layout_widthe"wrap_content* android: layout_height="wrap_content™ android: layout_gravitys" center” android: layout _margintop="sedy android: backgrounds" safe \edp* android: text="Supmit” android: textColor= "ef FF” android:textsize-"205p" android:textstyle="bold*/> ‘Step 3: Open‘SimpleTogglesuttona cree eButton) Finaviewsytd(R. Ad. st submit =(Button) #4, Monee FindviewsyTa(R.4d. TAR. beth wold onClick(View view( " , eet StmpleToggleButtont..getText ()+"\n"+"TogeleButton2 : make’ “+ simpleToggleButton2. getText(); ToasesmaeTOxs(GetAPPLicationcontext(), status, Toast. LENGTH_SHORT).show()5// display the current state of toggle button's d ym d d ‘Output: Now start the AVD in Emulator and run the App. You will see two ToggleButton and submit Button. Click on the submit button which will display the state of ToggleButton. ‘AfadioButton has two states, either checked or unchecked. This allows the user to select one option y from a set. A RadioGroup class is used for set of radio buttons.# ‘textColor: The textColor attribute is used to set the text color of a radio button. Color value is in the ‘a radio button, As usual default value of checked attribute Is inJava, Below we set true value for checked attribute Button ehadiobutton android) ide"@rid/simpleRadiobutton” android: ayout_width="wrap content” android: Layout_height="wrap._content™ TMaaiahecsegettrens/sete sot the current state of the radio button--> va gravity: The gravity attribute is an optional attribute which is used to control the alignment of text like left, right, center, top, bottom, center_vertical, center_horizontal ete. Below is the example code ‘with explanation included in which we set the center gravity for the text of a radio button. form of “wargb", “#rgb”, “#rrggbb”, or “waarrggbb”. Below we set the red color for the displayed text of aradio button, ‘Setting textColor of RadioButton text In Java Class: Below we set the text color of a radio button programmatically. 7/*Add in Oncreate() funtion after setContentview()*/ RadioButton simpleRadioButton = (RadioButton) findViewById(R. id. simpleRadioButton); // initiate radio button ‘simpleRadioButton. setTextColor(Color.RED); //red color for displayed text of a textSize: The textSize attribute is used to set the size of the text of a radio button. We can set the text Sas ese independent pant) dp (ety ae, Reon we tthe 25 sae for ha text ofextStyle="bold|italic"/><1-- background: The —. ce em attribute is used to set the background of a radio button. We can set a Fi in the background of a radio button. Below we set the black color for the a and red color for the displayed text of a radio button. 4 ‘on tAd="@+id/simpleRadioButton” jayout_width="wrap_content™ s layout_height="wrap_content* |: checked="true” jstextSize="25sp" :textStyle="bold| italic” padding="2edp" ayout_centerHorizontal="true" android: text="Male” android: textColor="#f00" r : id:background="#000"/> aad ‘of RadioButton in Java Class: Below we set the background color of a radio button programmatically. /*hdd in Oncreate() funtion after setContentview()*/ ‘simplenadiobutton = (RadioButton) FindViewsyld(R.1d.simpleRadiobutton); ener wo on, setBackgroundColor (Color. BLACK); . ez P sig attribute is used to set the padding from left, right, top or bottom. from the right side of the radio button. from the left side of the radio button. tie padding Orme topside ofthe rad button. bold and italic text style-->layout_centerHorizontal="true” text="AbhiAndroid” icon at the right of Example: in activity_main.xml add the following code: ndroid="http: // schemas. android. com/apk/res/android™ android: 1d="@+id/radiosex android: layout_width="wrap_content” ‘android: 1ayout_height="wrap_content™ > RadioButton android: 1d="@+id/radionale android: layout_width="weap_content™ee im File: MYANdroidAppActivity java’ AMAch a click listener on button, android.os. Bundie Amport import 3 import android.view. View, Ilpert 204rodd. view. View.onci seksi, inport android. widget. sutton, de import android. widget Radioostton import android. widget Radiocrow,” import android.widget toast; BBHE class hyAndrotaappactivity exten Private Radiosroup radiosexcronp Private RadioButton radiosexsutrin; private Button btnoispiay; @override PaNe void oncreate(Bundie savedinstancestate) { Super.onCreate( savedinstancestate), ¥ SetContentView(R.layout.main); “oe addListeneronButton(); i } Public void addListeneronsutton() { FadioSexGroup = (RadioGroup) findViewsy14(R.sd.radiosex); btnDisplay = (Button) FindViewById(R. 1d, btnbisplay), benDisplay. setonClickListener(new OnClickListener() { GOverrice Public void onClick(View v) { // get selected radio button from radioGroup int selectedId = radioSexGroup. getCheckedRadioButtontd(); // find the radiobutton by returned 14 radioSexButton = (RadioButton) FindViewsyId(selectedTd); Toast.makeText (MyAndroidappActivity. this, radioSexButton.getText(), Toast.LENGTH_SHORT).show(); ds Activity {"a two-state button represented by ‘the user. ‘© ACheckBox is an ON/OFF switch that can be toggled by ! ‘checked or unchecked box. ce : de to Android GUI widgets. taken from Visual Gui ‘ sehen allot TextView Trurutes and Button atesbut®, sa ofa image button, check box. “AL {ds The idis an attribute used to uniquely identify 2 \ ee ee Bie cn ainbute check box used to set the current state of a check box. The e value checked state of the checked state and false shows un} Brite toe of 2 Sea is false, We can also set the current state ox. The default value of checked at Se atcaly. Below is an example code in which we set true value for checked attribute that sets the current state to checked. Setting Current State of CheckBox in Java Class: Below we set the current state of CheckBor in java class. /*Add in Oncreate() funtion after setContentView()*/ // initiate a check box CheckBox sinplecheckBox = (CheckBox) FindViewById(R.id. simpleCheckBox); // set the current state of a check box JK, sitescncion /.SetChecked (true) ; 3. gravity: The gravity attribute is an optional attribute which is us: text in CheckBox like left, right, center, top, bottom, center_verti ‘set the right and center_vertical gravity for the text of a check checkbox android: e"@+14/stmplecheckBox: android: layout_width="#11). parent" android: layout _height="wrap_content” android: ‘text="Simple CheckBox" android: checked="true” androld:gravity="rignt |cen iter_vertical”/><1-- Bh text: The text attribute is used to set the text i Son We eee “aps in a CheckBox. We can set the Class Below isthe example code with explanati Sot inal as well as 8 Aftbuts of Chadha ion included in which we set the text “ret | ed to control the alignment of the ical, center_horizontal etc. Below we box. «Checkbox Inchack box.‘simplecheektox = 7/ Anitiate check box (CheckBox) findViewsyfd(R. 1d. simpleCheckBox) ; CheckBox. setText("Text Attribute OF Check eh ty oe sera The textCooratribute sued to set the text color of checkbox Color vale In frm —. FTERDD", oF “waarrggbh*. Below we set the red color for the displayed text of & eCheck Box, android: id="@+id/simplecheckBox” android: Layout_width="wrap_content*™ android: Layout_height="wrap_content” android:text="Text is Red Color” android: textColor="#Ffee" android:checked="true"/> ‘Setting textColor in CheckBox in Java Class: Below we set the text color of a check box programmatically. /*hdd in Oncreate() funtion after setContentView()*/ //initiate the checkbox ‘CheckBox simpleCheckBox = (CheckBox) findViewById(R. id. simpleCheckBox) ; //red color for displayed text ‘simpleCheckBox.setTextColor(Color RED); 6. textSize: The textSize attribute is used to set the size of text of a check box. We can set the text size in sp (scale independent pixel) or dp (density. pixel). Below is the example code in which we set the 20sp for the text of a check box. - A Progress: The Progress isan attribute used in android to define the default progress value between © and max. It must be an integer value. Below we set the 100 max value and then set 50 default progress. ‘<1--// se default progress value--> A. progressDrawable: The Progress Drawable is an attribute used in Android to set the custom Grawable for the progress mode. Below we set a custom gradient drawable for the progress mode of a Progress bar. Before we try below code make sure to download a progress icon from the web and add inthe drawable folder. ‘Step 1: Add this code in activity_main.Xml or main.xml inside layout, <1--custom progress drawable for progress mode--> custom_progress, Here add android:progressDrawable="@drawable/custon_progress ‘Step 2: Create a new drawable resource xml in drawable folder and name it the below code which creates gradient effect in ProgressBar.android: layout_height="wrap_content™ android:max="199" ‘android: progress="se" w Style="@style/widget. AppCompat .ProgressBar.Horizontal progress bar--> | ‘android:background="#000"/> Padding: The padding attribute is used to set the padding from left, right, top or bottom of PaddingRight: Set the padding from the right side of the Progress bar. addingLeft: Set the padding from the left side of the Progress bar. PaddingTop: Set the padding from the top side of the Progress bar. addingBottom: Set the padding from the bottom side of the Progress bar. ‘Padding: Set the padding from the all side's of the Progress bar. Below we set the 20dp padding from all the side's of the Progress bar, ProgressBar "@+id/simpleProgressBar™ android: layout_width="Fi11_parent™ ‘android: layout_height="wrap_content* android:max="100"; d:id="@+id/starteutton android: 1ayout_width="200dp" android: layout _height="wrap_ content” android: 1ayout_centertortzontal="true” android: layout_marginTop="120dp" android: background="#eF0" android:padding="1edp" android:text="Start” android:textSize="20sp" android:textstyle="bold"/> Create an xml file in drawable — custom_progress.xaml .app.Dialog: id.content .Dialoginterface; content. Intent} oneToasts feisenvty ‘extends AppCompatactivity( jew(R. layout. activity_main); s bar and start button "setcontentVi ‘J/ Anitiate progres: simpleProgress8ar ‘startButton, setOnClickListener(newView.Onclic! @override public void onClick(View v){ 71 call a function setProgressValue(progress); } po + private void setProgressValue(finalint progress){ 1/ set the progress simpleProgressBar.setProgress (progress); // thread 1s used to change the progress value Thread thread =newThread(newRunnable(){ @verride public void run(){ try{ Thread. sleep(1000) ; }eatch(InterruptedException e){ e.printStackTrace(); setProgressValue(progress +10); (Menu menu) { a to the action bar rogressBar) findViewByTd(R. 14-5: putton startButton =(Button) FindViewsyrd(R.id.startButton)s button ee kListener(){ AmpleProgressBar);«© ListView displays a vertically-scrollable collection of views, where each view is positioned «9 [android ListView is a vie Properties of ListView: AL AdsThe id is used to uniquely 14 explanation included. <1-- id of a list view uniquel; wee + sean diferent ist items Below athe der ePl® red color divider between different ¥#"™* 3 r_height= ne able or col t0 dra {ncluded, where we draw ae iiandross Layout sete FAL parent”, ‘android: layout_height="wrap_content as f android:éividers"#f00" items. This een ada { android: dividerHeight="1dp"/> vider berween lst te der We | A vierteight This specity the height of the divider MT eo { pixel), sp (scale independent pixel) or px (pixel) be in dp, sP OF PX view. 1s generally orang height adp between the list items. The height should eee \e list! ‘alist selector as ye A listSelector: The listSelector property is used to set the $e olor or at image 8S % 8 a or Sky blue color mostly but we can also define our custom O° agg, where eres oneal our design. Below is listSelector example code with a t ‘green, when we select any list item then that item's ba €ls= List Selector Code in ListView --> geView android: id="@+id/toastImageView” android: layout_width="wrap_content” layout _height="wrap_content” ginRight="Bdp” /> -android.com/apk/res/android” Step 4: Open src— package —> MainActivity java. «In this step we open MainActivity and add the code for initiate the Button's and perform click event 's i with message “Simple Toast In ‘on Button’s. Whenever a user click on simple Toast Button a Toast “Android” displayed on the screen and when a user clicks on custom toast Button a message ‘Custom Toast In Android” with a image displayed on the screen. Eevasting ‘a custom toast we firstly retrieve the layout inflater and then inflate the custom toast layout from the xml file. ‘After that we get the reference of TextView and ImageView from the image in the TextView and ImageView. {inflated layout and set the text and image in the 7 : a ayes te anew Toest and pass the inflated layout in the setViewf) method and then Gelay ‘show( method of Toast. jroid. toastexample; .AppCompatActivityspublic class atnactivity extends AppCompatActivity ( button simpleToast, custonToast; pocced void onCreate(Bundle savedinstancestate) ( super.onCreate(savedinstancestate) ; setContentView(R. layout .activity_main); ‘the reference of Button’s ma custonToast = (Button) findViewby1a(R. 1d. custoTonety oq 11 perform setonclickListener event on simple Tost Ney" sinpleToast. setOnclickListener(new View.0nC: @verride et lic void onClick(View v} Pisi/] initdate a Toast with message and du atten ee(), “Simple Toast In Toast toast = Toast makeText (getapplicationcontent(). OME oe e Android", Toast.LENGTH_LONG); // Jose ee ter ge Toast IZONTAL, @, @); toast.setGravity(Gravity.BOTTOM | Gravity. CENTER_HOR: Riererity tne tonre toast.show(); // display the Toast x ; , vs // perform setOnClickListener event on custom Toast Button CustonToast. setOnClickListener(new View.OnClickListener() { Goverride Public void onClick(View v) { // Retrieve the Layout Inflater and inflate the layout from xml LayoutInflater inflater = getLayoutInflater(); i View layout = inflater.inflate(R. layout. custom_toast_layout, (VdewGroup) findViewById(R.4d.toast_layout_poot)); - // ‘get the reference of TextView and InageVIew from inflated layout TextView toastTextView = (TextView) layout FindvsewByT4(R. ia. toastTextvien), ~~ InageView toastinageView = (ImageView) Aayout. FindViewbytd(R. 14. toastInageVien); 17 set the text in the TextView jeoseTextView setText("Custow Toast In Andros); // set the Image in the Imageview - j toastInageView. setInageResource(R-dravab] . et A 1 create a new Toast using content a Toast toast « new Toast(getappliceti, onc s toast. setDuration( PeaxtOs Toast. LENGTH LONG) ; toast. setview(layout); ql (1 set the durati 11 set the inf an for the Toast fonst-show(); // display the custom Toare’ SoutIn Time Pickerallows jothours, minutes and coes nt i of day in ether 24 hour or AM/PM made Te time told provides this functionality through TimePicker eee methods of a time picker, Which are used to configure a TimePicker in hae is only one parameter of integer type his used low we set the vale forthe cu : TinePicker sinpletinePickers(TinePicker) indVieutyloche 16 sieplorioopionen) i 1 Anitiate » tine picker 77 et the veloe for current hour SiapleTinePicker.setcurrenthour(5); // before A level 20 SimpleTimePicker. setHour(s); // from API level 23 ees currentMinute): This method is used to set the current minutes in a picker.setMinute(Integer minute): setCurrentMinute() method was deprecated in API level 23. From API level 23 we have to use setMinute(Integer minute). In this method there is only one parameter of integer type which set the value for minutes. Below we set the 35 value for the current minutes. TimePicker simpleTimePicker=(TimePicker) findViewById(R.id. simpleTimePicker); // initiate a time picker // set the value for current hours simpleTimePicker.setCurrentMinute(35); // before API level 23 simpleTimePicker.setMinute(35); // from API level 23 getCurrentMinute(): This method is used to get the current minutes from a time picker. getMinute(: getCurrentMinute) method was deprecated in API level 23. From apt level 23 we have to JS. “ use getMinute(). This method returns an integer value, Below we get the value of minutes from a time picker. TimePicker simpleTimePicker = (TimePAcker)#indViewById(R.id. simpleTimePicker) // Anitiate a tine picker int minutes = sinpleTinePicker.getcurrentMinute(); _// before APT level 23 // after API level 23 int minutes = simpleTimePicker.getMinute(); -View): This method is used to set the mode of the Time picker V4. setis24HourView(Boolean is24Hour tither 24 hour mode or AM/PM mode. In this method we seta Boolean value either true or false. True value indicate 24 hour mode and false value indicate AM/PM mode, Below we set the current mode of the time picker. Timepicker simpleTinePicker = (TinePicker)findV Se MewBy1d(R. 4d. sAmpleTimePicker) 5 1/ Anitiate a time picker J] set 24 hours mode for the time picker current mode of the time picker, This eis set. Below we get the current mode of he simpleTinePicker.setIs24Hourview(true); the iszaHourview(: This method is used to check 1 returns true fits 24 hour mode or false if AM/PM mod AmpleTimePicker)s Ad. simpleTimePicker = (rimePicker)FindViewSyZ4(R.Ad.s sta nodeesinpnerinepicker sszanourviev()s//check the current odegetting hour ofthe day ang first is for TimePicker, second for lta ‘minutes after changing the time of the time picker. ae listener of a time picker. fy sheet ‘SimpleTimePicker (TimePicker) Findview#yZd(R id aS, yee sa ontimechangedListener() { _-setOnTimeChangedListener(new TimePicker. v view, int hourofday, int minute) { public void onTimechanged( TimePicke! ) ne ae ow let us discuss about the attributes that helps us to configure a TimePicker in the xml file 4% id: The id is an attribute used to uniquely identify a time picker. ‘ : /2. timePickerMode: The time picker mode is an attribute of time picker used to set the mode eitherspinner or clock. Default mode is clock but this mode is no Jonger used after API level 21, 5 from API level 21 we have to set the mode to spinner. Below we set the mode to spinner. \B, background: The background attribute is used to set the background of a TimePicker, We can seta color or a drawable image in the background. We can also set the background color EB peeaticaly means in Java class. Below we set the orange color for the background of a time androic layout_height=' ‘wrap_content” android: timePickerMode=" spini o” Kgrounds"#F88F00" />From Everand