UNIT - IV Designing User Interface with View 4.1 |The Android View = GUI components are all types of views-behind the they are all subclasses. of the study view.View class. = This means that all of the GUI components in your user interface have attributes and behavior in + They instance, and you get te say how tall or wide they should be. Each of the GUI components you use in your user interface takes this basic functionality and extends it can all be displayed on the screen, for *The Android SDK has a Java package named study view. = This package contains a number of interfaces and classes related to drawing on the screen. ‘+ However, when we refer to the View object, we actually refer to only one of the classes within this package : the study.view. View class, The View class is the basic user interface building Dlock within Android, ‘It represents a rectangular portion of the screen. The View class serves as the base class for nearly all the user interface controls and. layouts. within the Android SDK. +A view is a widget that has an appearance on screen. It is derived from the base class study.view.View. «+ There are three types 1. Basie views - Commonly used views, such as the TextView, Edit Text, and Button views 2. Picker views - Views that enable users to select from a list, such asthe TimePicker and DatePicker views 3. List views - Views that display a long list of items, such as the ListView and the SpirnerView views 4.1.1 | Basic Views Some of the basic views that can be used to design Ul of Android application are : + Text View Which is used to display the text to the user. Text View is a user interface control android view. View is the base “lass of al hs GUI components GRUDEA VIN] YOU Use fo develop your apps. ‘anarola widget Textview iS a drect subcless of the iow clas, Asginner is ¢ ‘ype of View [android.widget ToxtViow] android widget Spinner android widget Eatet ‘android widget Button Fig. 4.1.1 Hierarchy of view class @ D‘Mobite Application Development Desixping User Iverlace with View t Text : Edit Text is a user interface control which is used to allow the user to enter or modify the text Android Auto Complete Text View : In android, Auto Complete Text View is an editable text view which is used to show the list of suggestions based oon the user typing text. The list of suggestions will be shown as a dropdown menu from which the uuser can choose an item to replace the content of textbox, = Button : Button is a user interface control which is used to perform an action when the user click or tap on it ‘= lmage Button : Image Button is a user interface control which is used to display a button with image to perform an action when user elick or tap on it, Generally, the Image button in android looks similar es regular Button and perform the actions same as regular button but only difference is for image button we will add an image instead of text. Check Box = Checkbox is a two states button that can be either checked or unchecked. + Toggle Button ; Toggle Button is a user interface control which is used to display ON (Checked) or OFF (Unchecked) states as a button with a light indicator «Radio Button : Radio Button is a two states button that can be either checked or unchecked and it cannot be unchecked once it is checked, + Radio Group : Radio Group is used to group one or more radio buttons into separate groups based on ‘our requirements. In case if we group radio butions using radio group, at a time only one item can be selected from the group of radio buttons. 44.4.1] Text View ‘ln android, Text View is a user interface control which is used to set and display the text to the user based on our requirements. «The Text View control will act as like label control and it wontt allow users to edit the text ‘+n android, we can create a Text View control in two ways either in XML layout file or create it in Activity file programmatically. «Text View is a user interface control which is used to display the text to the user. android viewView f ‘android widget TexView| 1 44.2 Text 4.1.1.2] Declare Ul Elements in XML When you create a new Android project, Android Studio always creates the act exxml file which contains a element: < “ 4.1.2 | Edit Text +A Edit Text is an overlay aver Text View that configures itself to be editable. ‘It is the predefined subclass of Text View that includes rich editing capabilities. androdviewView ‘android widget TedView| enidrcid widget Edited Fig. 4.1.3 Edit toxt view +In Android, Fdit Text isa standard entry widget in android apps. +t is an overlay over Text View that configures itselé to be editable TECHNICAL PUBLIGATIONS® - An up trust for Fnomeagepeg Mobile Application Development aa Designing User Interface with View + Edit Text is a subclass of Text View with text editing operations + We often use Edit Text in our applications in order to provide an input or text field, especially in forms, “+ A Edit Text is an overlay over Text View that configures itself to be editable + It is the predefined subclass of Text View that includes rich editing capabilities + Edit Text is @ user interface control which is used to allow the user to enter or modify the text + Example : Modifying the Mair.axml to see the effect 11.0" encoding="ute-3'7 3. Text : text attribute is used to set the text in a Edit Text. We can set the text in xml as well as in the java class. Setting the text in xml Beit Tent study:ld="@+ia/stmpleBlt Text? study-layout_width="fl_pr studyslayout height="wrap_ ent! study:layout_conterTaParont~"true! stuay-tex:='Subject"/> Setting text in Edit Text In Java class : example Edit Text Edit Text = (BAit Tex)indViewBytd(R id simpleBair Text; Edit Text setText('Subiect): 4. TextColor : textColor attribute is used to set the text color of a text edit text, Color value is in the form of "Fargb", “érgb", “#rmggbb", or “taarrggbb". example < If you observe above code snippet. ToggleButton control and setting ToggleButton state ON using study:checked attribute in xml layout file. Create ToggleButton Control in Activity File In android, we can create ToggleButton contro] programmatically in activity file based on requirements. Following is the example of creating ToggleButton control dynamically in activity file RelativeLayout layout = (RelativeLavout)andViewByld(R1a.r layout) ‘ToggleButton th = new ToggloButton(:kis) TECHNICAL PUBLICATIONS® An up trust for knowledgeMobile Application Development 00 Desiring User Iceriace with View th.set Text OnCOFF"); th.cetTostOnCON’ th,setChecked(trus) layout adeViow (th): ‘Button in XML layu it file or programmatically in activity file based on our This shows Toge requirements, Android ToggleButton Control Attributes Following are the some of commonly used attributes related to ToggleButton control in android applications = /evudy.2upport-conetraint.ConstraintLayout Let's write the code to check which toggle button is ON/OFF. package oxample.uil.togglobatton: import study.support. AppCompatactivi:y: Import study.oe Bundle; import study. view View: Import etudy.widlgot Button Import stuay.widger. Toast; lmport study. widget. ToggleButten; public class MalnAcuvity extends AppCompatActivity { ‘private ToggleButton teggleButton1, toggleButten2; private Button butzonsubuat; @Overriee protecied void onCreate(Bundle savedlnstancestate) { super. onCreata(savedinstanceState) ‘se:ConteniView(Fulayout.act_ main), add istensrOnButtonChek( |: } public void adaiListenorOniuttonCiiek(){ //Oesting the ToggieButton and Button instance from the layout xin file togglaButtont =(TogglaButton)find ViewByld(R ic teggleButton): toggleButton2= (ToggleBution)indViewSyle(Rid toggleButton2}; buttonSubmit=(Button|fine Viswhyla(R ie button); /}/Perforrsing action on button click buttonSubmit setOnClickListenerinevr View OnCiickL.istener( QOverice Designing User Interface with View TECHNICAL PUBLICATIONS® - An up thrust fr krowiedyeMobile cation Developanent +n Designing User Interface with View public voial onClick View view) { StringBuilder result = new StringBuilder(); result append|'TogglaButtont : ") appand|toggleButton1 getToxt() result. appendl"\ToggleButton2 ;*)append toygleButton?, get Text ‘/oisplaying the message in toast Toast makeToxt(gotpplicationContoxt), result toString(),Toast LENGTH LONG), show) b , Radio Button +A radio button is a form clement that allows the user to select one option from a rang Radio buttons are created with the HTML tag, of options. «Ra tons canbe mad isi lam lent hy and ln tom st of he pg anni lec unchecked once it is checked. Fig. 4.1.7 Radio button + These let you display multiple options to the ie eee ‘anorola view View user. The user can select a single option. + Radio Buttons are used when you want to ; allow only one choice from a list of possible ‘android widget TeaView choices. For example, you might ask users to choose tea oF cofiee. Out of those two choices, 7 the user can only select one, ‘android widget ution + Radio Button is a two states button which is either checked or unchecked, : + If a single radio button is unchecked, we can ancroia widget click it to make checked radio button, Once a Guumnne radio button is checked, it cannot be marked as unchecked by user, z Radio Button is generally used with, ‘android widget RadioGroup. RadioButton + Radio Group contains several radio buttons, ‘marking one ractio button as checked makes all 4.1.8 Radio button layout other radio butions as unchecked. Example Female TECHNICAL PUBLICATIONS® - An up thrust for knowledge44 Designing User Interface with View Onse Byrenae Attributes of radio button In study : Application Devolapnen 1, id: id is an attribute used to uniquely identify a radio button. 2. checked ; checked attribute in radio bution is used to set the current state of a radio button. We ‘an set it either true or false where true shows the checked state and false shows unchecked state of a radio bution, As usual default value of checked attribute is false. We can also set the current state in JAVA. Setting, checked State OF Radio Button In Java Class: Below code set the current state of Radio Button to checked programmatically. /*Aaa in Oneceate() funtion efter aetContentView()*/ initiate @ racio button RadioButton simploRadioButton = (RadieButton} find ViewByl6(R id simpleRadioButtor): 1/20t the current state of a radio button simpleRadioButton.setGheckedttrue) 3. text: text attribute is used to sot the text in a radio button. We can sot the text both ways either in XML of in JAVA class. Setting text of RadioButton In Java class /*Add in Oncreate() funtion after setCententView0*/ RadioBurton simpleRadioButton= (RadioButton) findViowPyld(R id simpleRadioButten); simpleRadioButton.setText("t am « radiobutton’)// displayed text of redio button 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 etc. 5. textColor : textColor attribute is used to set the text color of a radio button. Color value is in the form of "‘argb", "érgb’, "#rrggbb’, or “taarrggbb". Setting texiColor of RadioButton text In Java class: /* Aad in Onereato() funtion after 20tCententView()*/ RadioButton simpleRadieButton ~ (RadioButton) findViewByld[R.id simpleRadioButton}i/ initiate radio button simpleRadieButtoa serTextColo1(Colot RED); //red color for displayed text of radio bution lextSize attribute is used to set the size of the tex! of a radio button, We can set the text size in sp(scale independent pixel} or dp(dlensity pixel) 6. textSize Setting textsize Of RadioButton Text In Java class: /*Ada in Oncreate() funtion after setContentView0"/ RadioButton simpleRadioButton ~ (RadioButton) findViewByld[R id.cimpleRadioButton|; /)initiato radio bution simpleRadioButton sotTextSize(25);// Sot 25sp displayed text size of radio button 7. textStyle : toxtStyle attribute is used to sot the text style of the text of a radio button, The possible text styles are bold, italic and normal. If we need to use two or more styles for a text view then ‘operator is used for that: 8. background : background attribute is used to set the background of a radio button, We can set a color or a drawable in the background of a radio button, Setting background of radioButton in java class "Adi in Oncreated funtion after setContentView0"/ RadioButton simpleRadiaButton = (RadioButton) findViewByie(R id simplaRadioButton); simpleRadioButton.setBachgroundColor{Color BLACK), TECHNICAL PUBLICATIONS® - An up trust fr krowledgeMobile Application Development 9. padding : padding attribute is used to set the padding from left, right, top or bottom. + paddingRight : Set the padding from the right side of the radio button + paddingLeft : Set the padding from the left side of the radio button, + paddingTop : Set the padding from the top side of the radio button + paddingBottom : Set the padding from the bottom side of the radio button, + Padding : Set the padding from the all side's of the radio button. 10. drawableBottom, drawableTop, drawableLeft And drawableRight : These attribute draw the drawable to the below of the text of RadioButton, For Example Seectyur seer Fig. 4.1.9 Radio button In radio group his image shows 4 options of subjects for a question. In this, each mentioned subject is a Radio Button and all the 4 subjects are together enclosed in a Radio Group. 4A7 Radio Group ‘=Radio Group is used to group one or more radio Duttons into separate based on our requirements. ‘groups ‘eIn case if we group radio buttons using radio group, at @ time only one item can be selected from the group of radio buttons. Here's how to use it: 1. Go to Insert > Form Items > Radio Button Group, This opens Radio Button Group window. the Insert Enter 2 name for the group. This will appear in’ your form results. Designing User Interface with View 3. Enter your radio button items, 4, Click Add to add more item-value pairs to your list. 5. Click OK Example for radio button : In this example, we are going to implement single radio button separately as well as radio button in RadioGroup. ‘peml version="1.0" encoding—"uth-2'2> ‘ - study:layont_height: study'layout_marginTop—"20dp* study:background="#BEB894" /> <(RadioGroup> Burton study-layout_width="wrap_ent! studylayout height="wrap_cnt” studystext="Show Selected” study:id="@+1e/button’ udy:enClick~‘eneliskbuttonMethed* study layout. gravity="center horizontal’ /> package radu import study. support AppCompatActivity; import stuay.os.bundle: import study.view. View import study. widget Button; impor study. widget RadioButton; import study. widget RadioGroup: import tudy.wwidget Toast public class MainAcuivty extends AppCompatactivity { atton button: RadicBurton gendoradioButton; RadioGroup radioGioup (@override Designing User Interface with View TECHNICAL PUBLICATIONS® . An up trust for knowledge‘Mobite Application Development 417 418 protected void onCreate(Bundle savedinstancestate) { super onCreate(savedinstancaStsts) seiContentView(Rlayout act_ main); radioGroup: + public void enclickbuttonMethodi(View v}{ int selectedid radioGroup.getCheckedRadiobuttontd(); ‘gendorradioBution = (RadioButton) tindviewByid(selectedta} iMlscloctodld==-1){ ‘Toast.makeText(MlainActivity this, Nothing selected, y else ‘Teast. makesToxt(Main Activity tis, } + y Output Check Box * Check Box belongs to study.widget. Check Box class, + Android Check Box class is the subclass of Compound Button class. + It is generally used in a place where user can select ‘one or more than choices from a given list of choices. + Checkbox is a two states button that can be cither checked or unchecked. * Checkboxes lot you display multiple options to users. + They can then select whichever options they want, + Each of the checkboxes can be checked or unchecked independently of any others. .adioCroup|findViewByld(R id radioGroup): foast LENGTH_SHORT) show) lorradioButton getText(), Tosst LENGTH _SHORT) show(); ‘android view Viow i ‘ancroid.widget.TentVien, a ancraid widget Button android widget Compounauton i android widget CheckBox Fig. 4.1.10 Check box layout TECHNICAL PUBLIGATIONS® - An up trust for knoweage Inverface with ViewMobile Application Developenent fad Designing User Interface with View applayout_constraintTop_toBottomOf'@tid tee Here we have two checkboxes. foheckBow [> Users can choose tea, come® both tea and coffee o nether. ‘ JoneckBox /> ‘study. support. constraint. Constrain:Layout ~ smins:etudy =u!" xnlns app="ex (hu aph/res-auto! Lot's write the code to check wihich toggle button is mins tools="url" ONIOFF. studyslayout_width='metoh_pr package example.url checkbox, studyslayout_beight="match_pr* {import study. support. AppCompatActivty tools:context="utt'> import study.os Bundle; 5. Widget ProgressBar-Large Inverse and then manage the visibility in the activity 6, Widget ProgressBar Small.Inverse 1/00 come elicit ox como loading wo need to wait fr. Priggesisai'ph = (Prograasiee) To apply style, you can use below xml settings. ‘incViewSyla(R ic. pbLoading) sTexView stuayd="@ +artextview13" etudy:layout_width="match pe! stadyslayout_height='wrap ext! study:text='Common Horizontal Progress Bar” study:teseSize='2dp"/ ProgressBar studyid="@-+Hd/progressBarl" etylo~'@otudy:style/ Widget ProgressBar Horizontal’ ‘study:max="100 study:layout_widt stadyslayout height: 4, Customize Horizontal Progress Bar Example ‘wrap ent /> stydy/result/leut/prog xml I+ Settings for custom horizontal progress bat ackoround, progress and secandProgress. >