Android imageview example java

ImageView in Android with Example

ImageView class is used to display any kind of image resource in the android application either it can be android.graphics.Bitmap or android.graphics.drawable.Drawable (it is a general abstraction for anything that can be drawn in Android). ImageView class or android.widget.ImageView inherits the android.view.View class which is the subclass of Kotlin. AnyClass.Application of ImageView is also in applying tints to an image in order to reuse a drawable resource and create overlays on background images. Moreover, ImageView is also used to control the size and movement of an image.

Adding an ImageView to an Activity

Whenever ImageView is added to an activity, it means there is a requirement for an image resource. Thus it is oblivious to provide an Image file to that ImageView class. It can be done by adding an image file that is present in the Android Studio itself or we can add our own image file. Android Studio owns a wide range of drawable resources which are very common in the android application layout. The following are the steps to add a drawable resource to the ImageView class.

Note: The steps are performed on Android Studio version 4.0

Open the activity_main.xml File in which the Image is to be Added

Switch from the Code View to the Design View of the activity_main.xml File

For adding an image from Android Studio, Drag the ImageView widget to the activity area of the application, a pop-up dialogue box will open choose from the wide range of drawable resources and click “OK“.

For Adding an Image File other than Android Studio Drawable Resources:

Click on the “Resource Manager” tab on the leftmost panel and select the “Import Drawables” option.

Select the path of the image file on your computer and click “OK“. After that set, the “Qualifier type” and “value” of the image file according to your need and click “Next” then “Import“.

Drag the ImageView class in the activity area, a pop-up dialogue box will appear which contains your imported image file. Choose your image file and click “OK“, your image will be added to the activity.

Note: After adding an image set its constraints layout both vertically and horizontally otherwise it will show an error.

XML Attributes of ImageView

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code has been given in both Java and Kotlin Programming Language for Android.

Step 2: Working with the activity_main.xml FileWorking with the activity_main.xml File

Go to the activity_main.xml File and refer to the following code. Below is the code for the activity_main.xml File.

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

Источник

ImageView

Компонент ImageView предназначен для отображения изображений. Находится в разделе Widgets.

Для загрузки изображения в XML-файле используется атрибут android:src, в последнее время чаще используется атрибут app:srcCompat.

ImageView является базовым элементом-контейнером для использования графики. Можно загружать изображения из разных источников, например, из ресурсов программы, контент-провайдеров. В классе ImageView существует несколько методов для загрузки изображений:

• setImageResource(int resId) — загружает изображение по идентификатору ресурса
• setImageBitmap(Bitmap bitmap) — загружает растровое изображение
• setImageDrawable(Drawable drawable) — загружает готовое изображение
• setImageURI(Uri uri) — загружает изображение по его URI

Метод setImageResource()

Сначала нужно получить ссылку на ImageView, а затем используется идентификатор изображения из ресурсов:

 ImageView imageView = findViewById(R.id.imageView); imageView.setImageResource(R.drawable.cat); 

Метод setImageBitmap()

Используется класс BitmapFactory для чтения ресурса изображения в объект Bitmap, а затем в ImageView указывается полученный Bitmap. Могут быть и другие варианты.

 ImageView imageView = findViewById(R.id.imageView); imageView.setImageBitmap(BitmapFactory.decodeResource(this.getResources(), R.drawable.cat)); // Kotlin val bitmap: Bitmap = (ResourcesCompat.getDrawable( resources,R.drawable.sleepbedcat,null) as BitmapDrawable).bitmap imageView.setImageBitmap(bitmap) 

Метод setImageDrawable()

Если у вас есть готовое изображение, например, на SD-карте, то его можно использовать в качестве объекта Drawable.

 ImageView imageView = findViewById(R.id.imageView); // плохой код, только для демонстрации imageView.setImageDrawable(Drawable.createFromPath("/mnt/sdcard/cat.jpg")); 

Drawable можно получить и из ресурсов, хотя такой код выглядит избыточным, если можно сразу вызвать setImageResource().

 // Kotlin val imageView: ImageView = findViewById(R.id.imageView) imageView.setImageDrawable( ContextCompat.getDrawable(this, R.drawable.cat) ) 

Метод setImageURI()

Берётся URI файла изображения и используется в качестве источника изображения. Этот способ годится для работы с локальными изображениями.

 ImageView imageView = findViewById(R.id.imageView); imageView.setImageURI(URI.parse("file://mnt/sdcard/cat.jpg")); 

Загружаем Drawable через URI.

 // Kotlin val imageView: ImageView = findViewById(R.id.imageView) val button: Button = findViewById(R.id.button) button.setOnClickListener < val uri: Uri = Uri.parse("android.resource://$packageName/$") // remove previous image uri cache imageView.setImageURI(null) // set image view image from uri imageView.setImageURI(uri) // show the uri in text view textView.text = uri.toString() > 

Другие методы

Также вам часто придется использовать методы, связанные с размерами и масштабированием: setMaxHeight(), setMaxWidth(), getMinimunHeight(), getMinimunWidth(), getScaleType(), setScaleType().

Масштабирование через свойство Scale Type

Для масштабирования картинки в ImageView есть свойство Scale Type и соответствующий ему атрибут android:scaleType и перечисление ImageView.ScaleType.

• CENTER
• CENTER_CROP
• CENTER_INSIDE
• FIT_CENTER
• FIT_START
• FIT_END
• FIT_XY
• MATRIX

Чтобы увидеть разницу между разными режимами, желательно использовать большую картинку, превосходящую по ширине экрана устройства. Допустим, у нас есть простенькая разметка:

Для наглядности я задал красный цвет для фона ImageView.

Режим android:scaleType=»center» выводит картинку в центре без масштабирования. Если у вас будет картинка большего размера, то края могут быть обрезаны.

Режим android:scaleType=»centerCrop» также размещает картинку в центре, но учитывает ширину или высоту контейнера. Режим попытается сделать так, чтобы ширина (или высота) картинки совпала с шириной (или высотой) контейнера, а остальное обрезается.

Режим android:scaleType=»centerInside» масштабирует картинку, сохраняя пропорции. Можно увидеть задний фон контейнера, если его размеры отличаются от размера картинки.

Режим android:scaleType=»fitCenter» (по умолчанию) похож на предыдущий, но может не сохранять пропорции.

Если выбрать режим android:scaleType=»fitStart», то картинка прижимается к левому верхнему углу и таким образом заполняет верхнюю половину контейнера.

Значение android:scaleType=»fitEnd» сместит картинку в нижнюю часть контейнера.

Режим android:scaleType=»fitXY» растягивает/сжимает картинку, чтобы подогнать её к контейнеру. Может получиться вытянутая картинка, поэтому будьте осторожны.

Последний атрибут android:scaleType=»matrix» вывел картинку без изменений в левом верхнем углу с обрезанными краями.

Атрибут android:adjustViewBounds=»true»

При использовании атрибута scaleType=»fitCenter» из предыдущего примера Android вычисляет размеры самой картинки, игнорируя размеры ImageView. В этом случае ваша разметка может «поехать». Атрибут adjustViewBounds заставляет картинку подчиниться размеру компонента-контейнера. В некоторых случаях это может не сработать, например, если у ImageView установлен атрибут layout_width=»0dip». В таком случае поместите ImageView в RelativeLayout или FrameLayout и используйте значение 0dip для этих контейнеров.

Загрузка изображения из галереи

Предположим, у вас есть на экране компонент ImageView, и вы хотите загрузить в него какое-нибудь изображение из галереи по нажатию кнопки:

 static final int GALLERY_REQUEST = 1; @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button button = findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() < @Override public void onClick(View v) < Intent photoPickerIntent = new Intent(Intent.ACTION_PICK); photoPickerIntent.setType("image/*"); startActivityForResult(photoPickerIntent, GALLERY_REQUEST); >>); > @Override protected void onActivityResult(int requestCode, int resultCode, Intent imageReturnedIntent) < super.onActivityResult(requestCode, resultCode, imageReturnedIntent); Bitmap bitmap = null; ImageView imageView = (ImageView) findViewById(R.id.imageView); switch(requestCode) < case GALLERY_REQUEST: if(resultCode == RESULT_OK)< Uri selectedImage = imageReturnedIntent.getData(); try < bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), selectedImage); >catch (IOException e) < e.printStackTrace(); >imageView.setImageBitmap(bitmap); > > > 

Намерение ACTION_PICK вызывает отображение галереи всех изображений, хранящихся на телефоне, позволяя выбрать одно изображение. При этом возвращается адрес URI, определяющий местоположение выбранного изображения. Для его получения используется метод getData(). Далее для преобразования URI-адреса в соответствующий экземпляр класса Bitmap используется специальный метод Media.getBitmap(). И у нас появляется возможность установить изображение в ImageView при помощи setImageBitmap().

На самом деле можно поступить ещё проще и использовать метод setImageURI.

 Uri selectedImage = imageReturnedIntent.getData(); imageView.setImageURI(selectedImage); 

Сравните с предыдущим примером — чувствуете разницу? Тем не менее, приходится часто наблюдать подобный избыточный код во многих проектах. Это связано с тем, что метод порой кэширует адрес и не происходит изменений. Рекомендуется использовать инструкцию setImageURI(null) для сброса кэша и повторный вызов метода с нужным Uri.

В последних версиях системных эмуляторов два примера не работают. Проверяйте на реальных устройствах.

Получить размеры ImageView — будьте осторожны

У элемента ImageView есть два метода getWidth() и getHeight(), позволяющие получить его ширину и высоту. Но если вы попробуете вызвать указанные методы сразу в методе onCreate(), то они возвратят нулевые значения. Можно добавить кнопку и вызвать данные методы через нажатие, тогда будут получены правильные результаты. Либо использовать другой метод активности, который наступает позже.

 @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final ImageView imageView = findViewById(R.id.imageView); final TextView infoTextView = findViewById(R.id.textView); // пробуем получить размеры ImageView сразу при загрузке. Вернёт нулевые значения infoTextView.setText("Размеры ImageView: " + String.valueOf(imageView.getWidth()) + " : " + String.valueOf(imageView.getHeight())); Button button = (Button)findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() < @Override public void onClick(View v) < // этот же код вызывается при нажатии кнопки. Теперь всё правильно infoTextView.setText("Размеры ImageView: " + String.valueOf(imageView.getWidth()) + " : " + String.valueOf(imageView.getHeight())); >>); > 

Копирование изображений между ImageView

Если вам надо скопировать изображение из одного ImageView в другой, то можно получить объект Drawable через метод getDrawable() и присвоить ему второму компоненту.

 ImageView ivSource = findViewById(R.id.sourceImageView); // 1-й компонент с какой-то картинкой ImageView ivTarget = findViewById(R.id.targetImageView); // 2-й компонент без картинки Drawable drawable = ivSource.getDrawable(); // получим картинку у первого компонента ivTarget.setImageDrawable(drawable); // присвоим второму 

Примеры

В моих статьях можно найти примеры использования ImageView.

Библиотеки

CustomShapeImageView — позволяет создавать рамки разных форм.

MikeOrtiz/TouchImageView — расширенный вариант ImageView, который поддерживает касания экрана и масштабирование.

CircleImageView — компонент для создания круглых аватаров. Другая библиотека с похожим названием Pkmmte/CircularImageView. И ещё одна библиотека vinc3m1/RoundedImageView, позволяющая создавать не только круглые изображения, но и овальные и прямоугольные с закруглёнными углами. Сравнивайте. А также упрощённый компонент pavlospt/CircleView, который позволяет создавать круглый элемент с заголовком и подзаголовком.

Источник