안드로이드 앱 만들기 : jetpack compose IconButton 만들기에서 쉽게 하는 실수 (?)

로그인화면

xml layout 에서 jetpack compose로 이전을 하는 과정에서 범하는 실수 중에 한 가지를 기술해 두고자 합니다.  위 그림과 같이 카카오 X으로 로그인하는 페이지를 jetpack compose로 만들어 간다고 했을 때 이렇게 구현을 하게 될 듯합니다.

TextButton(onClick = { doKakaoLogin() }) {
    Image(
        painter = painterResource(id = R.drawable.kakao_login_medium_wide),
        contentDescription = "",
        modifier = Modifier
            .width(300.dp)
            .height(45.dp)
    )
}

카카오에서 지원해 주는 로그인 연동 버튼이미지를 넣어서 이미지 버튼을 하나 만들어 보려고 했습니다.  그런데 이걸 IconButton으로 구현을 하려고 하는 실수를 범하게 되더라고요. 

 

문제가 되는 부분은 IconButton에 들어가는 이미지 을 Icon으로 처리를 하려고 단순하게 생각을 했다는 것입니다. 그런 경우 원래 이미지 크기만큼 화면에 표시가 되어야 하는데, 그렇게 되지 않는 문제가 발생하기도 했습니다. 

 

 IconButton 이 적용된 화면 예시

IconButton 이 적용된 예시

이렇게 구현이 되어 다른 문제가 있는 것으로 생각을 하게 되는 실수를 범하게 되었습니다.   그것 때문에 2일이나 시간을 허비했다는 슬픈 이야기가 있습니다. 

 

TextButton으로 처리 하기 

TextButton 으로 처리하게 되면,  화면에 버튼을 나타내는 텍스트를 표시할 수 도 있으나, Image을 넣어서 사용할 수 도 있습니다.  물론 사전에 협의가 되어야 하겠지만요.

 

이렇게 하는 경우가 되어야 Image의 width 나 height을 선언해서 그 크기를 정의할 수 있습니다.