I am trying to build an app that shows feeds of twitter,Facebook and Instagram. I've three fragments in total for each of the social media platform and each fragment contains Recyclerview. I am facing problem of efficiently loading media. I'm using Picasso for loading images and have handled video using MediaPlayer. Since, the feeds contain video as well as images, I've both ImageView and SurfaceView (VideoView doesn't fill video to size of the view) in my layout file and have hidden either ImageView or SurfaceView depending on the data. I've also built a Custom SurfaceView which handles video and image but it is bit laggy. Is there any better way to handle Images and video in a single view?
Any help or improvement will help a lot. Thank you
Here is my layout file for 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>