 I'm Vinay, I work at Flipkart and I'm going to be talking about a little library I wrote called Oculus which will help you enrich your applications UI and user experience. So if you look at the current trends in the mobile space, right, we are getting faster and cheaper internet plans, they are becoming more ubiquitous and with this, what does it enable us as app developers to do? What it lets us do is deliver richer content and deliver a much better user experience to users. So when it comes to most apps, what is the best way to enrich your content? Images. People love images, we humans are visual creatures and we like things that are visually appealing, we like things that are pleasant to look at and judicious use of images in your app can actually improve your UX. So a lot of apps these days, along with using images, they are also treating their images in special ways to make their app stand out. Like for example, if you look at the Google apps now, what they do is for certain types of images like for example the user avatar, right, they crop it in circular shapes. So those are just one of the ways like circular shapes, rounded corners for rectangular shapes and what they also do is they give borders. Giving a border of a certain width, a certain color can actually help make that particular image stand out from the background and one more thing which is also common now, to give a very subtle shadow which makes it, which gives it a feeling of depth. So let's look at cropping, right. If you as a developer were asked, okay, how do I want to make my image circular? How do you do it? Most of us I think would just go on to Google and we would say, okay, fine, how do I make a circular image on Android? And you'll find tons of answers. You'll find questions and answers on stackware flows, on blog posts and you'll choose something that you like and you'll say, okay, fine, let's try this out and it works. But how do you know if whatever you have done is the best? You'll implement it and later on you'll notice a lot of issues like you might notice that, okay, one particular technique is occupying a lot of CPU usage and you see a lot of jank in your list when you scroll. You might see that one particular technique is creating extra bitmaps which is processed and that is causing a memory usage and you might also see that other issues are causing overdraw problems in your app. So what I actually wanted to do was actually make a very simple image view with which developers could just easily drop in instead of a regular image view and use it to give really good, high performance, efficient effects for their app. So that exactly is what is Oculus. It's a custom image view widget, it's a drop in replacement for image view. It comes with a bunch of really great effects that you can use really simply and without any problems and zero overdraw, no excess CPU or memory usage. And since it's an open source app and a lot of us are invested in actually having something like this, new effects and features will be added constantly. So let's take a look at this, this is an app which a friend of mine is working on. If you look at the profile image, they are using Oculus for treating the avatars. It's got a circular shape and it's got a tiny one DP border around it. I don't know if it's visible but it's a dark yellow border. So let's just look at if you want to get this done in Oculus, how do you go about it? First of all, in your layout, you would just simply put your Oculus, you'll just, instead of an image view, you'll use the Oculus image view and you'll define whatever you want. Okay, so I want dark yellow border, I want a border with a one DP and I want it cropped to circular, which is just a Boolean field. And that's what you need to do in your layout and then in your XML, you just get your reference to your view and then you do image view dot set image bitmap, bitmap as you do normally. And that's it, you're done. You get that circular image view. And let's take a look at some of the other things you can also do with Oculus. There are four images here, there are more, but as part I cannot fit more in the screen right now. First one is a regular rectangular image with rounded corners. Next one is a circular image. You have one more rectangular image here with a slight two DP border and a slight shadow. And here you have a circular image with a circular red border and a slight greenish shadow here. So let's just look at the different attributes which Oculus image view supports which you can use. You can just use just a few attributes. You can just configure attributes individually and achieve these effects. So first one is corner radius. So what corner radius will do is let you set corners for your rectangular shapes. Next one is border width and border color which you can use to specify borders for your apps, for your images, sorry. And yeah, next one is a full circle which is just a Boolean flag which you can just use to force your image to be drawn in a circular shape. Shadow color, shadow width and shadow radius which will let you set the shadow parameters for your images. And finally, yeah. Let's say if your image needs to do something on click, right? You need to give touch selector feedback for those images because it doesn't feel good if you click an image and nothing happens. So what this will do is if you just set this enable to true and set a touch selector color, the moment you touch an image, the image view will automatically draw a layer of that particular color over it. So to give it that touch selector feedback. So let's take a quick recap at what Oculus supports for now. Rounded rectangles and circles, customizable borders, shadows and custom touch selectors. Now, all of us cannot be so lucky as to have our images just embedded in the apps. So most of the time, our images will be coming in from the internet. So one very important thing about Oculus which we kept in mind when developing it was how do we make sure that it plays well with image loading libraries? So let's talk a little bit about how it works with that. If you have your custom framework for doing it and if it calls set image bitmap or if it calls the set image bitmap drawable but with a version of a bitmap drawable, it's going to work no issues. If you're using and when it comes to the other image loading library which you use, the most common ones, Picasso, Glide, Wally and Nostro's Universal Image Loader. It works pretty well with all of these except that just with a slight change based on how you actually make your image loading call. And I don't really have the time to actually talk about it and how it integrates with all of these right now. But the repository is on GitHub. There's a sample application and the sample application has integration examples for all of these libraries. So right now, the libraries in beta, it has some limitations, which will be gone by the time it's 1.0 release. The current one is the bitmap needs to be resized to the view dimensions before we get set. This is just purely because it doesn't yet support the image view scale types. It's almost done. It's pretty close. Very soon, it is going to support it completely and this limitation will be gone. And what next? Okay, so if you want to use it, how do you use it? If you're using the Gradle build system on Android Studio or even Eclipse or IntelliJ, you can just add this particular line to your Gradle script and you get it. If you're on Eclipse and using the old AntBuild system, you'll have to make a library project. I'm sorry about this for now. And it's licensed under the Apache license, so feel free to submit any pull requests or feature requests if you want. And yeah, so the project has a website. You can check it out at oculus.vinatio.com or if you want to scan a QR code and save the link, it's right here. So, questions? Questions? With respect to material design, you have certain properties like set elevation. Yes. And I mean stuff like that, so does this support? Yeah, see right now this was actually in development and all before material design and everything came in. So what we are going to do now is we are just going to, for now we are just going to bring it up to version 1.0. And after that, we're going to investigate how best to integrate material design with this because some things like customizable shadows, I want to revisit it because Android, with the material design, they don't want you to customize shadows, you just have a very specific kind of shadow. So just let's support that and maybe instead of touch selector, probably have touch selectors on if it's running on pre-L and if it is like lollipop and above instead given elevation. So this is something we just have to think through. Yeah, one more question, did you extend image view? Yeah, it extends image view. So in that case, it should support material design if you include the. Actually, it does extend image view, but for actually drawing, the technique it is using is actually creating a custom drawable. So you have your own drawables? Yeah, so in the event that if you are using your own custom image view and you don't want to replace it with Oculus image view, you can just actually create an instance of Oculus drawable and call it that on your drawable so that you don't have to replace your custom image views. So if any material design thing is we added, it will be probably be added in Oculus drawable and not in the version. Thank you. Any other questions? All right, thank you guys. And please check out the library and tell me if you're using it in your apps. I'd love to hear any problems you're having so we can get around to fixing it.