[android] CardView와 커스텀 애니메이션 적용

15 Dec 2023

android

안녕하세요! 안드로이드 앱 개발을 하시는 분들을 위해 오늘은 CardView와 커스텀 애니메이션을 적용하는 방법에 대해 살펴보겠습니다.

1. CardView란 무엇인가?

CardView는 안드로이드 지원 라이브러리에서 제공하는 위젯으로, 손쉽게 그림자와 둥근 모서리를 가진 카드 형태의 UI를 만들 수 있습니다. 일반적으로 정보를 담고 있는 컨테이너로 사용되며, 많은 앱에서 주요 컨테이너로 활용되고 있습니다.

2. CardView 구현하기

먼저, build.gradle 파일에서 CardView 라이브러리를 의존성으로 추가합니다.

implementation 'androidx.cardview:cardview:1.0.0'

다음으로, 레이아웃 파일에 CardView를 추가하여 디자인을 구성합니다.

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp"
    app:cardUseCompatPadding="true">

    <!-- 내용을 추가하세요 -->

</androidx.cardview.widget.CardView>

3. 커스텀 애니메이션 적용하기

커스텀 애니메이션을 적용하려면 먼저 res/anim 디렉토리에 애니메이션 리소스 파일을 추가해야 합니다. 예를 들어, slide_in.xml과 slide_out.xml 파일을 추가하여 들어오는 애니메이션과 나가는 애니메이션을 정의할 수 있습니다.

<!-- slide_in.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0"
        android:duration="500"/>
</set>

<!-- slide_out.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="-100%p"
        android:duration="500"/>
</set>

애니메이션을 적용할 액티비티나 프래그먼트에서는 아래와 같이 Java 코드를 작성하여 애니메이션을 적용할 수 있습니다.

Animation slideIn = AnimationUtils.loadAnimation(this, R.anim.slide_in);
Animation slideOut = AnimationUtils.loadAnimation(this, R.anim.slide_out);

// 뷰에 애니메이션 적용
view.startAnimation(slideIn);
view.startAnimation(slideOut);

마무리

이제 당신의 안드로이드 앱에 멋진 CardView 디자인과 커스텀 애니메이션을 적용해보세요. 이러한 요소들은 사용자 경험을 향상시키고 앱을 보다 매력적으로 만들어줄 것입니다.

참고 문헌: