Как наложить фильтр на ImageView

#java #android #android_imageview

Я хочу сделать фильтр на чёрно-белое изображение, это мне нужно для разных тем в
приложении. Как я понимаю для этого надо использовать

ImageView header = (ImageView) findViewById(R.id.drawer_header);
header.setColorFilter(R.color.my_color);


Я создал отдельный проект для тестирования и вот что получилось:



Но если я нажимаю на любую кнопку, кроме "убрать фильтр" (он ставит цвет android.R.color.transparent),
получается вот такая фигня:



Почему он делает всё фиолетовым? По логике всё должно работать. Приведу код применения
цвета полностью:

...

// Покрасить в красный
public void setRedColor(View v) {
ImageView header = (ImageView) findViewById(R.id.header);
header.setColorFilter(R.color.red);
}

// Покрасить в синий
public void setBlueColor(View v) {
ImageView header = (ImageView) findViewById(R.id.header);
header.setColorFilter(R.color.blue);
}

// Покрасить в зелёный
public void setGreenColor(View v) {
ImageView header = (ImageView) findViewById(R.id.header);
header.setColorFilter(R.color.green);
}

// Убрать краску
public void setNullColor(View v) {
ImageView header = (ImageView) findViewById(R.id.header);
header.setColorFilter(android.R.color.transparent);
}


Разметка:



    

    

Ответы

Ответ 1

Поменяйте каждый setColorFilter на setColorFilter(this.getResources().getColor(R.color.
... ))

но getColor()  не рекомендован  после API 23, но можно воспользоваться v4 support
либо другим getColor() для API>=23


Ответ 2

Разобрался с проблемой, надо было сделать так:

header.setColorFilter(this.getResources().getColor(R.color.red), PorterDuff.Mode.ADD);

Как отобразить определенную часть изображения в ImageView?

#android #picasso #android_imageview

У меня есть список фотографий, который я отображаю в ListView с помощью адаптера. 

Сейчас я отображаю фото таким образом:

PhotoAdapter.ViewHolder viewHolder;
        if (view == null) {
            view = inflater.inflate(R.layout.list_view_photo_item, viewGroup, false);

            viewHolder = new PhotoAdapter.ViewHolder(view);
            view.setTag(viewHolder);
        } else {
            viewHolder = (PhotoAdapter.ViewHolder) view.getTag();
        }

        picasso.load(photo.getImageUrl())
                .placeholder(R.drawable.bg_small_11)
                .into(viewHolder.image);


Это обычное отображение. А у меня стоит задача отобразить фото по указанным координатам
(левая верхняя, правая верхняя, левая нижняя и  правая нижняя точка). То есть я не
хочу отображать всё фото, а только этот кусок фото, который пользователь раньше выбрал
как превью, и я хочу отображать именно его. Сервер мне возвращает полностью всё фото
+ координаты (в PX) этого превью. Кто, что может посоветовать? 
    

Ответы

Ответ 1

Метод transform и интерфейс Transformation позволяют изменить изображение как душе
угодно:

picasso.load(photo.getImageUrl())
       .placeholder(R.drawable.bg_small_11)
       .transform(new Transformation {

            @Override public Bitmap transform(Bitmap source) {
                Bitmap result = Bitmap.createBitmap(source, x, y, width, height);
                if (result != source)
                   source.recycle();
                return result;
            }

           @Override public String key() { return "crop()"; }
        })
        .into(viewHolder.image);


Ответ 2

Вам нужно получить Bitmap и создать его обрезанную версию. У вручную установить в
ImageView. С Picasso это можно сделать примерно так:

Picasso.with(context)
        .load(photo.getImageUrl())
        .placeholder(R.drawable.bg_small_11)
        .into(new Target() {
            @Override
            public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
                Bitmap croppedBitmap = Bitmap.createBitmap(
                        bitmap, xCoord, yCoord, width, height); // Координаты, полученные
с сервера

                viewHolder.image.setImageBitmap(croppedBitmap);
            }

            @Override
            public void onBitmapFailed(Drawable errorDrawable) {

            }

            @Override
            public void onPrepareLoad(Drawable placeHolderDrawable) {

            }
        });
    }

Android, увеличения ImageView в recycleWiew по тапу, алгоритм

#android #android_imageview

Недавно начал изучать Android. Дошёл до recycleWiew. Столкнулся с необходимостью
открыть imageView из ячейки полноэкранном режиме по нажатию на него.

Сейчас я делаю так:

onBindViewHolder

Glide.with(context).load(new File(path + "/" + galleryList.get(i))).into(viewHolder.img);


А в cell.xml
я использовал разные другие библиотеки, но добился только того что по тапу приложение
масштабировалось в рамках ячейки. Попытки прорвать границы ухищрениями типо adjustViewBounds
не помогли.

Сейчас мне кажется что ошибка где - то в подходе. Подскажите, как сделать правильно? 

Заранее спасибо.

Upd:

Попробовал по совету Jarvis_J в комментарии, но натыкаюсь на NPE при попытке присвоить
imageView изображение. 

 

    


Я так понял что этот imageView не нужно инициализировать в конструкторе ViewHolder,
это ведь общей для всех элемент, просто с разным наполнением. Поэтому я просто написал:

public class Adapter extends RecyclerView.Adapter {
    ...
    ImageView scaledImg;
    ...


...

public void onBindViewHolder(final Adapter.ViewHolder viewHolder, final int i) {
            ...
            scaledImg.findViewById(R.id.scaledImage);
            final File n = new File(path + itemLlist.get(i));
            scaledImg.setImageURI(Uri.fromFile(n));
            ...


...

viewHolder.img.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!isScaled) {
                    scaledImg.setVisibility(View.VISIBLE);
                    isScaled = !isScaled;
                }
            }


Где я ошибаюсь?
    

Ответы

Ответ 1

Ваш ImageView в любом случае будет ограничен родителем - (ячейкой) RecyclerView.
Если вы хотите сделать изображение на весь экран - вам нужен другой ImageView, который
будет размером с корневой layout.

Например, так:



    

    



По нажатию делайте этот ImageView видимым (setVisibility(View.VISIBLE)) и устанавливайте
ему картинку из ячейки recyclerView (setImageResource(...)).

По нажатию на увеличенное изображение вновь скрывайте его (setVisibility(View.GONE)).


Ответ 2

Можно это сделать с красивой анимацией открытия. Использовать для этого две активити.
Первая с RecyclerView (RvActivity назовем), а вторая просто с imageView (IvActivity).

RvActivity:




    



IvActivity:

 
    

        
    


По клику на элемент RecyclerView делаем старт активити из RvActivity (пример на Kotlin):

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            startActivity(Intent(this, IvActivity::class.java),
                    ActivityOptions.makeSceneTransitionAnimation(this,
                            rv,"imageTag")
                            .toBundle())
        } else {
            startActivity(Intent(this, IvActivity::class.java))
        }


На Java будет что-то типо того (пишу без теста, по памяти. Давно джавку не юзал):

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        startActivity(new Intent(this, IvActivity.class),
                ActivityOptions.makeSceneTransitionAnimation(this,
                        findViewById(R.id.rv),"imageTag")
                        .toBundle());
    } else {
        startActivity(new Intent(this, IvActivity.class));
    }


Ну и соответственно в IvActivity в ImageView установите ту картинку по которой кликнули
(передать информацию о адресе кликнутой картинки можно через Intent)

Картинка по форме ImageButton

#java #android #android_imageview

Сделал ImageButton с закругленными углами, но картинка на ней все равно квадратная.
Как сделать так, чтобы картинка была такой же формы, как и ImageButton, будь то закругленный
квадрат или круг?
    

Ответы

Ответ 1

Посмотри в сторону масок. По моему, самый простой вариант реализовать нужное поведение
- это создать класс наследник ImageView и в нем переопределить метод dispatchDraw в
котором наложить маску. Вот тут поднималась эта тема.

ImageView и покрывающий его круглый прозрачный градиент

#java #android #android_imageview

Дано:

ImageView, в который загружена круглая .png картинка.

Как программно добавить поверх картинки круглый градиент из drawable.xml ?

При этом сквозь градиент должно быть видно картинку.

UPD:

ImageView я добавляю на экран кодом:

linearLayout.addView(imageView)


При клике на ImageView нужно, чтобы появился прозрачный градиент в этом ImageView
и через определенное время убрался.

По идеи можно прописать все ImageView(их 50, кол-во не меняется) в layout'е и обернуть
ImageView в какой нибудь lаyout, добавив в него еще одну ImageView с градиентом, которую
я буду делать визибл при нажатии.

На сколько плохо такое решение будет ?

Код как я добавляю картинки:

LinearLayout layout = (LinearLayout) findViewById(R.id.ll);
for (int i = 0; i < 50; i++) {
    ImageView imageView = new ImageView(this);
    imageView.setId(i);
    imageView.setPadding(0, 0, 8, 0);
    imageView.setImageBitmap(BitmapFactory.decodeResource(
                getResources(), R.drawable.pic1));
    imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
    layout.addView(imageView);
}

    

Ответы

Ответ 1

Согласно en-SO делается это с помощью android:type="radial" так:


    



Прозрачность при этом делается проставлением значений альфа-канала в цвете. Это первые
две цифры.

При этом, чтобы градиент был сверху изображения можно


Использовать selector
картинку поместить в фон, а градиент как изображение ImageView
Или наложить поверх ImageView ещё один ImageView, в коий и поместить градиент любым
способом.
Извратиться, перевести оба изображения в BitMap и наложить попиксельно)

Android перемещение ImageView по swipe

#android #imageview #android_imageview #swipe

Всем привет!

Реализовано простое активити с картинкой (скрин ниже).

Как сделать выход из активити наподобие как реализовано в приложении VK и во многих
других приложениях (свайп вверх/вниз по ImageView). Чтобы при свайпе картинка немного
приподнималась/приопускалась в зависимости от свайпа.

При свайпе на определенный модуль высоты активити закрывается, иначе картинка возвращается
на начальное положение.

В принципе обработку свайпа вроде есть понимание как сделать, но вот как поднимать/опускать
ImageView при этом вслед за пальцем на экране, что то я не догоняю. Возможно не в ту
сторону иду, направьте в нужное русло.














Заранее спасибо.
    

Ответы

Ответ 1

На счет перемещения за пальцем - добавляешь к своему ImageView onTouchListener:

ImageView.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View view, MotionEvent event) {
            switch (event.getAction()) {

                case MotionEvent.ACTION_DOWN:
                    dX = view.getX() - event.getRawX();
                    dY = view.getY() - event.getRawY();
                    break;

                case MotionEvent.ACTION_MOVE:
                    view.animate()
                            .x(event.getRawX() + dX)
                            .y(event.getRawY() + dY)
                            .setDuration(0)
                            .start();                     
                    break;
                case MotionEvent.ACTION_UP:
                    break;
                default:
                    return false;
            }
            return true;
        }
    });


Таки образом у тебя ImageView будет следовать за пальцем. А дальше, когда ты отпустишь
ее (MotionEvent.ACTION_UP) определяешь - если смещение не большое, то с анимацией перемещаешь
ImageView обратно, если смещение достаточное - то выходишь из активити.

Как растянуть картинку на всю доступную ширину

#java #android #android_imageview

Есть ImageView  которое находится внутри LinearLayout. Т.к.  у картинки может быть
как вертикальная так и горизонтальная ориентация выглядят они соответственно тоже по
разному, можно ли как то вставить картинку (растянуть ее) на всю доступную  ширину,
при этом зафиксировав значение высоты. Т.е. что  бы  в прямоугольнике с фиксированной
высотой и шириной равной размерам контейнера в котором находится ImageView можно было
установить картинку (либо ее фрагмент), что бы при любой ориентации картинки они смотрелись
одинаково?

вот что у меня получилось




image_view.xml



    

Ответы

Ответ 1




Параметр scaleType отвечает за размер самой картинки, установленной при помощи src
(для background не будет работать!). Размер самого объекта ImageView не зависит от
размера изначальной картинки.

scaleType="centerCrop" означает, что картинка будет увеличена (сохраняя пропорции)
до тех пор, пока хотя бы одно измерение не будет равно размеру ImageView. Все, что
будет вылезать, видно не будет (от англ. crop - обрезать).

Как наложить фильтр на ImageView

Я хочу сделать фильтр на чёрно-белое изображение, это мне нужно для разных тем в приложении. Как я понимаю для этого надо использовать
ImageView header = (ImageView) findViewById(R.id.drawer_header); header.setColorFilter(R.color.my_color);
Я создал отдельный проект для тестирования и вот что получилось:

Но если я нажимаю на любую кнопку, кроме "убрать фильтр" (он ставит цвет android.R.color.transparent), получается вот такая фигня:

Почему он делает всё фиолетовым? По логике всё должно работать. Приведу код применения цвета полностью:
...
// Покрасить в красный public void setRedColor(View v) { ImageView header = (ImageView) findViewById(R.id.header); header.setColorFilter(R.color.red); }
// Покрасить в синий public void setBlueColor(View v) { ImageView header = (ImageView) findViewById(R.id.header); header.setColorFilter(R.color.blue); }
// Покрасить в зелёный public void setGreenColor(View v) { ImageView header = (ImageView) findViewById(R.id.header); header.setColorFilter(R.color.green); }
// Убрать краску public void setNullColor(View v) { ImageView header = (ImageView) findViewById(R.id.header); header.setColorFilter(android.R.color.transparent); }
Разметка:

Как отобразить определенную часть изображения в ImageView?

У меня есть список фотографий, который я отображаю в ListView с помощью адаптера.
Сейчас я отображаю фото таким образом:
PhotoAdapter.ViewHolder viewHolder; if (view == null) { view = inflater.inflate(R.layout.list_view_photo_item, viewGroup, false);
viewHolder = new PhotoAdapter.ViewHolder(view); view.setTag(viewHolder); } else { viewHolder = (PhotoAdapter.ViewHolder) view.getTag(); }
picasso.load(photo.getImageUrl()) .placeholder(R.drawable.bg_small_11) .into(viewHolder.image);
Это обычное отображение. А у меня стоит задача отобразить фото по указанным координатам (левая верхняя, правая верхняя, левая нижняя и правая нижняя точка). То есть я не хочу отображать всё фото, а только этот кусок фото, который пользователь раньше выбрал как превью, и я хочу отображать именно его. Сервер мне возвращает полностью всё фото + координаты (в PX) этого превью. Кто, что может посоветовать?

Ответ

Метод transform и интерфейс Transformation позволяют изменить изображение как душе угодно:
picasso.load(photo.getImageUrl()) .placeholder(R.drawable.bg_small_11) .transform(new Transformation {
@Override public Bitmap transform(Bitmap source) { Bitmap result = Bitmap.createBitmap(source, x, y, width, height); if (result != source) source.recycle(); return result; }
@Override public String key() { return "crop()"; } }) .into(viewHolder.image);

ImageView и покрывающий его круглый прозрачный градиент

Дано:
ImageView, в который загружена круглая .png картинка.
Как программно добавить поверх картинки круглый градиент из drawable.xml ?
При этом сквозь градиент должно быть видно картинку.
UPD:
ImageView я добавляю на экран кодом:
linearLayout.addView(imageView)
При клике на ImageView нужно, чтобы появился прозрачный градиент в этом ImageView и через определенное время убрался.
По идеи можно прописать все ImageView(их 50, кол-во не меняется) в layout'е и обернуть ImageView в какой нибудь lаyout, добавив в него еще одну ImageView с градиентом, которую я буду делать визибл при нажатии.
На сколько плохо такое решение будет ?
Код как я добавляю картинки:
LinearLayout layout = (LinearLayout) findViewById(R.id.ll); for (int i = 0; i < 50; i++) { ImageView imageView = new ImageView(this); imageView.setId(i); imageView.setPadding(0, 0, 8, 0); imageView.setImageBitmap(BitmapFactory.decodeResource( getResources(), R.drawable.pic1)); imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE); layout.addView(imageView); }

Ответ

Согласно en-SO делается это с помощью android:type="radial" так:

Прозрачность при этом делается проставлением значений альфа-канала в цвете. Это первые две цифры.
При этом, чтобы градиент был сверху изображения можно
Использовать selector картинку поместить в фон, а градиент как изображение ImageView Или наложить поверх ImageView ещё один ImageView, в коий и поместить градиент любым способом. Извратиться, перевести оба изображения в BitMap и наложить попиксельно)

Как растянуть картинку на всю доступную ширину

Есть ImageView которое находится внутри LinearLayout. Т.к. у картинки может быть как вертикальная так и горизонтальная ориентация выглядят они соответственно тоже по разному, можно ли как то вставить картинку (растянуть ее) на всю доступную ширину, при этом зафиксировав значение высоты. Т.е. что бы в прямоугольнике с фиксированной высотой и шириной равной размерам контейнера в котором находится ImageView можно было установить картинку (либо ее фрагмент), что бы при любой ориентации картинки они смотрелись одинаково?
вот что у меня получилось

image_view.xml

Ответ

Параметр scaleType отвечает за размер самой картинки, установленной при помощи src (для background не будет работать!). Размер самого объекта ImageView не зависит от размера изначальной картинки.
scaleType="centerCrop" означает, что картинка будет увеличена (сохраняя пропорции) до тех пор, пока хотя бы одно измерение не будет равно размеру ImageView. Все, что будет вылезать, видно не будет (от англ. crop - обрезать).