 Hello. Good afternoon, guys. Thanks for the interview. So how many of you have experienced Android developers? No, I'm right. So I was actually looking for people who had experienced probably at the session. How many of you are new? I'm assuming the rest of you are new. Hello. OK, so how many of you have had problems with UI, or still having problems with UI? But it's a lot of people. So OK, first thing first, I'll be talking mostly of the UI side. So what I want to be beating up, again, is fragments. So every other person has these fragments. So I'll be on the more of the UI side. I'm excellent at what you put in the Azure. OK, so you already know who I am. I'm an Android developer, slash project manager at www.tg.com. So if I had known there was an introduction, probably I would have not had this, right? Yeah, I'm also the creative head behind the BLR browser logos. How many of you know what the BLR right or background application of is? So the rest of you don't know. I requested you to join the group. So also, I'm guessing the rest of you have not seen the logos, right? Here are the two logos. The one on the left is actually the older logo. And we decided to make a new one. If you don't like it, do let me know, because that'll probably go out of fixes. If you like it, it's good enough, right? So what I'm going to do is I'm just going to have various steps as to what you need to do to make sure your UI lands on. OK, I need to make sure I don't walk into this. Yeah. So let them all stay in sizes. And since we all merge and age here, I'm going to start with step zero. So step zero is basically understanding the Android platform when it comes to UI. So the Android platform, as you know, it's open source. Once you open source something, you get various options with it. Another example being the WebKit engine. You have one open source engine which runs through different browsers, probably many more. So Android is divided into Android phones rather than devices, because we have tablets. You can divide them by screen sizes, screen density, organization, and resolution. So screen size is basically the value of screen size. Like, I have a HTC design engine, which I think is 4.3. I've been wanting so many phones, I forgot my name on screen sizes. And screen density is basically the number of pixels in your screens. So when the iPhone came out, it came out with a retina display, which had, I think, 330 pixels per inch, which is pretty high when compared to anything else. So that's basically how much you have. Number of pixels per inch. So the retina displays packed with pixels, which is like with a richer display. Many more displays now, like the Galaxy Nexus is very close to a retina. And we have our orientation of the phone. Now, one thing actually is common on x-ray, but I'll just make sure. The phones are divided into different organizations. Phones are usually in portrait. Tablets are all in landscape. But the default orientation for the tablet is landscape. So if you decide to kind of have a workaround for a UI by deciding on what's only portrait, you'll have to look weird on the tablet, to say the least. Residuation is, yeah, I'm going to tell you that what the reservation is. Okay, so one important thing is, now, since the phones, you can divide devices into all these categories, you can have phones that look the same, but have different, they can have different reservations. You can have different screen densities. So like, I think there's a Samsung phone with a flip-out. That one's screen resolution is 240, 400, whereas the same size portrait phone actually has a higher resolution. My old phone, the Spiker, had only a 3.2 inch screen, but its resolution was 32480, which is actually, so basically a screen density in that phone was higher. Okay, so what I was saying in my previous slide, so the first thing you need to realize when you're building your eyes, don't keep yourself in one frame of mind. Now, the phones are not always that. Now, what does that icon represent? Good morning, people. I was hoping for the iPhone answer. We were the green kind of figured out ideas. So now, basically, when you see this, you're kind of, I think Apple predicted or they have copyright issues if you do something like this, I'm not a chef, but your phones can be in different screens and sizes. Most of you carry phones which are like canibar shaped, so their defaults is portrait. Then there are phones like Motorola flip out and the Blaine 2, the girls might know Blaine 2. I don't know if they've tried it. I forgot about the company. Microphone, what's the mic? Those are square phones. So whichever way you look at the phone, you're still left with a square orientation. So there, your landscape and portrait are the same. And then you have tablets, where the hardware keys are defined in such a way that the tablet is supposed to be used in a landscape mode. So as I said previously, if you define your app in a portrait mode, your app will look cycles and the user will have to turn the phone around so that breaks continuity, right? You should not probably do that. The other thing you really need to do is always have a plan for different orientations. You can change your screens. You can have your buttons or your layout defined in one method in a portrait. And you can totally change it for the other thing. And don't think of, it's supposed to be mathematical equation, but don't think of landscape as a portrait which has more width and less height. It's not that. You can totally change it. Just three days ago, I was working in a project in office, right? So we realized that when we changed it to portrait, half of our components were missing because we required the rest of the components to be all legitimate. So what we decided to do was the app has an action bar, head about, whatever. It's not actually an action bar because you can't remove the action bar. But we decided to remove the head about. And then our other apps decide to show you only important data that you turn to landscape. You can probably do that too. So yeah, always have a plan. Yeah, so once you have a plan that, start letting Android know of your plans. The first thing you need to know, tell Android is that your app is going to be supported on all screens. That is done by, in a manifest, put in the support screen type. And you will let it know that you're going to support small screens, normal screens, XLR screens. So XLR screens are tablets, right? So if I'm correct, I don't remember it, right? But Android kind of uses this to actually limit the pure app in the market, am I right? Yeah. So if you want your app to be available on every device, you actually have to use all the screens. So whatever I'm telling you, I'm going to explain it. So I learned this with Manamal. Client came back and told us that this app is not visible on the market from my tablet. So we kind of, we didn't know that I'm trying to figure out why it was, this was the solution actually. Yeah. So how many of you know about resource sets? Every person will know LDPI, MDTI, and HDTI. How many of you know you can actually use them in layouts? There are various ways you can define your resource sets. You can actually have your layouts. You can specify layouts for landscape. You can specify layout for portrait. You can go, you can jump all the things through. Like, you can have a layout, you can have folders, like you can have a layout, landscape, HDTI, you can have layout, dash, portrait, slash, MDTI. So basically you can tell Android that, okay, if the phone is like this, it can be very specific. If the phone is HDTI phone and it's in portrait mode, use these resources. So basically the point coming, which, what I'm trying to say here is, you need to have different resources. But I'm trying to think of a good example. I don't think of it as a good example. I should do that. But let's say, how many of you use buttons, images for buttons? So you give three different button sizes, right? Nobody gives three different button sizes? Yeah. Yeah, I do come into nine patches. Yeah. So you can't use, of course, you can't use nine patches everywhere. So sometimes you just, let's say, let's say you're doing the contacts app and you feel very nice about yourself. So you decided to give your contact to every person on your social app. So you need to give, you need your own photograph, right? So you can probably, you'll have to give three different photographs. So I come to another event sometime back and these are college students, right? So they didn't understand this. So I kind of liked it and I told them, let's say you're making an app, which displays an image of Katina Kev. Of course, all the guys started laughing. I thought it was more like Lashina Kev. So if you give, if you try, I told them if you provide only one resolution and image of Katina Kev, and which is supported on, let's say it's supported on one screen. If you change your screens, either Katina Kev is surrounded by white space, or you're seeing only a part of an image or you're seeing a very small Katina Kev. Of course, I don't laugh to that, Nanya. The other thing you need to start handling is orientation changes. How many of you handle orientation changes? Either like manually or let's handle. Okay, I guess you're too late. I'm in the cross town. So those of you who let Android handle orientation changes, do remember that if Android are handling orientation by itself, they will restart your activity. So if you don't want that to happen, you'll have to handle it manually. And like in your activity class, you'll have to say, you see a on configuration change function. And also in the manifest, you'll have to let Android know that for this activity, you're going to handle orientation changes. The reason I mentioned keyboard here is all those phones which have a slide out keyboard. So when the keyboard slides out, the phone automatically changes the orientation. So that goes into a landscape mode. So you can either, so if you use this, if you use any of your experience. So if you handle orientation manually, what you can do is, as soon as orientation changes, and if you have your layout spread across, layout portrait and layout landscape, Android will pick and choose your layouts depending on the orientation it is in. Okay, this next, be logical. How many of you still use absolute layouts? Good. So the point being here, that don't go to, so absolute layout is layout. If you're using PX, you'll be really absolute in value. Don't use PX in your layouts, because the pixel size actually changes. Like if you have a high DPI screen, your pixels are smaller, right? So a 10 pixel image in one phone will look much smaller than in a bigger phone with lesser resolution. Also, use rules. How many of you, I'm guessing most of you use relatively linear layouts the most, because you don't use absolute layouts, right? Yes. Yeah, so use rules. Like, I'm pretty sure all of you know, put it below this, above that, left, right, align, left, align, right. Anybody does not know that? Good, so, but be careful when you're using rules. Like if you start defining the screen, okay, let's say you have a login screen, your login screen typically has three components, username, password, and a button, right? So on the phone, if you say, align the center horizontally, everything will look good. Okay, now, but if you take the same screen and you put it on a tablet, you'll suddenly have three small buttons going through the center of the screen and a lot of gap on the left and right. So in that case, you're probably getting more innovative when it comes to the login screen and you can actually place it in different places. Yeah, so make, whatever you do, make sure you check it on all the screens. I'm going to pass. Okay, now, how many of you have nine patches? Can some of you tell me what nine patches are, anyone? Why is it called nine patches? Yeah, so, yeah, so, basically what nine patches are is, and that allows you to specify areas of the image with steps. Now, how many of you don't use nine patches? So you just do generated image for buttons, right? So when you've done the form of image stretches, it does not look good, right? I think I have a start for it. I actually, yeah. Okay, just for understanding purposes, I'll just go back to that side and come back over here. Now, most of you, let's say you have a button and it says, add yellow, right? So, those of you who use images, when you end with stretches, it looks like this, right? Okay, so now, coming back to it, so what nine patches basically allow you, is it allows you to be specific at which parts of the scene with steps. So, you see the image on the top, right? It's actually made from the image at the bottom. So, basically what we do, if you can still see me, all I have to do is my mouse pointer. Okay, so, a nine patch image is basically a regular image with a one pixel transfer in border where on the top and the left, we specify the areas where you want the image to stretch. And on the right and the bottom, it specifies the area. You specify the area where you want your camera to stay. So, for this image, I've set these two pixels on the top. All the pixels in that line will stretch horizontally. Okay, and this pixel, this pixel and this pixel will stretch vertically. And the paint patches, basically where the patches will stretch in both directions. So, I actually have a demo for you guys. I know it also provides you a tool, which is basically draw a nine patch, where you can actually take an image and then draw nine patches. So, let me erase the patches. Okay, I need three hands. I'm just gonna keep it down. So, imagine this was a basic image, right? So, we know we don't want to stretch the arrow, okay? But, we know we want the arrow to be on the right, because that's how your UI defines it, basically. The button will tell you you have to go forward somewhere. So, we'll tell it that I want it to stretch somewhere over here. Okay, so with that, I'm going to tell you you can stretch this part of the image on the left. Okay, and we just want to stretch one pixel above the arrow and one pixel below. So, basically what then happens is, you get the form of nine. This is actually what I call a 15 patch, because they're more than nine patches, according to Google's definition. Because what they don't tell you is your patches need not be, they need not be continuous. They can be spread about. So, if I take it here, and if I stretch the image, it'll actually tell you how the image is going to look as it stretches. So, you see, the arrow is not called stretching in size, whereas everything around it is. So, you can also use nine patches for gradients. How many of you use nine patches for gradients? Cool, I just told you something that all of you don't know. Okay, so, although I don't have an example. So, basically a gradient, most of the iPhone apps have a gradient, a two-color gradient, where you have a line in the center and a color in the top and the bottom changes, right? So, for images like that, you can make the last pixel at the bottom and the last pixel at the top stretch. So, you still have the gradient effect of the image. Am I, I'm not quoting you, I hope. So, I actually have an example of this running on the emulator. So, these are two buttons, which are running off the same background draw look. So, you can see, you can't really make out that they're two separate images. The other thing I don't know if many of you notice, the nine-patches actually make your image size smaller. And, but depending on your image, make sure you have nine-patches for both HDPI and NDPI. And NDPI is still working on it, I don't personally. So, like this arrow, right? You want to keep separate image size, otherwise you'll have the same size on small phones. You'll have a bigger arrow on the small phones. Okay, going back to our presentation. How many of you use XML drawables? How come, okay. I think I saw some people raise their hand for XML drawables and not for nine-patches. Maybe just me. Believe me, I'm not drunk, I don't drink. So, what basically XML drawables are, they allow you to use XML to actually draw images. So, you all have used the seek power, right? Or progress power. In terms, I'm not actually, does not have images for it. They are actually XML drawables. So, this is a part of an XML drawable of a progress power at long, I didn't keep the entire thing because it's a little bit. So, your XML drawables, you can define shapes, you can define corners, you can have gradients. So, over here, I have decided that my gradient will have a corner which is rounded by 15 DPI. So, if you remember in our elevator screen, these are actually XML images. They are not drawables. I'm not sure how to download. I didn't look at the code. So, basically, again, so, the reason I use XML drawables for this is to specify my own background color. Initially, I started off with that. Again, they reduce the APK size and they will work on all the screen sizes. Okay, I think that can show you a demo for that check-in control there. What's to rotate this? What's the control extra, right? Okay, demo works, thank you. Control extra, I'll just go with all the control objects. I don't have a num card on my laptop. I don't have any more to try that. Okay, so, usually this works. Where I can rotate, it's not, so I'm sorry about that. So, what you can also do is, let's say you have to draw a line. You can actually not use a gradient, okay? You can use something called as a stroke. You saw the second white color progress bar, right? So, that's actually a stroke. So, instead of having an image, which is a line, you can, of course, you can make it a line pattern. But you can also have, you can stroke it here. But if you're making a stroke, make sure your shape kind of says it's a line. So, there are a lot of things you can actually in external drivers, I can't put everything on one side. So, you can check up the documentation for it. Yeah, how many of you use images on text, text on images by itself? As in you ask your developer to provide the text on the image, right? Okay, two, three, number. So, I was kind of doing that when we noticed this happens. Then we decided to have a policy in the company that says your image should not have text unless required. So, there are two ways you can separate it, right? You can have a background and you can, you can have a background and you can give a text, but your background will still scale, right? So, the way you do it, the best way to do it is actually have background with the nine patches. So, this image, the nine patch would be something like this. Although it looks like a circle, what you basically need to do is you need to stretch the pixels right in between. Next, the next most important thing is testing. By hook or by crook, you have to test on all devices. Okay, also, when you're designing your layouts, right? Using the XML editor, and you have, just make sure you put your, make sure you put your true sample data in there. Just don't put QWERT, QWERT, OK, looks fine. Put what data is gonna be there, because then you know that your screen is gonna look like this, right? If you have a number, let's say you have a percentage, right? Your percentage can go from zero to 100. You put a zero, it looks fine, right? And then you have something that's left of that number. But as soon as it moves to 100, I don't know how many people notice this, if you have an image to light up that number, if you kind of move because the numbers are getting increasing in number of digits, right? So, always work with the largest possible numbers. How many of you develop only on the emulator? I'm sorry, but you need to stop doing this. So, most of my developers come and tell me, this is working on the emulator, it's not working on the phone. It looks fine on the emulator, it's not working on the phone. So, don't trust the emulator. And in fact, don't even trust, just if you have one or two devices, your animation app looks fine on all devices. They're all different, right? Also, the other thing, how many of you use Motor Dev Studio? You guys already know about it, so. If I remember correctly, Motor Dev Studio takes you 20 hours worth of testing on Motorola devices by using a service called Device anywhere. It's basically a company that sets up devices across the world and you can kind of test it, push it up to that device over there and you can test it. So, it's 20 hours a month, it's fairly, it's enough for most of the projects. So, make sure you test those. Make sure you test your apps on all devices. Make use of the facilities that you get. Am I at half-season? I'm sorry? There's also another facility if there's devices in there. It's just fun to make it perfect on the phone. Perfect on the phone? Okay. You have the same idea. Okay, so apparently there's one more company that does this. It's called Perfecter Mobile. So, if you're running on the emulator, you don't lose anything, right? Does it fit? No. No. We're Android developers. Yeah. So, if you're still developing on the same game of Android developers on Windows, you can use that as anything. But yeah, the device in here, I think, gives you 20 hours a month, right, on Android phones. It's free. Basically, 20 hours a month, it's free. Any questions? And I don't that generate, suppose that I put in all the three resolutions, how are you going to... I ordered one. You are a designer? There's no... There's no truth. But you just need to understand, if you have an MDPI image, the same image, you should increase it by 1.5 or 150 percent. It becomes an HDPI image. And you need to... Let's start off with HDPI, and we have to scale it down. Is it old from Google? Asset Studio. Asset Studio? Yeah. I'm not going to use that. Asset Studio. Asset Studio. All right. We can generate smaller... ...on all sides. You can upload your image, and give me the... Okay, so there is a tool for that. It's called Asset Studio. I go to... I need to go and check it out. Initially, what we used to do was, we used to create 1 APK file. We used to mention what kind of density is there. Resolution, et cetera, right? And then, in the marketplace, we're allowed to upload 1 APK, in the name of the application that we're hosting it as, calling it as. But, after it recently, Google has introduced a case in which we can upload multiple APKs under the same name. So... That's, I think... I mean, that's a great improvement, because now you don't... You just create one app, and everybody sees the same app on their phone. Now that's no longer the case. You can specifically put, in probably 5 APKs under the same name, and the user, what are the phone years that it can be downloaded to the phone? Although I don't work for Google, I'm pretty sure that functionality is not for supporting screen sizes. It's actually to... I don't know why it is... But it's to make sure... Let's say a tablet app, if you want to do a different experience in the tablet, that's why you have a multi-calibre case. I would suggest not using it for different... supporting different screen sizes. Because the screen sizes I just want to keep increasing. They're going to need changing. You just can't keep pumping or multiple APKs, right? And Android does provide those two. Actually, putting all those screen... all the different images and resources into one APK, it's interesting that that's a better thing to do. Is that if I look at the feelings in this right-to-right, I'll control the app... I'm sorry, I didn't get your question. Is the control look and feel changes right-to-right I observe when I develop in the... and postulate... then both look and feel of the newest changes? Yes, they do change. Most of the manufacturers, they decide to change the default resources. On my HTC phone, the automatic list selector is green in color. On Samsung, I think it's blue. So those things do change. The buttons on my HTC are essentially black in color. I'm not sure what they are in Samsung. But they do change the colors and images before the release. I can have you the question. Basically, default styles have been extended by manufacturers that change. But from Ice Cream Sandwich onwards, they have a team called Team.Follow, which is going to be the same on any device. So, repeat. Okay, so as I was saying, manufacturers decided to change the look for their US teams. From Ice Cream Sandwich, there will be a team called Follow. Which will remain the same across all the devices. I have a question. You specify different layouts for different scene decisions. Yes. So now, in your code, might be a stupid question. In your code, if you just have to... you set the country view to some layout.exe. Yes. So you specify different layouts. How do you keep that the same for all of these things? You write the code once and so on. The layouts are specified in different folders. So you keep the same names in all the folders and Android makes care of using the corresponding ones. Yeah. Android will take care of which layout to use. Also, what you can do is, you can use the onConfigurationChange function to actually know when the configuration changed, and you can get a new configuration. So you need to again set the country view to that corresponding. Yeah. So if Android is handling it by itself, if you're not handling it manually, Android will discard that activity. So I check if the configuration stays to vertical or horizontal and load that corresponding. Yes. Yes. So what you can also do, I did it from one of my screens. I just decided to remove a few components, static components that I'm not going to use. You can just hide them, make more space for screens. Like as you're saying, I decided to remove the header bar from the screen. It's not required, right? On a smaller screen, your data is more involved in it. So just show that. Amazing. Thank you. Any more questions? Thank you so much, guys.