This post will guide you to create simple and awesome animation using RecyclerView on Its items.
RecyclerView with CardView is now becoming standard in Android where someone wants to display information in list style.
RecyclerView provides best memory optimizations by reusing list cells.
In today’s world developers are making awesome tricks and building beautiful apps, So in this post i am going to tell you how you can create some awesome and cool animation by using RecyclerView and CardView
What is in this post:
1.Creating a android application with android studio
2.Creating a MainActivity
3.Editing activity_main layout.xml
3.Creating a ItemsAdapter for RecyclerView
4.Creating a layout for Adapter’s single item.
In first step Create a project in Android studio with name CardAnimation and create MainActivity
To use recycler view and card view you need to add these libraries into app’s build.gradle file.
|
1 2 3 4 |
compile 'com.android.support:appcompat-v7:25.3.1' compile 'com.android.support:recyclerview-v7:25.3.1' compile 'com.android.support:cardview-v7:25.3.1' compile 'com.squareup.picasso:picasso:2.5.2' |
Now edit you MainActivity’s layout file and put following contents
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:background="@color/appBackground" 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" tools:context="com.codezlab.cardanimation.activites.MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerHorizontal="true" android:layout_centerVertical="true" /> </RelativeLayout> |
Now your MainActivity code will be like
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
public class MainActivity extends AppCompatActivity { private RecyclerView mRecyclerView; private ItemsAdapter itemsAdapter; private List<String> imagesList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imagesList=new ArrayList<>(); imagesList.add("https://cdn.pixabay.com/photo/2016/11/26/00/18/car-1859759__340.jpg"); imagesList.add("https://cdn.pixabay.com/photo/2016/11/18/12/44/wristwatch-1834241__340.jpg"); imagesList.add("https://cdn.pixabay.com/photo/2015/08/13/17/24/vintage-1950s-887272__340.jpg"); imagesList.add("https://cdn.pixabay.com/photo/2014/09/03/20/15/legs-434918__340.jpg"); imagesList.add("https://cdn.pixabay.com/photo/2016/11/22/22/55/buildings-1851047__340.jpg"); imagesList.add("https://cdn.pixabay.com/photo/2014/12/10/10/27/straw-carts-563005__340.jpg"); imagesList.add("https://cdn.pixabay.com/photo/2014/07/20/10/40/bottle-397697__340.jpg"); imagesList.add("https://cdn.pixabay.com/photo/2014/06/17/02/54/car-370173__340.jpg"); imagesList.add("https://cdn.pixabay.com/photo/2015/04/10/00/39/snack-715534__340.jpg"); imagesList.add("https://cdn.pixabay.com/photo/2016/08/30/18/45/grilled-1631727__340.jpg"); imagesList.add("https://cdn.pixabay.com/photo/2013/11/21/12/25/orange-214872__340.jpg"); imagesList.add("https://cdn.pixabay.com/photo/2016/02/05/15/34/pasta-1181189__340.jpg"); imagesList.add("https://cdn.pixabay.com/photo/2014/08/20/23/10/raspberries-422979__340.jpg"); imagesList.add("https://cdn.pixabay.com/photo/2015/02/05/05/58/peanut-624601__340.jpg"); imagesList.add("https://cdn.pixabay.com/photo/2015/04/10/00/41/food-715539__340.jpg"); mRecyclerView=(RecyclerView)findViewById(R.id.recycler_view); mRecyclerView.setLayoutManager(new LinearLayoutManager(this)); itemsAdapter=new ItemsAdapter(this,imagesList); mRecyclerView.setAdapter(itemsAdapter) } } |
In above code i am using a List to store images url which will be loaded at runtime by image loader and image caching library Picasso, Also you need to add internet permission in manifest file so that above images can be downloaded.
Now ItemsAdapter is a custom adapter class which extends RecyclerView.Adapter.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
package com.codezlab.cardanimation.adapters; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.view.animation.AnimationUtils; import android.widget.ImageView; import com.codezlab.cardanimation.R; import com.squareup.picasso.Picasso; import java.util.List; /** * Created by coderzlab on 10/6/17. */ public class ItemsAdapter extends RecyclerView.Adapter<ItemsAdapter.CardViewHolder>{ private List<String> list; private Context mContext; public ItemsAdapter(Context mContext,List<String> list) { this.mContext=mContext; this.list = list; } @Override public CardViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { return new CardViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.card_single_item, parent, false)); } @Override public void onBindViewHolder(CardViewHolder holder, int position) { Picasso.with(mContext).load(list.get(position)).into(holder.imageIV); holder.getView().setAnimation(AnimationUtils.loadAnimation(mContext,R.anim.zoom_in)); } @Override public int getItemCount() { return list.size(); } protected class CardViewHolder extends RecyclerView.ViewHolder{ private View view; protected ImageView imageIV; public CardViewHolder(View itemView) { super(itemView); this.view=itemView; this.imageIV=(ImageView)itemView.findViewById(R.id.imageIV); } public View getView() { return view; } } } |
Inside onCreateViewHolder we need to inflate custom layout which contains CardView and and ImageView
Create a file with name card_single_item.xml
and place following contents inside file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/imageIV" android:layout_width="match_parent" android:layout_height="wrap_content" android:adjustViewBounds="true" android:scaleType="centerCrop" android:minHeight="200dip" /> </android.support.v7.widget.CardView> </LinearLayout> |
|
1 2 3 4 5 6 7 |
@Override public void onBindViewHolder(CardViewHolder holder, int position) { Picasso.with(mContext).load(list.get(position)).into(holder.imageIV); holder.getView().setAnimation(AnimationUtils.loadAnimation(mContext,R.anim.zoom_in)); } |
Is the main logic for animation and image loading is inside onBindViewHolder method
As you can see there is zoom_in animation file has been used to animate cardview
Now you need to create a anim directory inside app’s resources folder and create
a zoom_in.xml file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" > <scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fromXScale="0.7" android:fromYScale="0.7" android:pivotX="50%" android:pivotY="50%" android:toXScale="1" android:toYScale="1" > </scale> </set> |
Now you have done all the things to make card zoom in animation.
You can download complete code from here
9 Comments
student
Wow, fantastic weblog format! How lengthy have you been blogging for? you made running a blog look easy. The full glance of your web site is fantastic, let alone the content material!
oed
Very good information. Lucky me I came across your blog by chance. I’ve book-marked it for later!
Satvinder Singh
Your welcome
online education degrees
Spot on with this write-up, I actually believe this web site needs far more attention. I’ll probably be back again to read more, thanks for the information!
finance and business
If some one wishes to be updated with most up-to-date technologies afterward he must be pay a quick visit this website and be up to date every day.
secured
Aw, this was an exceptionally nice post. Spending some time and actual effort to produce a really good article… but what can I say… I procrastinate a lot and don’t seem to get anything done.
Eric
Hi there, I check your new stuff regularly. Your writing style is witty, keep it up!
hmn
I do consider all the ideas you have offered for your post. They are very convincing and can certainly work. Still, the posts are very quick for starters. May just you please prolong them a little from subsequent time? Thanks for the post.
education sites
continuously i used to read smaller posts that as well clear their motive, and that is also happening with this article which I am reading at this time.