 Good morning, I am Raiha Sandalwala, I am going to take a session on user interface. So, before proceeding let us go through the content. First is introduction to user interface, layouts, user interface controls, menus and tools, notifications, other interesting user interfaces. In this we will cover list view, dialogues, date picker and sliding draw. So, now let us start with our first topic, introduction to user interface. User interface is one of the most important features of Android and it is also something which consumes a lot of time. This is because from the user's point of view we want our applications to be captivating. So, now what is user interface? It is anything and everything that the user sees on the screen and can interact with. So, Android provides a various pre-built components like layouts which provide a uniform look and feel in the application. There are also some UI controls like buttons like which we have seen in the previous session, text boxes and the check boxes, radio buttons. These are the common UI controls which we see on the registration forms on the various websites. Usually when we register to Facebook and all we see these. There are also dialogues, notifications and menus. So, we will see them in the later on. Now there are two approaches to implement user interface. First is we write the Java, first is procedural and the second is declarative. In the procedural approach we write the Java code and in declarative approach we write XML code which is similar to the HTML of a web page. So, the best practice is to start with the XML file and declare most of the user interface and then switch to the Java code to implement the user interface logic. So, we will implementing the best approach in our applications. So, we will see our next topic that are Android layouts. What is a layout? A layout is a systematic arrangement of components on the screen. It provides a uniform look and feel to the applications. So, there are again two ways of declaring layouts, one in the XML file that we just saw and another programmatically. And also again the convenient method is to start with the XML file and then switch to the Java code. Now, we will see what are the types of layouts. Mainly there are four types of layouts, linear layout, table layout, grid layout and relative layout. Linear layout is again subdivided into two categories, horizontal layout and vertical layout. So, we will see coding of all the four layouts one by one. Before that let us see the snapshot. This is the linear layout. Again in linear layout this is the vertical type of layout. So, the components are arranged in the vertical order one by one, it can also be arranged horizontally. So, in linear layout everything is arranged in the line, either vertical or horizontal. So, this is the output which we are going to achieve, which we want to achieve. So, let us see the code for it. So, here are lot of applications, I have already made all these applications. Now, the first application is linear layout. This is the one linear vertical, let me just open this. This is the Java code. We do not have any work of the Java code here right now. So, we will go to the layout folder. So, this is the XML file of the linear layout application, I am sorry this is let me by default actually what happens is when we create a new application, the application is in relative layout. So, you can just edit it, here it gives me a building error, this because here down the closing tab is again of relative layout. So, I have to just edit it for the linear layout, now it is ok. So, this is the relative layout tag in this layout width and height are defined, which is will be uniform for all the whole application. Now here I am defining four buttons, these are the four buttons, I will scroll it slowly because yesterday we got the feedback that it is too fast ok. So, these are the four buttons ID as we have seen in the previous session, it has to be different unique for all the buttons. So, that when we use this ID for instantiating the button in the Java code, it has to be unique for each button. Now these are the various parameters of the button, layout width and layout height for defining the width and height of the button, wrap content means that the text which is written on the button, it will coordinate with the size of the button, that is wrap content means the size of the button will be adjusted according to the text written on it. Align parent left and align parent top means that the button will be aligned to the left top of the screen, text is 1.1 we can again edit it. So, these are the similar kind of parameters, now let us look at a Java file, we have done nothing in the Java file, it is same these are the two predefined methods ok. Now here we see inflator, inflator is used to instantiate the XML file, now we will see the output in the emulator, usually the output takes a lot of time. So, what I have done is I have already installed all the applications ok, it is not showing I will again do it once, once again I will run this in the project explorer linear vertical layout, run as android application ok. So, since we are running it for the first time it will take some time, also I forgot to show you the graphical view, this is the XML file and here is the graphical view ok, it is showing linear vertical, but the buttons are here in horizontal order. Let me change this, yeah when we click on this button set vertical orientation, all this will come in vertical order. Let me again run this, run this android application. Save changes, yes we have just now done something and so it is as prompts every time to save the changes, yes this is the emulator. So, the output will be same as what we saw in the graphical view. So, let us move to our slides, I will again show the output after some time when it ok, I think it is showing something here. So, this is the output in the emulator, all the buttons are below each one another. So, this is a simple thing just shows the layout of the various components. Now, we see the next type of layout. So, this is a snapshot of the grid layout. In grid layout the components are arranged in the forms of rows and columns. So, these are the two rows and the four columns. So, here one thing to be noted is this button 1.3 is slightly longer than the other buttons and the button just below it 2.3, it does not occupy the whole space of the column. That is it does not follow the match parent property, it follows wrap content which we have just seen in the previous layout. So, this is something to be noted. Now, let us see it is again the coding which we have seen. I am closing this application. Now, I will start grid layout, RES folder in layout, this is the grid layout. Let me zoom this. So, this is the graphical view of the grid layout, the similar kind of output we will be seeing. So, this is the XML file. Here grid layout tag is there, again there are some buttons. I am scrolling them down slowly as per the feedback. There will be eight buttons, all the buttons will have different ID. So, these are the eight buttons. I am not showing all of them. So, now let us see their parameters. Column count equal to 9 means maximum, we can have 9 columns here. This is style, button style small which means the small buttons will appear here. We can also add some other features in the styling like color and color of the background of the button or color of the button text. We can add all these styles. Layout column equal to 0 and layout row equal to 0, these two which means that this particular button is in the 0th column and in the 0th row. Layout gravity equal to left means this button will be aligned towards the left. Text is 1.1 that is 1.1 will be displayed on the text. Again this is the second button, different ID. Layout column equal to 2 which means that this button is in second column and 0th row. Again layout gravity equal to left means aligned towards the left. So, since the arrangement is in the form of rows and columns here, we define which row and which column starts from 0, index starts from 0, 0, 0. Again here we see something different. Layout width is equal to 88 dp. Now dp is density pixel. It is one of the units of defining the width or even the height of the button. Column equal to 4, row equal to 0. That is this is in 4th column and 0th row. We have seen the graphical view. Now let us see the output. Actually I have already compiled all these applications once. So, I am trying that we see all here. I click on the installed ones and show you so that we do not waste much time. I found here grid layout. So, I am clicking on this grid layout and here we see the output same as what we saw in the graphical view. So, when we click on any of the icon of APK files, we see the application. Now again we see the next type of layout grid layout. After that it comes stable layout. So, here also the components are arranged in the forms of rows and columns. These are two rows and the four columns. Here the difference is that 1.3 is again longer than the other buttons, but the button 2.3 occupies whole of the space of the column unlike the previous one. Here it did not occupy whole space. Here it is occupying the whole space. So, this is implementing a match parent property that is the it is matching the width of the parent here. Now let us see the code. I am closing this grid layout now. Here is stable layout. I have done no coding here. I am just showing the arrangement of various components. There is no Java coding in these layouts. So, this is table layout. This is the graphical view. Same thing we will be seeing in the output also. Now let us see the XML file. This is the XML file, table layout tag. Here there is one difference that all the components will be specified in the form of rows. So, this is the first row. The first row contains this button 1, button 2, button 3 and button 4. I will be going slow. So, here is the end of the first tag that is first row ends here with the four buttons. So, this is again table row tag that is here from here we start the next row. So, we have to define various rows and in that the components. I am just scrolling down so that you can see the whole code. So, this is the end of table row and the table layout tag. Now we will see the various parameters ID we have seen width and height same. I do not think there is any other different parameter here. Graphical layout we have seen. Now we will see the output. So, back I click on menu and I can see all the applications that are already compiled and installed. So, we have seen table layout here. So, this is the output for table layout same as what we saw in the snapshot and in graphical view. Now let us switch to the fourth and the last type of layout that is the relative layout. This is the relative layout. Here there is no fixed pattern of the components. We can drag and drop them anywhere. So, by default an application when we create an application it is in relative layout. It follows this relative layout. So, let us see an eclipse ID the XML file. Here I am opening the relative layout. So, let me zoom. So, this is the graphical view of the relative layout application. We can just drag and drop the things anywhere, anywhere. I can do it here also. No effect on the output will come. I mean output will be different, but no change in the properties as such. So, this is the XML file for relative layout. Here since there is no rows and columns in particularly which we define. So, the positions of the various parameters are defined relative to each other. One of the button will be act as a parent button and all the other buttons or all the other components will be in related to that position will show they will have their positions in terms of that button. So, this is relative layout tag, button ID button 3 here. I am just showing you the code. So, width and height we have seen, align, top we have seen, margin equal to 33 dp that is this button. It has top margin of 33 density pixel. Text is 3.1. Again, align parent top equal to true which means this button acts as a parent button. It has right margin of 26 density pixels, top margin of 29 density pixel, also 2 left of ID button 2 that is this button 1 is towards the left of button 2. So, top margin is 29 density pixel. We have seen the graphical view. Now, let us see the output in the emulator. Again, I go back relative layout. So, this is the output in the emulator. Now, here this is all about layouts. Save changes yes, does not matter. Now, we go to our next topic, Android UI controls. These are the few basic input controls. As I told earlier, these are the interactive components of an application. We see them when we usually fill a form on the websites. So, we will see these components one by one in the form of a form. I have created a registration form. So, we will see all these components. I will explain little bit here. Text view and edit text are together known as text fields. In text view is a kind of label. In edit text, we can write something that is name or something else. Button has a text or it can also contain an icon. When we click on this button, something happens. So, we have to write the Java code for this. Then radio buttons, we can select only one option from a given set of option radio button. Checkboxes, we can select multiple options from a given set of options in the checkbox. Spinner is a kind of drop down list. So, we will see them one by one. Let us first see the snapshot of the form, which I am going to show. This is the snapshot. This first name, last name, gender, country and occupation. These all are the text view or you can say kind of labels. Here this is an edit text. We can write here. Here these are the checkboxes, spinners and sorry radio buttons, spinner, checkboxes and these are again the two buttons. So, we will see its code. From here, there is little bit of Java code in every application. So, this is the Java code. Let me also open the XML file, form.xml. So, we will first see the XML file. Here is the XML file. So, we have defined table layout here. First row contains edit text and text view as we shown the snapshot. EMS is also kind of unit for defining the width of the edit text. So, this is the second row. I am just scrolling down slowly. So, you can view the whole code. Second row, end of second row. In the same way, there are all the other rows here radio group that is radio buttons are defined. So, now let us see the Java code here. Now, here we have defined the various UI controls. These are the variables, actually not the objects, just typing mistakes. So, here we define various variables of the classes which we have used. Here is the string of array of strings. In this, we have declared various country names. So, we will see what is the use of this array of strings. Here we instantiate the edit text and the button, also spinner. Now, event handling is done on spinner here in this code. What is happening is, it is just array adapter is used to pull the content from the string of array. Sorry, array of strings, sorry. So, here that the array we saw, array adapter will pull the contents from this array into the spinner. This is the whole code. Now, event handling is done on the reset button. Here we call onclick method. Onclick is a callback method of the event listener interface. Event listener is a interface of view class. So, here this is the inner class which she was telling about in the previous session which Pradhania was telling about. So, here we define the onclick method. Here what is happening is, in reset button when we click on the reset button, the form will reset. That is, it will come back to its original value where nothing was written in the form. So, this is all about reset button. Now, submit button. Usually what happens is when we click on submit button, the form is reset. Also, all the values are stored in the database when we click on submit button. So, here we kind of assume that all the values will be stored in database and again on clicking submit button also here, the form will reset. So, this is the whole code for submit button. Now, these are the two empty methods. We have to write these methods because we are implementing event listener interface. So, these are the methods in event listener interface which we have to write. So, now, let us see the output in the emulator. There is form, lot of applications are installed here. So, let me search. Yes, here is the form. I hope you are visible here. This is text view, edit text I am writing. Here first name suppose Android, second name workshop for example. Now, this is radio button. I am selecting female, spinner. Here contains the list of all the countries. We can drag up and down to view the whole list. I am selecting India here. Now, these are the two check boxes. I hope these are visible, student as well as teacher. So, the difference between radio button and check boxes is this. In radio button we can select only one option at a time and check boxes multiple options. So, we click on submit button and the form is again reset. Same will happen when we click on reset button. So, these are all about UI controls. This is the form snapshot of the filled form. Now, we go to our next topic that is menus and toast. What is a menu? This is a common user interface. In any of the electronic device either mobile or tablet, this is the most common button which we will see every device contains the menu button. When we click on this menu button, we see the list of all the applications that are stored in our device. So, everyone who has a mobile or a tablet must have gone through this option at least. Types of menu, options menu. This is a primary collection of menu items. So, we use options menu when we have to globally effect an application. That is when we have to search compose mail or do some kind of settings. Now, next is pop-up menu. A pop-up menu displays list of items in a vertical list. So, it is a kind of list which displays in a form of a pop-up. So, these are the two types of menus. Now, we will see what a toast is. A toast provides a simple feedback operation when we click on a button, for example, or any of the options in the menu. Feedback about an operation will rise. So, if we click on any of this, we will see this toast. It is a kind of tool tip, we can say. So, now let us see the snapshot of the options menu. So, this is the snapshot of the options menu. Again, I will not show all the snapshots this is the snapshot for the pop-up menu. So, this we are going to achieve in our output. Now, let us see the coding in our eclipse ID for both these menus. So, I am closing this android menus. This is the Java file layout. Here we have two XML files main dot XML and menu dot XML. So, now let us see what it has main dot XML has. In main dot XML, this is linear layout is defined and a simple text view is there, nothing else. This is the graphical view. Click on menu to show menu items. Only this content is there in the main dot XML file. Now, let us see menu dot XML. So, this is the menu dot XML file. Here six items are defined. I am just showing you the code first. So, here are the six items with these three parameters. First is the ID which has to be different. Item is basically when we click on the options, we options button, we see the various options. So, those options are the items. So, now android icon. Icon is a small picture which comes with the text. Then title here this bookmark. So, this text will be written when we see the options, similar kinds of parameters ID, icon and title ID all are different for all the six items here. Icon is optional, not necessary to mention. So, now let us see the Java code. This is the Java file. Menu inflator is used to instantiate the menu dot XML file. Now, here event handling is done for the items. So, which case is used here. When we click on the menu button, we will see six options and when we click on any of them a toast will appear. We will see what is a toast is it will be more clear when we see the output. So, a feedback of what button we have pressed will appear in the toast. Suppose we press the bookmark button. So, the text bookmark is selected will appear in the toast. So, similar kind of cases with different IDs and text scrolling just to show the code. This is the whole code. Now let us see the output of this options menu in the emulator. See all these are already compiled. So, I can see on the emulator. You will have to run it once to see all these options. Android menus. Click on the menu to show menu items. I am clicking on this menu button here. So, I see these six options, these six items. When I click on the save, save is selected. So, this save is selected is a toast. Again I will show you when I click on menu these six options bookmark, bookmark is selected. So, this is all about options menu. Now we will see what is the pop-up menu. So, this is the snapshot. I will show you the eclipse code now. Menu pop-up. This is the Java file. Here again two XML files main dot XML and menu layout dot XML. So, here in main dot XML let us see what is there. In main dot XML there is a button. Layout gravity equal to center which means that this button is placed in the center. Top margin is 42 DP. DIP is again density pixel nothing else. So, in graphical view I hope it is visible. Let me. This is the button showing show pop-up text. This is the graphical view. Now let us see the Java code. Here three variables are again declared of these classes. Layout inflator pop-up window and view. Layout inflator is used to instantiate the XML file. Now here event handling is done on the pop-up window. This is show pop-up method. When we click on the what happens? When we click on the button the pop-up window appears that is the list of the various options. This is the event handling. Here width and height of the pop-up window is declared. We can also declare this in the XML file. While declaring layouts while studying about layouts we saw that we can declare them in two ways. One in XML file and other programmatically. So layout parameters can also be declared programmatically. Width and height we are declaring defining here. These are again three methods for the three options. I guess we have missed the menu layout XML. We have seen that also before the Java proceeding with the Java code. Here three options will be appear will appear when we click on the button pop-up menu. These will be the three options. This is the XML file menu layout dot XML. So here again the second method of on click, second way of implementing on click method is here. When we click on any one of these buttons a toast will, sorry options a toast will appear. This is the text view, linear layout. Here is the background. The various color codes are there fixed color codes in the android. So you can use any of them. This is the Java code text a toast will appear. Here the code is available. We have uploaded the code in Moodle as well as GitHub links or videos are also there. All are there on the GitHub. So you can try the code yourself. I will see the output in the emulator pop-up menu, show pop-up. These three options when we click on any of them a toast will appear tabbed search. This is the toast. Again I can show you share, tabbed share. So this is all about menus. Now probably I will have to rush through the session. Now next is notifications. So what are notifications? Usually when we have, when we get a missed call or a message in our phones or tablets we get a notification for that. So these were the, these are the notifications. We will see the application. Before that this is the snapshot of the notification. These will be implementing. I have actually made two applications for the notification. I will quickly show them now. In one there will be only a text that is you can continue with a work. In the second notification I will be showing a website. So and eclipse notification demo. So I will only explain the Java code now, not much of the XML file from here. This is the XML file and the graphical view of that. It contains only one button, nothing else. So this is the Java code. Here button B is declared and instantiated, event handling on the button. Notification is manager is used to create a notification. A context of the current activity what is currently going on in the application. Then title and details of the notification. Intent is used to switch to the next activity. Here we can see this line. This means that this particular function is deprecated which means something else better is available here. But if we use the older version also it will not show error. It will just show a warning that this particular method is deprecated. Here suppress warning deprecation it will show nothing else. So since I made the application in 4.0.3 and now I am compiling it in 4.2 that is why this deprecation warning is come. Now we will see the output in the emulator. Pending intent gives the gives a token to the foreign application. In this case it will give a token to the notification manager. And with the help of intent we will switch to the details of the notification. We will see what notify. When I click on this button send notification, I can see the notification here. When I drag this down I have the notification. You have been notified. Sorry. You have been notified. Continue with what you are doing. I hope it is visible. Now again if I close this I click on this it is closed and I come back to the original screen. So this is the first example. Now let us see the second one. In second one that is this one I am showing an website in the notification. This is because it is a kind of push message that we receive on our mobile phones. It contains the links of various websites. So in notification itself we can have links of various websites. This is the graphical view. I am rushing now. So this is the graphical view of the XML file. Now the Java code is more or less similar. It is just that here I am defining a string which contains the URL of a website. Here almost more or less the similar kind of code. So you can try it. I am showing you the output straightaway in the emulator and write notification. So when we click on this button send the notification. Here the notification will appear. When we click on this the URL of the website here the website will be opened. This will take a little time. When we give the URL the emulator takes little time. So this is the IIT Bombay website. So this website will be shown. So this is all about notifications. Now our next topic list view. List view is a view group. It displays the scrollable items. Here adapter is used to pull the content from an array or database. We have to use an array in the Java code or code for the database so that we can pull the content from that array to the list view. Now let us see the snapshot how it looks like. This is the output of the list view. This is what we have to achieve. Here are the list of fruits. Now let us see in the eclipse ID the code here some error appeared. Already we have seen this so not to bother. List view also the layout file. In layout file this is the graphical view. This is the list view widget. List view widget comes in the composite category. Here we can just drag and drop it from here. So this is the list view. It is not only used to display just to display the items it has many other applications also. So I am showing you just the basic one. This is the Java code. Here this is the function list display. Now let us go to the function. Before that here I am declaring an array also. Array of fruits. Naming name fruits I am declaring an instantiating here. Now in this method I am adding the various names of the fruits to the fruits array again. So these items apple will be added to fruit array. Here all the five components will be added to here to the fruits array. Now the code for the list view list view is instantiated here and array adapter is used to pull the content from the array to the list view. So now let us see the output. I am going to the home screen. Menu from here. So let me just search the list view here. Here it is. So this is the list view. As I said you can use list view in many other complex applications also. Now let us go to our next topic. Dialogs in Android. Now what are dialogues? Dialog is a small window. Usually when we close any text editor without saving it so a dialogue box appears that if you want to save it. Here also when I was about to close or run the application a dialogue box appeared that do you want to save this. So these are the basic examples of dialogue box. Let us see the snapshot first. Here is the snapshot. A button is there. When we will click on this button an alert box will appear. So let us see the Java code quickly dialogue box. Also the layout file. This is the layout file graphical view. Here it contains a simple button nothing else. So this is the Java file. I am just showing you the code alert dialog builder is used to create the dialogue. When we click on yes two options will appear when the when we click on show alert box. Alert box will appear on that two messages will be there. Two buttons will be there sorry yes or no. So we will see what will happen on yes and no in the output. This is just the code for it. It is available. So let me search where is the dialogue box. Here we this is the button show alert box. When we click on this here we get a dialogue box. It says click yes to exit. So when we will click on yes this application will be closed. So before closing let me click on no. When we click on no what happens is nothing will happen. We will again go back to the previous screen. When we click on yes this application will be closed. So we go back to the home screen. This is all about dialogue box. Now the next topic date picker. Date picker is simply used to set date in our application. It is a simple widget. I will now not be showing the code because we are running short of time. I will not explaining the code. I will just show you the output. Now you can try the code yourself. It has been uploaded on the GitHub link. So I am showing you the application for date picker. So what I do is I will show you the snapshot. So this is the snapshot of the date picker application. Here date is displayed. Here this is the date picker widget. This upper is the text view and here this is the button change button. When we will click on this change button an alert box or a pop up will appear to set the date. So this kind of pop up set date will appear here. We can set date we can click on this plus and minus to set the date and when we click on set the date will be set. Here in previous one the date was February 23. Now on clicking the change button this pop up appears on this I have set April 20. So when I will click on the set button the date will change to April 20. So this is all about date picker example. Next is sliding drawer. This is something interesting. This is sliding drawer we have also seen in the notification. When the notification came and we when we dragged it down that was a sliding drawer. So it simply hides the content on the previous screen and the components which are when we drag it down. So when the all those components which are there on the upper screen now will be displayed. It contains a handle. It is a there is a button which is named as handle. So all the components attached to this handle will now be displayed and the previous screen will be hidden from the user. So this is the snapshot. This is the handle button. When we will drag this upward or down upward or horizontally sliding drawer can be used vertically or horizontally. This is vertically I am using. When I will drag this handle up I will see these are options. So I am not showing you the code. I will directly show you the output sliding drawer. I hope I find this. Yes here it is. This is the output of the sliding drawer. This is the handle. When I will drag this handle up I will see these buttons. I think these are not very much visible. But you can try the code yourself. When again I will click on this button handle it will again go down. Again clicking up down that is what is sliding drawer is. So I think this is the end of the session and I will summarize quickly. We saw the layouts, UI controls, menus and toast, notifications, list view, dialog box, date picker and sliding drawer at the end. These are the references. From here you can also get what I have shown. Thank you.