Сегодня нас ожидает интересный урок в котором мы научимся основам работы с довольно популярной библиотекой для Android - Picasso. Что представляет с себя эта библиотека? Picasso позволяет разработчикам производить загрузку в свои приложения изображений с различных ресурсов сети (задавать адреса нахождения изображений нужно вручную), а также предлагает разнообразную работу над этими изображениями перед показом их пользователю (например, определение размера отображаемой картинки, возможность поворота и т.д.). 

Создаем новый  проект, выбираем Blank Activity. Для начала, чтобы наше приложение смогло работать с библиотеками Picasso, их нужно установить. Как это делать было уже подробно рассмотрено в статье про подключение библиотек. Кратко напомню: жмем File --- Project Structure, вкладка Dependencies, жмем на зеленый плюсик, выбираем Library Dependency:

и в открывшемся окне находим библиотеку Picasso:

После этого придется немного подождать пока Android Studio применит новые настройки к проекту.

Теперь приступаем к самому приложению. Нам нужно для начала создать несколько элементов ImageView в которых будут отображаться загруженные с помощью Picasso изображения. Открываем файл activity_main.xml и добавим туда следующее:

<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/LL1">
 <ImageView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/im1"
 android:src="@drawable/ic_launcher"
 android:layout_weight="1">
 </ImageView>
 <ImageView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/im2"
 android:src="@drawable/ic_launcher"
 android:layout_weight="1">
 </ImageView>
 </LinearLayout>

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/LL2">
 <ImageView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/im3"
 android:src="@drawable/ic_launcher"
 android:layout_weight="1">
 </ImageView>
 <ImageView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/im4"
 android:src="@drawable/ic_launcher"
 android:layout_weight="1">
 </ImageView>
 </LinearLayout>
 </LinearLayout>

Мы добавили 4 элемента ImageView, картинки ic_launcher здесь применены исключительно для наглядности:

Так как наше приложение будет загружать изображения с Интернета, то нашему приложению нужно дать разрешение на использование Интернета. Идем в файл манифеста AndroidManifest.xml и добавим туда строку (перед тегом <application>):

<uses-permission android:name="android.permission.INTERNET" />

Ну а теперь переходим к работе в файле MainActivity.java. Нам нужно объявить 4 объекта типа ImageView, привязать их к нашим элементам и, используя библиотеку Picasso, загрузить 4 изображения и отобразить их в объявленных ImageView. Вот полный код MainActivity.java:

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;

public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 //Объявляем объекты ImageView и связываем с созданными элементами в activity_main.xml:
 ImageView imageView1 = (ImageView) findViewById(R.id.im1);
 ImageView imageView2 = (ImageView) findViewById(R.id.im2);
 ImageView imageView3 = (ImageView) findViewById(R.id.im3);
 ImageView imageView4 = (ImageView) findViewById(R.id.im4);


 //Работаем с Picasso
 Picasso.with(this)
 //Загружаем изображение через его адрес URL:
 .load("http://developeroleg.ucoz.ru/Images/Article/Android-vs-iOS.jpeg")
 //Настраиваем изображение, которое отобразится в случае ошибки при загрузке:
 .error(R.drawable.ic_launcher)
 //Через команду placeholder мы задаем изображение, которое будет
 //отображаться до тех пор, пока не загрузятся необходимые изображения:
 .placeholder(R.drawable.ic_launcher)
 //Выставляем размер изображения:
 .resize(250,250)
 //Показываем его в объекте ImageView:
 .into(imageView1);
 //Загружаем таким же образом еще 3 изображения:

 Picasso.with(this)
 .load("http://developeroleg.ucoz.ru/Images/Article/iphone-5-android-vs-ios-reasons.jpeg")
 .error(R.drawable.ic_launcher)
 .placeholder(R.drawable.ic_launcher)
 .resize(250,250)
 .into(imageView2);

 Picasso.with(this)
 .load("http://developeroleg.ucoz.ru/Images/Article/Lollipop-2-590x330.jpg")
 .error(R.drawable.ic_launcher)
 .placeholder(R.drawable.ic_launcher)
 .resize(250,250)
 .into(imageView3);

 Picasso.with(this)
 .load("http://developeroleg.ucoz.ru/Images/Article/android-wins.jpg")
 .error(R.drawable.ic_launcher)
 .placeholder(R.drawable.ic_launcher)
 .resize(250,250)
 .into(imageView4);
 }
}

Объяснения по Picasso даны прямо в коде, но все таки обратим внимание на них еще раз. Подключаем библиотеку командой Picasso.with(this) - для нашего Activity подключается использование библиотеки Picasso. Далее по самой библиотеке:

     - .load - команда для загрузки изображения с ресурса;

     - .error - указываем, что будет отображено в случае сбоя загрузки;

     - .placeholder - настраиваем изображение, которое будет показываться в элементах ImageView пока не загрузятся изображения с Интернета;

     - .resize - выставляем размер изображения, которое отобразится;

     - .into - ссылаемся на элемент ImageView в котором будет отображено изображение.

Вот в принципе и все! Надеюсь у вас все получилось, тут все на самом деле довольно просто. Запускаем наше приложение и тестируем: