안드로이드 앱 만들기 : jetpack compose URL 에서 image 받아와서 보여 주기 (feat coil)

샘플 이미지

오늘은 앱을 만들면서 이미지를 보여 주어야 하는 경우 중에  URL에서 이미지를 가져와 보는 것에 대해서 기술해 보겠습니다.  URL에서 image를 가져온다는 것은 서버에 저장된 image 일수도 있고, SNS profile의 image 정보일수도 있을 것입니다. 

 

구글에서 찾아보면 다른 것들도 많이 있기는 합니다.  그 중에서 coil 라이브러리를 이용해서 한번 만들어 보도록 하겠습니다. 

 

gradle 설정

그래들 설정은 아래 한 줄입니다. 현재 시점에서 최신 버전인 것으로 보입니다.  이 글을 보시는 시점에 최신 버전이 아니라면 아마도 android studio는 추천을 해 줍니다.

// image load from url
implementation("io.coil-kt:coil-compose:2.2.2")

 

manaifest  설정

당연한 이야기 겠지만, url에서 이미지를 받아 와야 하기 때문에 권한 설정을 해야 합니다. 또한 인터넷에서 자료를 받아 오는 것은 지연이 발생할 수 있기 때문에 application에서도 다음 문구의 추가가 필요합니다. 

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

    <application
        ...
        android:networkSecurityConfig="@xml/network_config"
        ...
	/>

이 설정을 하게 되면 xml 파일을 하나 추가해 주면 됩니다.  network_config.xml 이라는 이름으로 말입니다. 

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">apis.data.go.kr</domain>
    </domain-config>
</network-security-config>

이곳에 접속해서 받아오는 URL의 도메인 정보를 입력해 주면 됩니다. 

 

이제 Jetpack Compose  을 이용해서 이미지를 넣어 보겠습니다. 

 

 AsyncImage compose 사용해 보기

이미지를 가져오는 것은 AsyncImage 을 호출해 주는 것 하나면 해 주시면 됩니다.  model에 넣어주는 값이 https://...으로 시작하는 이미지의 URL 경로를 전달해 주는 것으로 끝입니다.

Row(
    modifier = Modifier.fillMaxWidth().padding(3.dp),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.Start
) {
    AsyncImage(
        model = item.kakaoProfileImage,
        contentDescription = item.inPhoneNumber,
        modifier = Modifier
            .width(60.dp)
            .height(60.dp)
            .wrapContentWidth(align = Alignment.Start)
            .padding(3.dp)
    )
    Text(text = item.inPhoneNumber, style = typography.bodyMedium, modifier = Modifier.padding(3.dp))
}

 

coil을 활용해서 jetpack compose 환경에서 URL에서 image를 가져와 보여주는 예제을 만들어 보았습니다. 

 

즐~ 코딩하세요.