Geek Answers Handbook

Download recyclerview with images and videos

I am trying to create an application that shows Twitter, Facebook and Instagram channels. I have three fragments in total for each social networking platform, and each fragment contains a Recyclerview. I ran into the problem of efficiently loading media. I use Picasso to upload images and process videos using MediaPlayer. Since the channels have videos as well as images, I have both ImageView and SurfaceView (VideoView doesn't fill the video to the size of the view) in my layout file and hide either ImageView or SurfaceView depending on the data. I also created a custom SurfaceView that handles video and image, but it is a bit laggy. Is there a better way to process images and videos in one view?

Any help or improvement will help a lot. thank you

Here is my layout file for the 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>
+4
source share
2 answers

I create a MediaPlaceholder that renders a videoview / imageview at runtime rather than hiding it.
 Depending on the data (for example, Image / URL / Video), the corresponding methods are called. for example: makeSingleImageLoader () / makeUrlLoader (), makeVideoView () .. This is not an effective solution, but it worked for 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));
    }
}
0
source

I encountered a similar problem and tried my best to find the best solution for showing the video on the list.

, VideoView , SurfaceView. , . TextureView .

, MediaPlayer . , .

, , , , , . . .

, , : https://github.com/touchlane/ExoVideoView

ExoPlayer , , MediaPlayer. , .

0

More articles:


All Articles