Android Developer #1  Loading image using Picasso library in Android Studio

Android Developer #1 Loading image using Picasso library in Android Studio

Hello everyone today we will be creating
a simple project to load images into our image view using a library called Picasso.
This is one of the simplest ways of loading images in Android so first thing
we need to do we need to open the Android studio and press that button to
create a new project we’re gonna call our project let’s say ImageViewLoad.
Okay we don’t need to check any of those. Press next, targeting API I’ll leave this
one API 18 is fine because we’re gonna be able to run it on 91.4% of
devices which is good enough I think, especially for our project. So let’s say
next. Let’s select the basic activity. Why? Because I want to reuse that button over
there I want to present button and be able to show the image over there so
let’s say next. Main activity we’ll leave it as it is and we don’t need the
fragment because it’s very simple project and we don’t need to have any
complication of fragment activities let’s say finish all right so where we
need to go now is actually resources layout and content main. Ok and there are two
ways of showing how the elements appearing in UI. First thing we can just
visually modify those elements over there add new elements as you can see it
visually appears like it will be when the app is launched but we also can
modify those attributes over there in the text section. So this is how it
appears and as you can see the XML file which defines the UI is separated in 2
files activity main as well as content main but if we go to ActivityMain we
see that ActivityMain just includes the ContentMain so it just include layout
attribute over there so this has been done just for
simplicity I guess so the developer can just see separately the main attributes
of activity as well as just the crucial content of that. So let’s modify it so we
don’t need this “hello world” text I’m gonna press the delete button to remove it.
Second thing I want to modify okay I cannot modify it in ContentMain so I
need to go to ActivityMain design and I can select a floating action bar over
there. As you can see the icon here showing a mail
well basically our application is not related to mail in any way so we need to
modify our our icon to be something else and let’s see we can just select the
SrcCombatt this button we can select let’s say play icon. As you can
see there is IC Media play icon okay alright so now it’s a play button
what we need to do next is we want to add ImageView over there so once we
press this button the image will be loading in image view so now we need to
add our image view so we go to content main we select images image view and we
drag it here it asks for default icon to be appearing when we launched our app so
we select this one image okay so as we can see we can now just modify the
height width of the ImageView but honestly it’s not the best way I have
found so what I’m gonna do I’m gonna change it programmatically so as we can
see those attributes are there and it says exactly absolute X absolute Y so it
shows those dimensions manually we don’t want this so we’re gonna remove it and
what we’re going to change here instead of all those manual values we’re going
to input layout width “match_parent” so you’re gonna match the
parent view “match_parent” okay so you see it will be centered this way and that
this is exactly what we need okay so once we are done with the how UI is
going to appear we’re going to go to the Java itself and modify the code as you
can see there is already floating action bar defined so once we press the button
there’s a banner at the bottom displaying the text that we want we’re
just going to modify the default text and change to the one that we want okay so we need a way to actually show
an image and as I said before we’re going to be using that Picasso library
the way how we can add the Picasso library is quite simple so here we can
see the Gradle scripts so what is a Gradle. Gradle is a basically build
system for Android it takes care of dependencies and how libraries are
attached to our application and basically it’s very powerful thing so we
need this file build.gradle module app so we need to modify it here so as you can
see there are dependencies we need to add additional dependency over there
okay so let’s say I set it at the bottom as we can find on Picasso website so
this is the dependency we need compile square Picasso library then we’re gonna
press sync now all right so now we can use the Picasso library okay so now we
have added dependency to a Picasso library in our project but before using
the Picasso library we need to define our ImageView in the code itself so we
need to match XML file to our implementation so let’s type ImageView
alright so and then let’s call this as imgView then imageView findViewBy
ID and here we’re going to select an ID from XML file how to check it out okay
we need to go to XML file itself it was defined in the ContentMain so we’re
gonna go here in the text version and the name of it is ImageView okay so
going back and we define this R which means resources ID then image view an
image view okay okay so now we can actually use it in our code so we can
just type Picasso dot with this parameter over there asks
application asks to enter a context to get a context of application it’s a
simple command getApplicationContext() then next thing is we need to specify
the URL we want to load so let’s have let’s let this one URL I want to
show is for example this one so this is the path .load and we need to specify a
target where we actually want to load so we specify this .into and as we already
defined imageview in our code we just select this imgView okay so basically
it should work let’s see let’s see if it working out we select our simulator to
run on press ok button okay so this is the default image that I specified for
our image view and we now press the button says loading image as I said a
banner but guys you can see nothing have loaded. You know why the reason that
nothing have loaded is because even though we specify the URL over there
we forgot to specify our network permission every application that use
Internet need to have specified permission in the manifest file over
there so we need to add internet permission to our manifest file as you
can see it’s not defined over there. How to add it? It’s quite simple so to add our
internet permission we just opened the Android manifest file and we just add
this line users permission android Internet. Okay so now we can launch it
again and see. We press the button again loading image and boom here it is. This is
our image – hello dit it works perfectly fine. Okay guys so as you can see the
Picasso library is quite powerful it has very easy syntax but it allow us to do
many things. For example it allows to do resizes let’s say you have an image of
certain size and you can just resize it programmatically you can as well
adjust the way the image appears in your image view for example doing this
function CenterCrop. Things that you can do is well include for example if you
have an error let’s say there is a network connectivity problem you can
specify the image that appears instead of the image that you wanted to display
so that’s quite helpful I think also what you can do you can just load a
resource from your project so you don’t need to download something from the
internet you can just specify out the file like that it will be also perfectly
fine So yeah, I recommend using this library I use it a lot as well and it’s
very very great. Thank you for watching please press the like button if you
liked that video, subscribe to my channel there will be more tutorials and I
really enjoy doing those so I hope you enjoy it too.
Ok thank you very much and goodbye

Only registered users can comment.

  1. Что за мифическая библиотека picasso? Как её установить? В gradle прописал версию но загрузка не пошла. На гитхабе скачал Picasso_master zip и как его установить в андройд студио? В нете нет такой инфы

Leave a Reply

Your email address will not be published. Required fields are marked *