Android – load recyclerview using images and videos
•
Android
I'm trying to build an application that displays twitter, Facebook and instagram feeds. I have a total of three clips for each social media platform, and each clip contains recyclerview. I'm facing the problem of effectively loading media. I'm using Picasso to load images and use mediaplayer to process videos. Because the feed contains videos and images, I have both ImageView and surfaceview in my layout file (videoview will not fill the video to the size of the view), and hide the ImageView or surfaceview according to the data. I also built a custom surfaceview for processing video and images, but it lags a little. Is there a better way to process images and videos in a single view?
Any help or improvement will be of great help. Thank you
This is the layout file for my twitter list item
<?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/apk/res-auto"
xmlns:custom_text="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
app:cardCornerRadius="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingEnd="16dp"
android:paddingStart="16dp">
<LinearLayout
android:id="@+id/retweet_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="center"
android:orientation="horizontal"
android:paddingTop="5dp"
android:weightSum="1.0">
<ImageView
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_weight="0.15"
android:contentDescription="@string/none"
android:scaleType="fitEnd"
android:src="@drawable/twitter_retweet" />
<TextView
android:id="@+id/retweet_user_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_weight="0.85"
android:text="@string/text"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:paddingBottom="8dp"
android:paddingTop="5dp">
<ImageView
android:id="@+id/twitter_profilePicture"
android:layout_width="48dp"
android:layout_height="48dp"
android:contentDescription="@string/none"
android:scaleType="fitXY"
android:src="@android:color/darker_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<MerchantApp.Android.Controls.CustomTextView
android:id="@+id/twitter_userName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:ellipsize="end"
android:lines="1"
android:maxLength="20"
android:text="@string/text"
custom_text:customTypeface="Fonts/Roboto-Regular.ttf" />
<MerchantApp.Android.Controls.CustomTextView
android:id="@+id/twitter_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:ellipsize="end"
android:gravity="end"
android:text="@string/text"
android:textSize="12sp"
custom_text:customTypeface="Fonts/Roboto-Light.ttf" />
</LinearLayout>
<LinearLayout
android:id="@+id/twitter_follow_follower_linear_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="2dp"
android:orientation="horizontal">
<TextView
android:id="@+id/followers_count"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="@string/text"
android:textSize="12sp"
android:textStyle="bold" />
<TextView
android:id="@+id/following_count"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:text="@string/text"
android:textSize="12sp"
android:textStyle="bold" />
</LinearLayout>
<MerchantApp.Android.Controls.CustomTextView
android:id="@+id/twitter_Feed_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:autoLink="all"
android:ellipsize="end"
android:maxLength="160"
android:maxLines="4"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:text="@string/text"
custom_text:customTypeface="Fonts/Roboto-Regular.ttf" />
<ImageView
android:id="@+id/twitter_Feed_image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginBottom="5dp"
android:contentDescription="@string/none"
android:scaleType="fitXY"
android:src="@drawable/animated_loading" />
<SurfaceView
android:id="@+id/twitter_Feed_video"
android:layout_width="match_parent"
android:layout_height="150dp"
android:visibility="gone" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="24dp"
android:orientation="horizontal"
android:weightSum="1.0">
<ImageView
android:id="@+id/twitter_Feed_reply"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="?android:attr/selectableItemBackground"
android:contentDescription="@string/none"
android:scaleType="fitStart"
android:src="@drawable/twitter_reply" />
<LinearLayout
android:id="@+id/twitter_retweeted_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="0.25"
android:clickable="true"
android:gravity="center_vertical">
<ImageView
android:id="@+id/twitter_Feed_retweeted_image"
android:layout_width="20dp"
android:layout_height="20dp"
android:clickable="false"
android:contentDescription="@string/none"
android:scaleType="fitXY"
android:src="@drawable/twitter_retweet" />
<MerchantApp.Android.Controls.CustomTextView
android:id="@+id/twitter_Feed_retweeted_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:clickable="false"
android:ellipsize="end"
android:gravity="center_vertical|start"
android:lines="1"
android:text="@string/text"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:textStyle="bold"
custom_text:customTypeface="Fonts/Roboto-Light.ttf" />
</LinearLayout>
<LinearLayout
android:id="@+id/twitter_favorite_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_weight="0.25"
android:clickable="true"
android:gravity="center_vertical">
<ImageView
android:id="@+id/twitter_Feed_favorite_image"
android:layout_width="20dp"
android:layout_height="20dp"
android:clickable="false"
android:contentDescription="@string/none"
android:scaleType="fitXY"
android:src="@drawable/twitter_favorite" />
<MerchantApp.Android.Controls.CustomTextView
android:id="@+id/twitter_Feed_favorite_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:clickable="false"
android:ellipsize="end"
android:gravity="center_vertical|start"
android:lines="1"
android:text="@string/text"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:textStyle="bold"
custom_text:customTypeface="Fonts/Roboto-Light.ttf" />
</LinearLayout>
<ImageView
android:id="@+id/Feed_follow"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_weight="0.25"
android:contentDescription="@string/none"
android:gravity="end"
android:scaleType="fitEnd"
android:src="@drawable/twitter_Feed_follow" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
I built a mediaplaceholder, which renders the videoview / ImageView at runtime instead of hiding it. Call the appropriate methods according to the data (i.e. image / URL / video). For example: makesingleimageloader() / makeurlloader(), makevideoview().. this is not an effective solution, but this method is useful to me
MediaPlaceHolder
public class MediaPlaceholder : LinearLayout
{
Context mContext;
PoppingImageView imageView;
UrlLoader urlLoader;
MultiImageView multiImageView;
BufferingSurfaceView bufferingSurfaceView;
public MediaPlaceholder(Context context) : base(context) {
init(context);
}
public MediaPlaceholder(Context context, IAttributeSet attrs) : base(context, attrs) {
init(context);
}
public MediaPlaceholder(Context context, IAttributeSet attrs, int defStyleAttr) : base(context, attrs, defStyleAttr) {
init(context);
}
void init(Context context) {
mContext = context;
}
void prepareView() {
this.RemoveAllViews ();
}
public void makeUrlLoaderView(String url) {
prepareView();
if (urlLoader == null) {
urlLoader = new UrlLoader(mContext);
}
urlLoader.loadPreview(url);
AddView(urlLoader, new LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent));
}
//So if it is ImageView, this method is called and another custom view is rendered in the placeholder,
//PoppingImageView in this case and videoView in case of video
public void makeSingleImageView(IMedia imageUrl) {
prepareView();
if (imageView == null) {
imageView = new PoppingImageView(mContext);
}
imageView.setDataresources(imageUrl, 0).enableDialogPopup(true);
AddView(imageView, new LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent));
}
public void makeVideoView(String videoUrl, int position) {
prepareView();
if (bufferingSurfaceView == null) {
bufferingSurfaceView = new BufferingSurfaceView(mContext);
}
bufferingSurfaceView.setMediaSource(videoUrl,position);
AddView(bufferingSurfaceView, new LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent));
}
}
The content of this article comes from the network collection of netizens. It is used as a learning reference. The copyright belongs to the original author.
THE END
二维码