[안드로이드] RecyclerView Item Animation 서서히 나타나는 효과 주는 방법

이번 시간에는 리스트로 데이터를 보여줄 때 사용하는

RecyclerView에 애니메이션(Animation)을 적용시켜

서서히 리스트가 보여지는 방법을 알아보겠습니다.

---

목차

1. Item 클래스 만들기 Item.java

2. Item 화면 만들기 item_layout.xml

3. ItemAdapter 만들기 ItemAdapter.java

4. 애니메이션 폴더 생성 및 애니메이션 파일 생성

5. 메인 화면 구성 activity_main.xml

6. 메인 코드 구현 MainActivity.java

7. 실행화면

---

1. Item 클래스 만들기 Item.java

public class Item {
    String title;
    String description;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }
}

2021.12.31 - [안드로이드] - [안드로이드] 자바 클래스 생성하는 방법

[안드로이드] 자바 클래스 생성하는 방법

 

2. Item 화면 만들기 item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:backgroundTint="@color/purple_200"
        app:cardCornerRadius="20dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/title_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:text="Title"
                android:textColor="@color/white"
                android:textSize="15sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/desc_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:text="description"
                android:textColor="@color/white"
                android:textSize="15sp"
                android:textStyle="bold" />
        </LinearLayout>

    </androidx.cardview.widget.CardView>
</RelativeLayout>

2022.01.01 - [안드로이드] - [안드로이드 스튜디오] 레이아웃 추가하는 방법

[안드로이드 스튜디오] 레이아웃 추가하는 방법

 

3. ItemAdapter 만들기 ItemAdapter.java

화면과 데이터를 연결해주는 기능을 하는 클래스입니다.

public class ItemAdapter extends RecyclerView.Adapter<ItemAdapter.ViewHolder> {

    ArrayList<Item> items = new ArrayList<Item>();

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {

        LayoutInflater inflater = LayoutInflater.from(viewGroup.getContext());
        View itemView = inflater.inflate(R.layout.item_layout, viewGroup, false);
        
        return new ViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder viewHolder, int position) {

        Item item = items.get(position);
        viewHolder.setItem(item);
    }

    public void addItem(Item item){
        items.add(item);
    }

    public void removeAllItem(){
        items.clear();
    }

    @Override
    public int getItemCount() {
        return items.size();
    }

    static class ViewHolder extends RecyclerView.ViewHolder{

        TextView title_view;
        TextView description;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);

            title_view = itemView.findViewById(R.id.title_text);
            description = itemView.findViewById(R.id.desc_text);

        }

        public void setItem(Item item){

            title_view.setText(item.getTitle());
            description.setText(item.getDescription());
        }
    }
}

 

4. 애니메이션 폴더 생성 및 애니메이션 파일 생성

 item_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="600">
    <translate
        android:fromYDelta="100" android:toYDelta="0"/>
    <scale
        android:fromXScale="70%" android:toXScale="100%"
        android:fromYScale="70%" android:toYScale="100%"
        android:pivotY="50%" android:pivotX="50%"/>
    <alpha
        android:fromAlpha="0" android:toAlpha="1"/>
</set>

 item_layout_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:delay="15%"
    android:animationOrder="normal" android:animation="@anim/item_anim">
</layoutAnimation>

2022.01.01 - [안드로이드] - [안드로이드 스튜디오] 애니메이션(Animation) 폴더 및 파일 생성하는 방법

[안드로이드 스튜디오] 애니메이션(Animation) 폴더 및 파일 생성하는 방법

 

 

5. 메인 화면 구성 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:layoutAnimation="@anim/item_layout_animation"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        />

    <Button
        android:id="@+id/search_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="조회"/>

</LinearLayout>

 

6. 메인 코드 구현 MainActivity.java

public class MainActivity extends FragmentActivity {

    RecyclerView recyclerView;
    ItemAdapter itemAdapter;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        recyclerView = findViewById(R.id.recycler_view);
        
        itemAdapter = new ItemAdapter();
        recyclerView.setAdapter(itemAdapter);

        Button search_btn = findViewById(R.id.search_btn);
        search_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                //조회 전 화면 클리어
                itemAdapter.removeAllItem();
                
                //샘플 데이터 생성
                for(int i = 0; i < 20; i++){
                    
                    Item item = new Item();
                    item.setTitle("title"+i);
                    item.setDescription("description" + i);
                    
                    //데이터 등록
                    itemAdapter.addItem(item);
                }
                
                //적용
                itemAdapter.notifyDataSetChanged();

                //애니메이션 실행
                recyclerView.startLayoutAnimation();
            }
        });
    }
}

 

7. 실행화면