Jetpack Compose로 간단한 버튼 UI 만들기

Jetpack Compose로 간단한 버튼을 만들고 클릭하면 로그를 출력하는 간단한 예제를 작성해 보겠습니다. 

 

안드로이드 스튜디오에서 "New Project>Empty Activity"로 새로운 프로젝트를 다음과 같이 생성합니다.

 

프로젝트 이름을 "compose_02_04"이라고 입력하고 프로젝트를 생성합니다.

 

프로젝트를 생성하면 자동으로 다음과 같이 코드가 생성이 됩니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Compose_02_04Theme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

 

자동으로 생성된 코드에서 다음과 같이 Greeting 컴포즈 함수를 다음과 같이 삭제합니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Compose_02_04Theme {
            }
        }
    }
}


@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Compose_02_04Theme {
    }
}

 

이제 준비 과정이 끝났습니다. 간단히 화면에 버튼을 만들고 클릭했을떄 로그를 출력하고 클릭했을 때 애니매이션 처리를 해보겠습니다.

 

Column을 사용해서 버튼을 화면에 배치 해보겠습니다. 버튼을 배치하기 위해서 Column을 사용하여 화면 중앙 상단에 배치 하도록 레이아웃을 만들어 보겠습니다.  먼저 Modifier.fillMaxSize()를 사용하여 Column의 크기를 화면 전체로 설정했습니다. 배경색은 Color(0xFFD3D3D3)로 연한 회색으로 지정하여 전체 화면의 배경이 부드러운 느낌을 주도록 했습니다. 또한, padding(16.dp)를 추가하여 가장자리에서 약간의 여백을 주었습니다.

 

정렬은 수평 방향으로 중앙(Alignment.CenterHorizontally)에 맞추고, 수직 방향으로는 위쪽(Arrangement.Top)에 배치하여 레이아웃의 컨텐츠가 화면 상단에 자연스럽게 위치하도록 구성했습니다. 

@Composable
fun CreateButton(){
    Column (
        modifier = Modifier
            .fillMaxSize()
            .background(
                Color(0xFFD3D3D3))//배경색을 연한 회색으로 변경
                .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement =  Arrangement.Top
    ){

    }

}

 

이렇게 기본적인 배경과 정렬을 설정한 후, 버튼을  다음과 같이 추가합니다.

 

Button(
    onClick = { /* TODO: 버튼 클릭 시 처리할 작업 */ },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color(0xFFCCCCCC)  // 버튼 배경색 설정
    ),
    modifier = Modifier.fillMaxWidth()
) {
    Text(
        text = "BUTTON01",
        fontSize = 16.sp,
        fontWeight = FontWeight.Bold
    )
}

 

기본적인 버튼과 배경색만 설정했습니다. 버튼의 모양이나 글꼴을 수정하여 더 다양한 스타일을 적용할 수 있습니다. 예를 들어:

• 배경색 변경: containerColor = Color(0xFFCCCCCC) 부분을 수정하여 버튼의 색상을 쉽게 바꿀 수 있습니다.
• 글자 크기 조정: fontSize = 16.sp를 원하는 크기로 조정하여 텍스트 크기를 변경할 수 있습니다.
• 버튼 폭 조절: modifier = Modifier.fillMaxWidth()를 사용하여 버튼의 너비를 조절할 수 있습니다.

이제 버튼을 클릭할때 로그를 찍어 보겠습니다.

 

onClick = {
    Log.d("ButtonClick", "BUTTON01 클릭됨!")  // 버튼 클릭 시 로그 출력
},

 

버튼을 클릭하면 로그를 출력하도록 onClick 람다(Lambda) 형태의 블록 안에 **Log.d** 함수를 추가하면 버튼이 눌릴 때마다 "BUTTON01 클릭됨!" 로그를 작성하게 됩니다. 

 

Button(
    onClick = {
        Log.d("ButtonClick","BUTTON01 클릭됨!")
              },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color(0xFFCCCCCC)  // 버튼 배경색 설정
    ),
    modifier = Modifier.fillMaxWidth()
) {
    Text(
        text = "BUTTON01",
        fontSize = 16.sp,
        fontWeight = FontWeight.Bold
    )
}

 

👉 참고: 로그 메시지는 앱이 디버그 모드에서 실행될 때만 출력됩니다. 실제 출시 버전에서는 기본적으로 로그 메시지가 표시되지 않으므로 개발 시에만 사용하세요.

 

 

로그를 내용을 확인 할려면 다음 그림과 같이 preview화면이 아닌 애뮬레이터를 실행하고 왼쪽 하단에 고양이 모양의 아이콘을 클릭해서 로그캣 화면을 실행하고 애뮬레이터 화면의 버튼을 클릭하면 오른쪽 밑에 로그가 출력되는것을 확인 할 수 있습니다.

 

 

안드로이드 스튜디오에서 애뮬레이터로 실행하면 다음과 같이 화면이 출력이 됩니다. 버튼을 클릭하면 위에 화면처럼 로그가 출력됩니다.  다음 포스트에서는 버튼의 색상 글꼴 등을 좀 더 수정해보고  클릭 시 애니메이션도 추가 해보겠습니다.