>> Tune in to this week's Xamarin Show where I have
my good friend Jonathan Peppers on telling us all how we can
optimize our Android and Xamarin Forms android images with
a single line of code from a single NuGet, so, tune in.
[MUSIC]
>> Welcome back everyone to The Xamarin Show.
I'm your host, James Montemagno, and today,
I have one of my best friends in the entire world,
Mr. Jonathan Peppers, all the way from,
I don't even know where he lives
because we're that good of friend's.
How's it going, Mr. Peppers?
>> Pretty good. Kentucky, actually.
>> Kentucky, that is right. I always forget.
I was like I knew that somewhere over there.
>> Yeah. Not a lot of tech happening.
>> No, well, they got you and that's basically all they need,
and that's the tech capital right here with Mr. Jonathan Peppers.
So, some people may not know who you are so
maybe give a little 30-second pitch
of who this Jonathan Peppers bearded man is in front of us.
>> Yeah. I work on the Xamarin Android team and
lately I've been working on Windows,
build performance, trying to get this build times down,
trying to get our builds more reliable, that kind of thing.
I've been on Xamarin Android team for almost two years now
so I think we're
really starting to make some progress on these thing
>> Yeah. He is the reason that your Android builds are faster.
I've seen it and when we blog about it, it's totally true.
But that's actually not why I decided to bring Mr. Peppers on.
I decide to bring him on because for a long time,
years if you will,
he's been talking about Android images
from early blogs to even like last week.
All he does his blog about how much he
loves and hates drawables and bitmaps.
So maybe you could tell everyone why you're actually a [inaudible] at first.
>> Yeah, so I had a Xamarin Forms app at a past job that was very
image-heavy and we could
see that we were having issues with bitmaps,
and this is just a classic problem even
to Java developers and Android studio.
So much so that Google actually in their docs for images,
they recommend, "Hey, don't do this to yourself.
Use a library like this and they link to a library called Glide."
It's a native Java library for loading images so you don't have to
deal with that heartache yourself and
managing memory, and that kind of thing.
>> Yeah. So, why is it hard I guess from
an Android perspective or from a Xamarin developer?
I guess it doesn't matter if you're Xamarin Android or
Xamarin Forms or like you're saying
even native language, it seems to be a problem.
So what is the core of the issue and
then how does Glide solve that?
>> So, the issue is a lot of times around downloading images.
So many apps that you're going to have
a URL and you want to present
an image from that URL on the screen.
To make that work properly,
you need to have an in-memory cache and all this code that iOS,
it's just a little more simple to make that work.
I think part of it is the fact that
Java is a garbage collected language
and there's some interaction there between
a native bitmap, in-memory and Java.
>> Got you. Then in Xamarin,
you have not only the native bitmap,
you have the C# bitmap,
then now you have two bitmaps really in-memory,
they are pointers and garbage collection.
I've written my own in-memory cache and it's a joy,
so I'm glad that we no longer have to.
So, you're going to tell us how all of
our developers can solve this. Is that correct?
>> Yeah, right. So, what I did is I made a quick, well,
quick but I made a binding for
the Glide library and I made a way to
hook this into Xamarin Forms applications.
So you basically just have to add a NuGet package in one line of
code and you can use Glide for images in your app.
>> Now that is the absolute best thing that I like to hear.
One line of code and it just does it for you.
Now, does this also work with
normal Xamarin Android applications that are non forms?
>> Yeah. So, there's two NuGet packages.
There's one that is just the bindings
so you could use that directly.
You would have to write some code to use Glide's APIs.
It's not quite as easy to go that route but you could.
>> Got you. That was Xamarin Forms
which you're going to show us today.
It just does it automatically.
>> Yeah, exactly.
>> Awesome. Let's take a look.
You want to head over to your desktop?
>> Yeah. So what I've got here is just a single page forms app.
It's a grid in a scroll view with four columns.
What I've done here is,
this is obviously not what you would want to do in an app.
>> Wait a second, wait a second.
You don't want to dynamically load about 400 rows and columns
all with a huge JPEG perhaps in rapids and session,
is that not good best practice?
>> No. So this is a grid with 400 images in it
which you can see why this could be a little sluggish anyway.
But we're going to see how that works.
This is just me using forms directly right here.
>> So this is out of the box and this is
loading an image and what kind of image is it?
>> It is just a selfie from
an iPhone and I think it's- if it loads here. There go.
You see how each image pops in slowly,
and the scrolling, of course, this is an emulator,
but the scrolling is less to be desired.
>> Subpar, subpar you mean to say.
>> Yeah. Yeah. Of course,
this is a large image.
I think it is like two megabytes
or four megabytes or something like that.
>> That's pretty impressive that it's even loading,
all of these being a four meg image.
That's a lot of memory.
>> Yeah. So Forms has been working on that.
The Form seem them self and this is
better than it was a few versions ago.
This is just what you get out of
the box if you created a new project today.
I think it's Xamarin Forms 3.5,
if I remember right.
>> Got you. Is there
any virtualization happening or anything like that?
It's just a grid, right?
>> Yeah. No, this is just a scroll view with those views.
All 400 of them in the scroll view.
So let's say we wanted to add Glide to this project.
We can just go to the NuGet package manager and search for Glidex.
Here are the two packages I've created here.
Glidex.forms, if you're using Forms,
just install that one, and the other one is the binding.
>> Got it. So if you're doing just an Android,
the top one, Xamarin Forms,
the bottom one which includes the top one.
>> Right.
>> Cool.
>> So the next thing you need to do is open your main activity,
and right after the line,
you've probably seen this if you use
Xamarin Forms but Xamarin Forms Init.
You can type Android Glide Forms Init and that's it.
>> Wow. That's it,
one line of code, done.
>> Right, done. So I've not actually changed anything else,
so we'll start the build here.
>> So you haven't changed anything else besides initializing it.
So is there a special relationship between
Glide and Xamarin Forms then?
>> Yes. So what happens is there's
some interfaces in Forms you can implement to handle images.
Traditionally, there was one called i-Image source handler,
and there's a new one called i-Image view handler.
That is what Glidex Forms is taking advantage of here.
Basically, it's a callback where
Form says here's the image it's trying to be loaded,
here's the image view it's going to be placed in.
Then, I could just write a little glue code
to call in the Glide and make that work.
>> Very cool. Yeah, that's really nice to see,
sound like a harmony between Glide,
the library creators, and Xamarin Forms work seamlessly.
>> Yeah. I did make
a contribution to Xamarin Forms to get that new interface.
>> Okay.
>> So this could be possible.
>> Nice. Well, that's the beautiful part about it.
Being open source, right,
is that you got to just do it.
>> Yeah. I'm not on
the Xamarin Forms team but I was able to make this happen.
So here's our updated screen, right?
They're all up front, bang,
scrolling is smooth even on this emulator, right?
>> So this is now loading hundreds of your beautiful face with,
what are those, pompom balls?
>> Yeah. You have kids,
they are toy called bunchems, right?
>> Put that in the show, now its full of bunchems.
I'm going to buy that for the Xamarin Show.
>> Yeah, yeah. Well, we saw an article
about how girls get them stuck in
their hair and then we discovered what you could do with them.
>> So this is pretty awesome.
Not only that we get to look at a beautiful,
beautiful you here but also so,
you're just scrolling and Glide now is basically
hijacked it and loading
all the images and doing all memory management and everything.
>> Right. So I could have multiple URLs here,
and it would have similar performance improvement.
I could load resources,
I could load from a temp file on disk.
All the ways you can load images in Forms work.
>> Okay. So it's not just this.
If you're using embedded resources,
you're using resources in general,
I get to just be drawables, it'd be good.
>> Yeah. The only thing I would mention is
embedded resource since that is a.NET thing.
Java does not know about it,
so there is a slight per fit for using that.
So I would stick with
just Android resource files if you're doing Android development.
>> I've always been a resources and
normal application in general because for me,
it just makes sense.
I like to use the add 2x,
add 3x and all those things that you would expect.
So that's what I'm about.
But yeah, if you are using
those embedded resources, good to know that.
Sometimes you can't optimize everything,
but it seems like this out of the box,
if anyone's having issues with images,
it's going to handle and solve all the problems.
>> Yeah. Again, for sure.
>> Now, on iOS or on Windows is that not seem
to be a problem as you said iOS handles it better?
>> Yeah. I think just natively iOS
is better at dealing with images.
I don't know if Google
just never really wanted to solve that problem
or I think they're really trying to push
people to use Android resources,
so they just ignore this problem.
>> Wait, images from the Internet?
No way. Impossible that in any app would want to do that.
>> Glide is even build,
it's an open source project.
It didn't come from Google.
>> Got you. So Glidex is open source.
We have a sample app, we can put that up on GitHub,
put that on that the show notes below
and of course Xamarin Forms is open source.
So not only you can you create great libraries,
you can go ahead and take a look at this source code,
how they do the binding, it's probably super
interesting to a lot of developers.
Yeah. Anything else you want to tell us about this, Peppers?
>> I don't think so.
Again, I work on Xamarin Android.
So if you guys run into anything on Xamarin Android,
we have a Gitter channel that you
could hop in there and talk to us.
That might be something we could plug
and get some people talking to us.
>> Absolutely. I'll put links to all those GitHub projects,
also the Peppers on Twitter,
you can just Tweet at him directly or to the Gitter.
Peppers, thank you for a coming on and
blowing our minds with a single line demo.
That demos, add this in NuGet, done.
>> Yeah. No problem.
>> Well, awesome. Thanks everyone
for tuning in to The Xamarin Show.
Make sure you like and subscribe and watch a whole bunch
of the awesome other Xamarin Show episodes.
Peppers, thank you so much for coming on. I appreciate it.
>> Hey, sounds good.
>> Well, thanks everyone. Thanks for watching.
[MUSIC].
>> Hey, James here. Just wanted to check in
and thank you for watching this video.
Now, do all the things that you know you want to do such as like,
subscribe, and ding that notification bell,
become part of the notification squad.
While you're here, check out
all these awesome videos that I've already recorded.
Click on that thing. Click it. Watch it. Do it.