The Open Event Android App has an About Fragment which displays all the info about the event like name, time, location etc. It also shows social media buttons for the event. The problem was that the implementation of showing the social media buttons was not generic. The implementation was working fine for current FOSSASIA sample. If we generate the app for other events it creates a problem. It shows static buttons without proper mapping from social media button to social media link which creates a problem like on clicking GitHub button it opens Facebook link (issue #1792).
One solution to this problem is to implement recyclerview with social media buttons. In this post I explain how I have made social links implementation generic using RecyclerView.
Add RecyclerView in layout
The first step to do is to add recyclerview in the layout xml file and to create a list item for recyclerview which holds the image for the social link button. Then in the About Fragment find recyclerview element added in the xml file using findFragmentById() method.
1. Add recyclerview in xml file
In the layout xml file of About Fragment add recyclerview element. Define id, width, height, and gravity of recyclerview. Then specify list item for recyclerview using listitem attribute.
<android.support.v7.widget.RecyclerView
android:id="@+id/list_social_links"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:overScrollMode="never"
android:clipToPadding="false"
tools:listitem="@layout/item_social_link" />
2. Create item_social_link.xml
Now create a item_social_link.xml file and add a FrameLayout element. Inside the FrameLayout add an ImageView with appropriate id, width, height and padding.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout_social_link_parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/img_social_link"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/social_link"
android:padding="@dimen/padding_large"
android:tint="@color/white" />
</FrameLayout>
Add and initialize RecyclerView
After adding recyclerview in xml file we need to add RecyclerView field in the About Fragment java file. Now add and initialize SocialLinksListAdapter which extends RecyclerView.Adapter and will be used for populating the recyclerview with the social links.
@BindView(R.id.list_social_links)
protected RecyclerView socialLinksRecyclerView;
private SocialLinksListAdapter socialLinksListAdapter;
private List<SocialLink> mSocialLinks = new ArrayList<>();
Here mSocialLinks is the list of social links which is fetched from the Event object.
Create ViewHolder for social link button
Now create SocialLinkViewHolder which extends RecyclerView.ViewHolder and holds one social link item defined in item_social_link.xml file. This file is where the magic happens. Add ImageView, FrameLayout, SocialLink and context fields in it.
public class SocialLinkViewHolder extends RecyclerView.ViewHolder {
@BindView(R.id.img_social_link)
protected ImageView imageView;
@BindView(R.id.layout_social_link_parent)
protected FrameLayout layout;
private SocialLink socialLink;
private Context context;
public SocialLinkViewHolder(View itemView, Context context) {
super(itemView);
ButterKnife.bind(this, itemView);
this.context = context;
}
public void bindSocialLink(@NonNull SocialLink socialLink) {...}
private void setImageDrawable(@NonNull String name,@NonNull String link) {...}
private Drawable getDrawable(@DrawableRes int id) {...}
private void showView(boolean show) {...}
}
The bindSocialLink(SocialLink socialLink) method is called in the onBindViewHolder() method of the SocialLinksListAdapter. In this method initialize socialLink field and set drawable for ImageView according to SocialLink name using setImageDrawable() method.
public void bindSocialLink(@NonNull SocialLink socialLink) {
this.socialLink = socialLink;
setImageDrawable(socialLink.getName(), socialLink.getLink());
}
The setImageDrawable() method finds and sets appropriate image for social link button using the name of the social link. If the image for the social link is not found then it sets the visibility of the image view to GONE using showView(boolean show).
private void setImageDrawable(@NonNull String name,@NonNull String link) {
if (Utils.isEmpty(name) || Utils.isEmpty(link) || Utils.getSocialLinkDrawableId(name) == 1) {
showView(false);
return;
}
imageView.setImageDrawable(getDrawable(Utils.getSocialLinkDrawableId(name)));
}
The showView(boolean show) method handles visibility of ImageView and ImageView’s parent FrameLayout using setVisibility() method.
private void showView(boolean show) {
if (show) {
imageView.setVisibility(View.VISIBLE);
layout.setVisibility(View.VISIBLE);
} else {
imageView.setVisibility(View.GONE);
layout.setVisibility(View.GONE);
}
}
Set onClickListener to ImageView
Now it’s time to set the onClickListener in the constructor of the SocialLinkViewHolder to define what to do when user clicks on the ImageView.
imageView.setOnClickListener(view -> {
if (socialLink != null && !Utils.isEmpty(socialLink.getLink())) {
Utils.setUpCustomTab(context, socialLink.getLink());
}
});
Here we are setting custom tab for the social link using the setUpCustomTab() util method which will open the link.
Now run the app on the device or emulator. Here’s how it looks like,
Conclusion
The SocialLink impementation using the RecyclerView gives the great user experience in the application.
Additional resources
You must be logged in to post a comment.