[Android] Glide로 url로 받는 SVG. imageView에 넣기

웹개발자분이 svg로 받는거 간단할거라는 말에

네이티브에서 svg 아이콘 적용시키는 대신, 백엔드 개발자분이 svg를 url로 보내주는 방식으로 api를 짰는데,,,,,

 

거짓말,,,,, 간단하지 않쟈나 😭

기존 glide로는 svg를 동적으로 바인딩 시킬 수 없었고,,, 조큼 애먹었다,,,

 

총 2가지 문제가 있었다.

===============

1. Glide로 SVG를 넣기

2. api 30 이하(아마)에서 리사이징한 svg가 깨지는 현상

===============

 

1번은 구글링하고 glide의 샘플 코드를 보고 해결했지만,

2번에서 너무너무 당황했고,,, svg가 왜 깨져,,,,!!!! 했던,,,,

 

 

1. Glide로 SVG를 넣기

아래 링크를 걸어둔 깃의 샘플 코드를 프로젝트에 넣고 모듈까지 샘플 코드에 있는 그대로 수정해주면 된다.

 

 

이때 

Glide.with(iconIv.getContext()).load(Uri.parse(iconInfo.getIconImageUrl())).override(CommonUtils.getDp(activity, 50), CommonUtils.getDp(activity, 70)).into(iconIv);

이 코드로 했을때 api 30이상으로는 override를 쓰지 않고 layoutparams로 사이징했을때도

깨지지 않았으나,, 구린 테스팅폰은 api 26에서 blur된 것처럼 흐리게 나왔다.

https://stackoverflow.com/questions/46680109/image-becomes-blurry-when-loading-svg-with-glide

이런느낌,,,,,,,,,,,,,,

 

 

2. api 30 이하(아마)에서 리사이징한 svg가 깨지는 현상 (svg glide blurry error)

 

Glide.with(iconIv.getContext()).as(PictureDrawable.class).fitCenter()
                        .listener(new SvgSoftwareLayerSetter())
                        .load(Uri.parse(iconInfo.getIconImageUrl()))
                        .override(CommonUtils.getDp(activity, 50), CommonUtils.getDp(activity, 70))
                        .into(iconIv);

위의 코드를 이렇게 다 지정해서 해주니 문제 해결!!

 

누군가에겐,, 당연히 이렇게 했어야지,,,!! 하는 문제였을 수 있어도,,,

아직 1년차도 안된 쪼랩은,,, 이렇게 늘 삽질과 해결을 반복한답니다~~하핳~~~

 

그래도 행복해~~ 절거워~~~~ 해결했음 됏땅ㅎㅅㅎ

 

 

 

[참고]

https://github.com/bumptech/glide/tree/master/samples/svg/src/main/java/com/bumptech/glide/samples/svg

GitHub - bumptech/glide: An image loading and caching library for Android focused on smooth scrolling

https://stackoverflow.com/questions/46680109/image-becomes-blurry-when-loading-svg-with-glide

Image becomes blurry when loading SVG with Glide

https://stackoverflow.com/questions/46680109/image-becomes-blurry-when-loading-svg-with-glide

Image becomes blurry when loading SVG with Glide