In an app using FastAdapter and ConstraintLayout I display a list of completed games (pardon the non-english characters in the screenshot):
When the app user clicks an item in the list (anywhere in the item), I would like to display an image view with a square game board and also change the plus image view to minus:
For that I have already prepared a method:
private void toggleDetails() {
if (mBoard.getVisibility() == View.GONE) {
mBoard.setVisibility(View.VISIBLE);
mDetails.setImageResource(R.drawable.minus_circle_gray);
} else {
mBoard.setVisibility(View.GONE);
mDetails.setImageResource(R.drawable.plus_circle_gray);
}
}
However my problem is that I am not sure, where to call the method.
Should I add a click listener to the fast adapter object or should I add it to my view holder?
Also, when looking at ExpandableSampleActivity example, I notice that there is some animation and wonder how to animate my disclosure of the mBoard image view...
Below is my current source code:
public class FinishedGameItem extends AbstractItem<FinishedGameItem, FinishedGameItem.ViewHolder> {
private final static String WON = "won";
private final static String LOST = "lost";
public long stamp;
public int gid;
public int score1;
public int score2;
public int elo1;
public int elo2;
public String state1;
public String finished;
public String given1;
public String given2;
public String photo1;
public String photo2;
@Override
public int getType() {
return R.id.finished_game_item_id;
}
@Override
public int getLayoutRes() {
return R.layout.item_finished_game;
}
@NonNull
@Override
public ViewHolder getViewHolder(@NonNull View v) {
return new ViewHolder(v);
}
protected static class ViewHolder extends FastAdapter.ViewHolder<FinishedGameItem> {
private ImageView mDetails;
private TextView mGid;
private TextView mFinished;
private TextView mScore1;
private TextView mScore2;
private TextView mGiven1;
private TextView mGiven2;
private TextView mElo1;
private TextView mElo2;
private ImageView mPhoto1;
private ImageView mPhoto2;
private ImageView mBoard;
public ViewHolder(View view) {
super(view);
mDetails = view.findViewById(R.id.details);
mGid = view.findViewById(R.id.gid);
mFinished = view.findViewById(R.id.finished);
mScore1 = view.findViewById(R.id.score1);
mScore2 = view.findViewById(R.id.score2);
mGiven1 = view.findViewById(R.id.given1);
mGiven2 = view.findViewById(R.id.given2);
mElo1 = view.findViewById(R.id.elo1);
mElo2 = view.findViewById(R.id.elo2);
mPhoto1 = view.findViewById(R.id.photo1);
mPhoto2 = view.findViewById(R.id.photo2);
mBoard = view.findViewById(R.id.board);
}
@Override
public void bindView(@NonNull FinishedGameItem item, @NonNull List<Object> payloads) {
Context ctx = mDetails.getContext();
Resources res = mDetails.getResources();
String result = (WON.equals(item.state1) ? "Victory" : (LOST.equals(item.state1) ? "Loss" : "Draw"));
mDetails.setImageResource(R.drawable.plus_circle_gray);
mBoard.setVisibility(View.GONE);
mGid.setText(r.getString(R.string.str_game, item.gid));
mFinished.setText(result + " / " + item.finished);
mScore1.setText(res.getString(R.string.str_score, item.score1));
mScore2.setText(res.getString(R.string.str_score, item.score2));
mGiven1.setText(item.given1);
mGiven2.setText(item.given2);
mElo1.setText(String.valueOf(item.elo1));
mElo2.setText(String.valueOf(item.elo2));
if (URLUtil.isHttpsUrl(item.photo1)) {
Picasso.with(ctx))
.load(item.photo1)
.placeholder(R.drawable.account_gray)
.into(mPhoto1);
}
if (URLUtil.isHttpsUrl(item.photo2)) {
Picasso.with(ctx)
.load(item.photo2)
.placeholder(R.drawable.account_gray)
.into(mPhoto2);
}
Picasso.with(ctx)
.load("http://slova.de/words/board2.php?gid=" + item.gid)
.placeholder(R.drawable.checkerboard_gray)
.into(mBoard);
}
@Override
public void unbindView(@NonNull FinishedGameItem item) {
Context ctx = mDetails.getContext();
Picasso.with(ctx).cancelRequest(mPhoto1);
Picasso.with(ctx).cancelRequest(mPhoto2);
Picasso.with(ctx).cancelRequest(mBoard);
mDetails.setImageDrawable(null);
mGid.setText(null);
mFinished.setText(null);
mScore1.setText(null);
mScore2.setText(null);
mGiven1.setText(null);
mGiven2.setText(null);
mElo1.setText(null);
mElo2.setText(null);
mPhoto1.setImageDrawable(null);
mPhoto2.setImageDrawable(null);
mBoard.setImageDrawable(null);
}
// WHERE TO CALL THIS METHOD AND HOW TO ANIMATE?
private void toggleDetails() {
if (mBoard.getVisibility() == View.GONE) {
mBoard.setVisibility(View.VISIBLE);
mDetails.setImageResource(R.drawable.minus_circle_gray);
} else {
mBoard.setVisibility(View.GONE);
mDetails.setImageResource(R.drawable.plus_circle_gray);
}
}
}
}
I have also asked my question in the Github issue 713
UPDATE:
I have tried adding a boolean details to my model and use it in the bindView method (true means display the mBoard), but the app behaves erratically now, wrong details are shown and that not immediately after clicking -
Here the new Fragment source code:
mFastAdapter.withSelectable(true);
mFastAdapter.withOnClickListener(new OnClickListener<FinishedGameItem>() {
@Override
public boolean onClick(View v, @NonNull IAdapter<FinishedGameItem> adapter, @NonNull FinishedGameItem item, int position) {
item.details = !item.details;
// THIS METHOD IS CALLED IN DEBUGGER, BUT VIEWS ARE NOT UPDATED
return true;
}
});
And here the changed FinishedGameItem model:
public class FinishedGameItem extends AbstractItem<FinishedGameItem, FinishedGameItem.ViewHolder> {
private final static String WON = "won";
private final static String LOST = "lost";
public boolean details; // TRIED TO ADD THIS BOOLEAN
public long stamp;
public int gid;
public int score1;
public int score2;
public int elo1;
public int elo2;
public String state1;
public String finished;
public String given1;
public String given2;
public String photo1;
public String photo2;
@Override
public int getType() {
return R.id.finished_game_item_id;
}
@Override
public int getLayoutRes() {
return R.layout.item_finished_game;
}
@NonNull
@Override
public ViewHolder getViewHolder(@NonNull View v) {
return new ViewHolder(v);
}
protected static class ViewHolder extends FastAdapter.ViewHolder<FinishedGameItem> {
private ImageView mDetails;
private TextView mGid;
private TextView mFinished;
private TextView mScore1;
private TextView mScore2;
private TextView mGiven1;
private TextView mGiven2;
private TextView mElo1;
private TextView mElo2;
private ImageView mPhoto1;
private ImageView mPhoto2;
private ImageView mBoard;
public ViewHolder(View view) {
super(view);
mDetails = view.findViewById(R.id.details);
mGid = view.findViewById(R.id.gid);
mFinished = view.findViewById(R.id.finished);
mScore1 = view.findViewById(R.id.score1);
mScore2 = view.findViewById(R.id.score2);
mGiven1 = view.findViewById(R.id.given1);
mGiven2 = view.findViewById(R.id.given2);
mElo1 = view.findViewById(R.id.elo1);
mElo2 = view.findViewById(R.id.elo2);
mPhoto1 = view.findViewById(R.id.photo1);
mPhoto2 = view.findViewById(R.id.photo2);
mBoard = view.findViewById(R.id.board);
}
@Override
public void bindView(@NonNull FinishedGameItem item, @NonNull List<Object> payloads) {
Context ctx = mDetails.getContext();
Resources res = mDetails.getResources();
String result = (WON.equals(item.state1) ? "Victory" : (LOST.equals(item.state1) ? "Loss" : "Draw"));
mDetails.setImageResource(item.details ? R.drawable.minus_circle_gray : R.drawable.plus_circle_gray);
mBoard.setVisibility(item.details ? View.VISIBLE : View.GONE);
mGid.setText(res.getString(R.string.str_game, item.gid));
mFinished.setText(result + " / " + item.finished);
mScore1.setText(res.getString(R.string.str_score, item.score1));
mScore2.setText(res.getString(R.string.str_score, item.score2));
mGiven1.setText(item.given1);
mGiven2.setText(item.given2);
mElo1.setText(String.valueOf(item.elo1));
mElo2.setText(String.valueOf(item.elo2));
if (URLUtil.isHttpsUrl(item.photo1)) {
Picasso.with(ctx)
.load(item.photo1)
.placeholder(R.drawable.account_gray)
.into(mPhoto1);
}
if (URLUtil.isHttpsUrl(item.photo2)) {
Picasso.with(ctx)
.load(item.photo2)
.placeholder(R.drawable.account_gray)
.into(mPhoto2);
}
if (item.details) {
Picasso.with(ctx)
.load("http://slova.de/words/board2.php?gid=" + item.gid)
.placeholder(R.drawable.checkerboard_gray)
.into(mBoard);
}
}
@Override
public void unbindView(@NonNull FinishedGameItem item) {
Context ctx = mDetails.getContext();
Picasso.with(ctx).cancelRequest(mPhoto1);
Picasso.with(ctx).cancelRequest(mPhoto2);
Picasso.with(ctx).cancelRequest(mBoard);
mDetails.setImageDrawable(null);
mGid.setText(null);
mFinished.setText(null);
mScore1.setText(null);
mScore2.setText(null);
mGiven1.setText(null);
mGiven2.setText(null);
mElo1.setText(null);
mElo2.setText(null);
mPhoto1.setImageDrawable(null);
mPhoto2.setImageDrawable(null);
mBoard.setImageDrawable(null);
}
}
}
The app kind of works, but erratically:
