I will be using a library for my android fragment. I chose cardslib as it offers a lot of features. Now, I am trying to create a single MaterialLargeImageCard for the fragment.
inside my fragment xml I added the layout for the card. I am utilizing native material largeimage card
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:attr/selectableItemBackground"
tools:context="com.example.emil.gamerzwiki.NewsFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<it.gmariotti.cardslib.library.view.CardViewNative
android:id="#+id/carddemo_largeimage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card:card_layout_resourceID="#layout/native_material_largeimage_card"
style="#style/card_external"
/>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/games_list_recyclerView"
android:divider="#color/gw.dividerColor"
android:dividerHeight="4dp"
>
</android.support.v7.widget.RecyclerView>
</LinearLayout>
Inside my fragment, I have the following model setup according to
https://github.com/gabrielemariotti/cardslib/blob/master/doc/MATERIALCARD.md#how-to-build-a-material-card-with-an-image
ArrayList<BaseSupplementalAction> actions = new ArrayList<BaseSupplementalAction>();
// Set supplemental actions
TextSupplementalAction t1 = new TextSupplementalAction(getActivity(), R.id.text1);
t1.setOnActionClickListener(new BaseSupplementalAction.OnActionClickListener() {
#Override
public void onClick(Card card, View view) {
Toast.makeText(getActivity()," Click on Text SHARE ",Toast.LENGTH_SHORT).show();
}
});
actions.add(t1);
TextSupplementalAction t2 = new TextSupplementalAction(getActivity(), R.id.ic1);
t2.setOnActionClickListener(new BaseSupplementalAction.OnActionClickListener() {
#Override
public void onClick(Card card, View view) {
Toast.makeText(getActivity()," Click on Text LEARN ",Toast.LENGTH_SHORT).show();
}
});
actions.add(t2);
//Create a Card, set the title over the image and set the thumbnail
MaterialLargeImageCard card =
MaterialLargeImageCard.with(getActivity())
.setTextOverImage("Italian Beaches")
.setTitle("This is my favorite local beach")
.setSubTitle("A wonderful place")
.useDrawableId(R.drawable.abc_ab_share_pack_holo_light)
.setupSupplementalActions(R.layout.card_native_material_supplemental_cations_large_icon, actions)
.build();
card.setOnClickListener(new Card.OnCardClickListener() {
#Override
public void onClick(Card card, View view) {
Toast.makeText(getActivity()," Click on ActionArea ",Toast.LENGTH_SHORT).show();
}
});
It just displays an empty card when I run the app. It seems the model is not connected to the card view, is there any way to connect this? or am I doing something wrong?
Please help thanks!
After some reading, This might be helpful to someone so I'll just post the answer
It seems we need to connect the card object and the layout by
CardViewNative cardView = (CardViewNative) view.findViewById(R.id.carddemo_largeimage);
cardView.setCard(card);
Related
I need to make an animation similar to a dropdown list when i click on the recyclerview element. In the item 2 xml markup, 1 is the main one, the second one becomes visible when clicked. According to the idea, it should be like this: I clicked on the element, it opened with a dropout animation. When pressed again, it closed. Also with animation. At the moment, the elements just abruptly appear and also abruptly disappear. I would not like to use third-party libraries, if there is such a possibility. I want to do something like this
holder.itemView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (!flag) {
Intent intent = new Intent(mContext, MessageActivity.class);
intent.putExtra("userid", user.getId());
mContext.startActivity(intent);
} else if(holder.info.getVisibility()==View.GONE) {
holder.info.setVisibility(View.VISIBLE);
} else {
holder.info.setVisibility(View.GONE);
}
}
);
In this section of code, I either open message activity, or open additional information about the user.
layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="10dp"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/info_about">
///Info about users(username and him photo)
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/info_about"
android:paddingTop="5dp"
android:layout_marginTop="45dp"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:visibility="gone"
android:id="#+id/info">
///Info about users(call_number, email... When i clicked on item)
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
Try this...
holder.binding.cardview.setOnClickListener(v -> {
if (holder.binding.expandableView.getVisibility()==View.GONE){
TransitionManager.beginDelayedTransition(holder.binding.cardview, new AutoTransition());
holder.binding.expandableView.setVisibility(View.VISIBLE);
} else {
TransitionManager.beginDelayedTransition(holder.binding.cardview, new AutoTransition());
holder.binding.expandableView.setVisibility(View.GONE);
}
if (holder.binding.playlayout.getVisibility()==View.GONE){
TransitionManager.beginDelayedTransition(holder.binding.cardview, new AutoTransition());
holder.binding.playlayout.setVisibility(View.VISIBLE);
} else {
TransitionManager.beginDelayedTransition(holder.binding.cardview, new AutoTransition());
holder.binding.playlayout.setVisibility(View.GONE);
}
});
}
I'm looking for a component like this:
If you have used Tinder, i want something like when you view a profile, how you can cycle through their pictures.
I'm pretty sure i can implement this manually, but was wondering if something already exists, and i don't really know how to look it up.
Thanks!
Edit: Also sorry for the bad title, didn't really know how to name these types of questions.
You can do your own implementation or could use some libraries. For you own implementation I would suggest using either ViewPager passing Views instead of fragments or PageTransformer if you want something more elaborate.
If you prefer libraries, I would recommend InfiniteCycleViewPager, sayyam's carouselview or you can go in a tour here: https://android-arsenal.com/tag/154, there is a lot of libraries with different implementations.
Example of implementation of an image slider using ViewPager:
First create your activity's xml with a ViewPager component:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager 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:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.stackoverflow.imageslider.MainActivity">
</android.support.v4.view.ViewPager>
Then in your activity's onCreate method instantiate the ViewPager and create an adapter for it:
ViewPager viewPager = findViewById(R.id.view_pager);
ViewPagerAdapter adapter = new ViewPagerAdapter(this, imageList);
viewPager.setAdapter(adapter);
In the ViewPagerAdapter class (that should extend PageAdapter), you will control the images overriding the method instantiateItem():
#NonNull
#Override
public Object instantiateItem(#NonNull ViewGroup container, int position) {
ImageView imageView = new ImageView(context);
imageView.setImageDrawable(imageList.get(position));
return imageView;
}
In this example imageList would be an List that is fulfilled somewhere else.
This example is based in a tutorial from codinginflow.com, and you can also take a look there.
Now let's see a simpler implementation, that would do just like you asked, touching the image sides instead of sliding.
Example of simpler implementation:
Create a layout with an ImageView and two buttons overriding it, one for next image on the right and one for previous image in the left:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:srcCompat="#tools:sample/backgrounds/scenic" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/buttonPrevious"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent" />
<Button
android:id="#+id/buttonNext"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent" />
</LinearLayout>
</FrameLayout>
Then set the onClick of each button to get the images from a list and set in the ImageView.
final ImageView imageView = findViewById(R.id.imageView);
Button next = findViewById(R.id.buttonNext);
next.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
currentPosition ++;
imageView.setImageDrawable(drawableList.get(currentPosition));
}
});
Button previous = findViewById(R.id.buttonPrevious);
previous.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
currentPosition --;
imageView.setImageDrawable(drawableList.get(currentPosition));
}
});
drawableList would be a Drawable that is fulfilled somewhere else. You could also change to a different kind of image list, doesn't matter. current position would be and int that starts at 0.
For PageTransformer I would recommend Bincy Baby's answer and phantomraa's answer.
In case the link gets broken I'll leave Bincy Baby's code here:
viewPagerMusicCategory.setPageTransformer(false, new ViewPager.PageTransformer() {
#Override
public void transformPage(View page, float position) {
Log.e("pos",new Gson().toJson(position));
if (position < -1) {
page.setScaleY(0.7f);
page.setAlpha(1);
} else if (position <= 1) {
float scaleFactor = Math.max(0.7f, 1 - Math.abs(position - 0.14285715f));
page.setScaleX(scaleFactor);
Log.e("scale",new Gson().toJson(scaleFactor));
page.setScaleY(scaleFactor);
page.setAlpha(scaleFactor);
} else {
page.setScaleY(0.7f);
page.setAlpha(1);
}
}
}
);
I think you could also mix PageTransformer with the examples I gave.
The libraries each one already have a good documentation, if not in the android arsenal you can find it in GitHub, and even if I post some code here, if the library closes, gets outdated or something like that, the code will not be useful anymore.
I'm looking for a solution to this that will allow me to expand a cardview to see more information and then easily collapse it. Google Keep has examples of cards like this. Anyone know how they do this? Would I create 2 versions of my cardview (one collapsed and one expanded) and then use an Animator class coupled with gesture methods to transition between the two views? I'm using a Recyclerview to hold my cardviews.
I found this if it is at all relevant: http://developer.android.com/training/animation/layout.html
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:animateLayoutChanges="true"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
//here put the view which is always visible
<LinearLayout
android:layout_width="match_parent"
android:visibilty="gone"
android:id="#+id/expandableLayout"
android:layout_height="wrap_content">
//here put which will collapse and expand
</LinearLayout>
</android.support.v7.widget.CardView>
take a boolean isexpanded in you arraylist object class
if (listobj.isexpanded)
{
holder.expandableLayout.setVisibility(View.VISIBLE);
}
else {
holder.expandableLayout.setVisibility(View.GONE);
}
holder.cardView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (listobj.isexpanded)
{
holder.expandableLayout.setVisibility(View.GONE);
listobj.isexpanded=false;
notifyItemChanged(position);
}
else {
holder.expandableLayout.setVisibility(View.VISIBLE);
listobj.isexpanded=true;
notifyItemChanged(position);
}
}
});
try someting like this
I have a card declared in the file cardslib_item_card_view:
<it.gmariotti.cardslib.library.view.CardViewNative
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
card_view:cardCornerRadius="4dp"
style="#style/native_recyclerview_card.base"
android:id="#+id/carddemo"
android:layout_width="match_parent" android:layout_height="wrap_content">
and set as content view within onCreate() method:
public class CardMariotti extends ActionBarActivity{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.cardslib_item_card_view);
//Create a Card
Card card = new Card(this);
CardViewNative cardView = (CardViewNative) this.findViewById(R.id.carddemo);
cardView.setCard(card);
card.setOnClickListener(new Card.OnCardClickListener() {
#Override
public void onClick(Card card, View view) {
Toast.makeText(CardMariotti.this, "Clickable card", Toast.LENGTH_LONG).show();
}
});
}
Now, I'd like to customize it with my own layout, containing a narrow header and some information, as follows:
<RelativeLayout android:id="#+id/cardlayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="?android:selectableItemBackground"
android:clickable="true">
<!-- layout containing 3 TextView -->
</RelativeLayout>
What is the canonic procedure for such a process? I've tried a good deal of adjustments, i.e.:
creating a second xml file called cardslib_item_layout.xml and referencing it with the Card's constructor this way: Card card = new Card(this, R.layout.cardslib_item_layout); and then setting the setContentView(R.layout.cardslib_item_card_view)
Appending the layout inside the card and then setting the setContentView(R.layout.cardslib_item_card_view).
This way; cardslib_item_card_view:
<it.gmariotti.cardslib.library.view.CardViewNative
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
card_view:cardCornerRadius="4dp"
android:id="#+id/carddemo"
android:layout_width="match_parent" android:layout_height="wrap_content">
<RelativeLayout>
<!-- my layout containing a header and some TextViews -->
</RelativeLayout>
</it.gmariotti.cardslib.library.view.CardViewNative>
In both tests I experience the following issues:
The overall result is completely distorced
most importantly, the RelativeLayout is placed ON TOP of the card, making any operation on the card impossible (for example, setting the Card.OnCardClickListener on the card itself won't work since the user will be clicking the RelativeLayout and not the card itself)
attempt 1:
attempt 2:
What is the canonic procedure?
EDIT2: ANSWER
The contribution given by #Msk worked fine for me, although I discovered later that with some minor changes it is also possible to obtain the same results by using the original cardslib's Card class, without resorting to the creation of a new class DeviceCard extending the Card class.
I was able to adjust my layout (header and the rest of the card's layout overlapping with each other, as shown in the screenshots) with just some minor and trivial changes in the cardslib_item_layout.xml file (which I had overlooked before); at the same time I was able to eliminate the phantom padding that is automatically attached to every card, by applying Mariotti's answer to this question.
Try this
You can define your own layout for the cards-lib.
Create your custom XML:
Here is an example custom_layout.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"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="8dp"
android:paddingRight="6dp"
android:paddingTop="7dp"
android:paddingBottom="7dp"
android:id="#+id/parentView">
<TextView
android:id="#+id/name"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="27"
android:paddingRight="8dp"
android:paddingLeft="8dp"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:text=""
android:layout_gravity="center"
android:editable="false"
/>
</LinearLayout>
In your JAVA code create a class for the custom card that you wish to use:
import it.gmariotti.cardslib.library.internal.Card;
import it.gmariotti.cardslib.library.internal.ViewToClickToExpand;
public class DeviceCard extends Card {
private String IP;
private String MAC;
private String name;
private Boolean reachable;
private Boolean editable;
Boolean markedFlag;
public DeviceCard(Context context) {
this(context, R.layout.custom_layout);
}
public DeviceCard(Context context,String param1,...,Type paramn) {
this(context, R.layout.device_card);
this.name = param1;
}
public DeviceCard(Context context, int innerLayout) {
super(context, innerLayout);
init();
Log.d("myTag", "Init called");
}
private void init(){
}
#Override
public void setupInnerViewElements(ViewGroup parent, final View view) {
Log.i("myTag","setupInnerView");
final TextView nameBox = (TextView)view.findViewById(R.id.name);
//edit name if required
}
}
Now in your JAVA code, when you need to use the card-list:
DeviceCard card = new DeviceCard(this, name);
This method has always worked for me
I am using cardslib (https://github.com/gabrielemariotti/cardslib) to create a project with cards and use picasso (http://square.github.io/picasso/), in order to dynamically create cards and load pictures into them with urls that I retrieve from Parse in a for loop.
The problem I have is that even though I retrieve the correct data from Parse, only one image is loaded in all of the cards. The titles, subtitles etc are loaded correctly for each separate card, only the image is the same everywhere.
My code is :
final ArrayList<Card> cards = new ArrayList<Card>();
final CardArrayAdapter mCardArrayAdapter = new CardArrayAdapter(this,cards);
mRecyclerView = (CardListView) this.findViewById(R.id.carddemo_largeimage_text);
AnimationAdapter animCardArrayAdapter = new SwingBottomInAnimationAdapter(mCardArrayAdapter);
animCardArrayAdapter.setAbsListView(mRecyclerView);
mRecyclerView.setExternalAdapter(animCardArrayAdapter, mCardArrayAdapter);
ParseQuery<ParseObject> query = ParseQuery.getQuery("places");
query.findInBackground(new FindCallback<ParseObject>() {
public void done(List<ParseObject> List, ParseException e) {
if (e == null) {
for ( i=0; i<List.size();i++){
id=new String();
id=List.get(i).getString("picture");
System.out.println(i+" "+ id);
MaterialLargeImageCard card =
MaterialLargeImageCard.with(mContext)
.setTextOverImage(List.get(i).getString("place_id"))
.setTitle(List.get(i).getString("subtitle"))
.setSubTitle(List.get(i).getString("description"))
.useDrawableExternal(new MaterialLargeImageCard.DrawableExternal() {
#Override
public void setupInnerViewElements(ViewGroup parent, View viewImage) {
Picasso.with(mContext).setIndicatorsEnabled(true); //only for debug tests
Picasso.with(mContext)
.load(id)
.error(R.drawable.ic_launcher)
.into((ImageView) viewImage);
}
})
.setupSupplementalActions(R.layout.carddemo_native_material_supplemental_actions_large, actions)
.build();
cards.add(card);
mCardArrayAdapter.notifyDataSetChanged();
card.setOnClickListener(new Card.OnCardClickListener() {
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
#Override
public void onClick(Card card, View view) {
Toast.makeText(mContext, " Click on ActionArea ", Toast.LENGTH_SHORT).show();
onClickStart();
Intent myIntent = new Intent(MainActivity.this, ParallaxToolbarScrollViewActivity.class);
//yIntent.putExtra("key", value); //Optional parameters
MainActivity.this.startActivity(myIntent);
}
});
}
} else {
Log.d("score", "Error: " + e.getMessage());
}
}
});
The layouts I use are:
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card="http://schemas.android.com/apk/res-auto"
xmlns:pew="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<it.gmariotti.cardslib.library.view.CardListView
android:id="#+id/carddemo_largeimage_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card:list_card_layout_resourceID="#layout/rowcard"
style="#style/card_external"
/></RelativeLayout>
rowcard.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card="http://schemas.android.com/apk/res-auto"
xmlns:pew="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<it.gmariotti.cardslib.library.view.CardViewNative
android:id="#+id/list_cardId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card:card_layout_resourceID="#layout/native_material_largeimage_text_card"
style="#style/card_external"
/></RelativeLayout>
native_material_largeimage_text_card.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card="http://schemas.android.com/apk/res-auto"
xmlns:pew="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Card visible layout -->
<it.gmariotti.cardslib.library.view.ForegroundLinearLayout
android:id="#+id/card_main_layout"
style="#style/card.native.main_layout_foreground"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<it.gmariotti.cardslib.library.view.component.CardThumbnailView
style="#style/card.native.card_thumbnail_outer_layout"
android:id="#+id/card_thumbnail_layout"
android:layout_width="match_parent"
card:card_thumbnail_layout_resourceID="#layout/native_thumbnail_largematerial"
android:layout_height="match_parent"/>
<!-- Main Content View -->
<FrameLayout
android:id="#+id/card_main_content_layout"
style="#style/card.native.material_large_image_content_outer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</it.gmariotti.cardslib.library.view.ForegroundLinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#color/greydiv"/>
<ViewStub
android:id="#+id/card_supplemental_actions_vs"
android:inflatedId="#+id/card_supplemental_actions"
android:layout_width="match_parent"
android:layout_height="wrap_content"/></LinearLayout>
And native_thumbnail_largematerial.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/card_material_largeimage_height">
<com.fmsirvent.ParallaxEverywhere.PEWImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_thumbnail_image"
android:transitionName="test"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:scaleType="centerCrop"
style="#style/card.native.card_thumbnail_image"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingRight="#dimen/card_thumbnail_image_text_over_padding_right"
android:paddingLeft="#dimen/card_thumbnail_image_text_over_padding_left"
android:paddingTop="#dimen/card_thumbnail_image_text_over_padding_top"
android:paddingBottom="#dimen/card_thumbnail_image_text_over_padding_bottom">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:fontFamily="#string/card_font_fontFamily_image_text_over"
android:id="#+id/card_thumbnail_image_text_over"
style="#style/card_thumbnail_image_text_over_textstyle"
/>
</FrameLayout></FrameLayout>
I use CardsLib and picasso together for almost all my cards. What I recommend you is to make a CustomCard which extends card and receives a ParseObject as a parameter for the card.
It would make your code much simpler as well as you would add your cards to the list this way:
for(ParseObject p : List) {
cards.add(new MyCustomCard(mContext, p));
}
Your custom card would look something like this:
public class MyCustomCard extends Card implements Card.OnCardClickListener {
private static final String LOG_TAG = MyCustomCard.class.getSimpleName();
private ParseObject parseObject;
public MyCustomCard(Context context, ParseObject data) {
super(context, R.layout.my_custom_layout);
this.parseObject = data;
this.setOnClickListener(this);
}
#Override
public void setupInnerViewElements(ViewGroup parent, View view) {
super.setupInnerViewElements(parent, view);
ImageView imageView = (ImageView) view.findViewById(R.id.data_thumbnail);
TextView title = (TextView) view.findViewById(R.id.title);
TextView text = (TextView) view.findViewById(R.id.text);
if(parseObject != null) {
Picasso.with(getContext()).load(parseObject.getString("picture")).fit().into(imageView);
title.setText(parseObject.getString("title"));
text.setText(parseObject.getString("text"));
}
}
#Override
public void onClick(Card card, View view) {
// in case your cards need to click on something. You don't need to
// override onCLick if you don't wish to have click functionality on the cards
}
}
You could even extend the MaterialLargeImageCard and use it's own XML instead of making your own.
I have some custom cards with Picasso examples in a few of my projects on github: check this project for more examples