[Android] [PATCH 1/2] Video Player interface revamp

Geoffrey Métais geoffrey.metais at gmail.com
Wed Oct 29 15:11:33 CET 2014


New layout is only for Android 4.0+
We keep the current one for older devices
---
 vlc-android/res/layout-v15/player.xml              | 232 +++++++++++++++++++++
 vlc-android/res/layout-v17/player_action_bar.xml   |   4 +-
 vlc-android/res/layout/player_overlay_header.xml   |   2 +
 vlc-android/res/values-sw600dp-v17/dimens.xml      |   3 +
 vlc-android/res/values-sw600dp/dimens.xml          |   4 +
 vlc-android/res/values-v19/styles.xml              |   1 +
 vlc-android/res/values/dimens.xml                  |  14 ++
 vlc-android/res/values/styles.xml                  |   3 +-
 .../vlc/gui/video/VideoPlayerActivity.java         |  22 +-
 9 files changed, 280 insertions(+), 5 deletions(-)
 create mode 100644 vlc-android/res/layout-v15/player.xml
 create mode 100644 vlc-android/res/values-sw600dp-v17/dimens.xml
 create mode 100644 vlc-android/res/values-sw600dp/dimens.xml

diff --git a/vlc-android/res/layout-v15/player.xml b/vlc-android/res/layout-v15/player.xml
new file mode 100644
index 0000000..048cf5a
--- /dev/null
+++ b/vlc-android/res/layout-v15/player.xml
@@ -0,0 +1,232 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent" >
+
+    <!--
+     the double FrameLayout is necessary here to do cropping on the bottom right
+     (which requires the surface not be centered), while keeping the result centered
+    -->
+
+    <FrameLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:fitsSystemWindows="false" >
+
+        <FrameLayout
+            android:id="@+id/player_surface_frame"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center"
+            android:foregroundGravity="clip_horizontal|clip_vertical" >
+
+            <SurfaceView
+                android:id="@+id/player_surface"
+                android:layout_width="1dp"
+                android:layout_height="1dp" />
+
+            <SurfaceView
+                android:id="@+id/subtitles_surface"
+                android:layout_width="1dp"
+                android:layout_height="1dp"
+                android:visibility="invisible" />
+        </FrameLayout>
+    </FrameLayout>
+
+    <RelativeLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:fitsSystemWindows="true" >
+
+	    <include layout="@layout/player_overlay_header" />
+	
+	    <include
+	        android:id="@+id/player_overlay_tips"
+	        android:layout_width="match_parent"
+	        android:layout_height="match_parent"
+	        layout="@layout/player_tips" />
+	
+	    <ImageView
+	        android:id="@+id/player_overlay_loading"
+	        android:layout_width="80dp"
+	        android:layout_height="80dp"
+	        android:layout_centerInParent="true"
+	        android:src="@drawable/ic_cone_o" />
+	
+	    <TextView
+	        android:id="@+id/player_overlay_loading_text"
+	        android:layout_width="wrap_content"
+	        android:layout_height="wrap_content"
+	        android:layout_below="@id/player_overlay_loading"
+	        android:layout_centerHorizontal="true"
+	        android:textAppearance="@style/TextAppearance.AppCompat.SearchResult.Title" />
+	
+	    <TextView
+	        android:id="@+id/player_overlay_info"
+	        android:layout_width="wrap_content"
+	        android:layout_height="wrap_content"
+	        android:layout_below="@+id/player_overlay_loading_text"
+	        android:layout_centerHorizontal="true"
+	        android:layout_gravity="center"
+	        android:background="@drawable/video_list_length_bg"
+	        android:padding="5dp"
+	        android:textColor="#ffffff"
+	        android:textSize="36sp"
+	        android:visibility="invisible" />
+	
+	    <!-- Media HUD -->
+	
+	    <RelativeLayout
+	        android:id="@+id/progress_overlay"
+	        android:layout_width="@dimen/overlay_width"
+	        android:layout_height="@dimen/overlay_height"
+	        android:layout_alignParentBottom="true"
+	        android:layout_centerHorizontal="true"
+	        android:layout_marginBottom="@dimen/overlay_margin_bottom"
+	        android:alpha="0.6"
+	        android:background="@android:color/black"
+	        android:paddingBottom="@dimen/overlay_padding_bottom"
+	        android:paddingLeft="@dimen/overlay_padding_sides"
+	        android:paddingRight="@dimen/overlay_padding_sides"
+	        android:paddingTop="@dimen/overlay_padding_top" >
+	
+	        <LinearLayout
+	            android:id="@+id/player_overlay_progress"
+		            android:layout_width="match_parent"
+		            android:layout_height="wrap_content"
+		            android:layout_alignParentTop="true"
+		            android:layout_centerHorizontal="true"
+		            android:orientation="horizontal" >
+	
+		        <TextView
+		            android:id="@+id/player_overlay_time"
+		            android:layout_width="wrap_content"
+		            android:layout_height="wrap_content"
+		            android:textAppearance="@style/TextAppearance.AppCompat.SearchResult.Title" />
+	
+		        <SeekBar
+		            android:id="@+id/player_overlay_seekbar"
+		            android:layout_width="0dp"
+		            android:layout_height="wrap_content"
+		            android:layout_weight="1"
+		            android:maxHeight="@dimen/seekbar_height"
+		            android:minHeight="@dimen/seekbar_height"
+		            android:paddingLeft="@dimen/seekbar_padding_sides"
+		            android:paddingRight="@dimen/seekbar_padding_sides"
+		            android:progressDrawable="@drawable/po_seekbar"
+		            android:thumb="@drawable/seekbar_thumb" />
+	
+		        <TextView
+		            android:id="@+id/player_overlay_length"
+		            android:layout_width="wrap_content"
+		            android:layout_height="wrap_content"
+		            android:textAppearance="@style/TextAppearance.AppCompat.SearchResult.Title" />
+		
+	        </LinearLayout>
+	
+	        <!-- Media control buttons -->
+	
+	        <LinearLayout
+	            android:id="@+id/media_controls"
+	            android:layout_width="wrap_content"
+	            android:layout_height="wrap_content"
+	            android:layout_centerHorizontal="true"
+	            android:layout_centerVertical="true"
+	            android:layout_marginTop="@dimen/media_ctrl_margin_top"
+	            android:orientation="horizontal" >
+	
+	            <ImageButton
+	                android:id="@+id/player_overlay_backward"
+	                android:layout_width="wrap_content"
+	                android:layout_height="wrap_content"
+	                android:layout_gravity="center_vertical"
+	                android:clickable="true"
+	                android:onClick="onClick"
+	                android:background="@drawable/ic_backward_w" />
+	
+	            <ImageButton
+	                android:id="@+id/player_overlay_play"
+	                android:layout_width="wrap_content"
+	                android:layout_height="wrap_content"
+	                android:layout_gravity="center_vertical"
+	                android:layout_marginLeft="20dp"
+	                android:layout_marginRight="20dp"
+	                android:clickable="true"
+	                android:onClick="onClick"
+	            	android:background="@drawable/ic_pause_circle"/>
+	
+	            <ImageButton
+	                android:id="@+id/player_overlay_forward"
+	                android:layout_width="wrap_content"
+	                android:layout_height="wrap_content"
+	                android:layout_gravity="center_vertical"
+	                android:clickable="true"
+	                android:onClick="onClick"
+	                android:background="@drawable/ic_forward_normal_w" />
+	        </LinearLayout>
+	
+	        <LinearLayout
+	            android:id="@+id/option_overlay"
+	            android:layout_width="wrap_content"
+	            android:layout_height="wrap_content"
+	            android:layout_below="@+id/media_controls"
+	            android:layout_alignParentBottom="true"
+	            android:layout_alignParentRight="true"
+	            android:layout_alignParentEnd="true"
+	            android:orientation="horizontal"
+	            android:visibility="invisible" >
+	
+	            <ImageButton
+	                android:id="@+id/lock_overlay_button"
+	                android:layout_width="wrap_content"
+	                android:layout_height="wrap_content"
+	                android:layout_marginRight="@dimen/options_margin"
+	                android:layout_gravity="center_vertical"
+	                android:background="@drawable/ic_lock" />
+	
+	            <ImageButton
+	                android:id="@+id/player_overlay_subtitle"
+	                android:layout_width="wrap_content"
+	                android:layout_height="wrap_content"
+	                android:layout_marginRight="@dimen/options_margin"
+	                android:layout_gravity="center_vertical"
+	                android:background="@drawable/ic_subtitle_circle" />
+	
+	            <ImageButton
+	                android:id="@+id/player_overlay_audio"
+	                android:layout_width="wrap_content"
+	                android:layout_height="wrap_content"
+	                android:layout_marginRight="@dimen/options_margin"
+	                android:layout_gravity="center_vertical"
+	                android:background="@drawable/ic_audio_circle" />
+	
+	            <ImageButton
+	                android:id="@+id/player_overlay_navmenu"
+	                android:layout_width="wrap_content"
+	                android:layout_height="wrap_content"
+	                android:layout_marginRight="@dimen/options_margin"
+	                android:layout_gravity="center_vertical"
+	                android:background="@drawable/ic_navmenu_circle"
+	                android:visibility="visible" />
+	
+	            <ImageButton
+	                android:id="@+id/player_overlay_size"
+	                android:layout_width="wrap_content"
+	                android:layout_height="wrap_content"
+	                android:layout_marginRight="@dimen/options_margin"
+	                android:layout_gravity="center_vertical"
+	                android:background="@drawable/ic_crop_circle" />
+	
+	            <ImageButton
+	                android:id="@+id/player_overlay_adv_function"
+	                android:layout_width="wrap_content"
+	                android:layout_height="wrap_content"
+	                android:layout_marginRight="@dimen/options_margin"
+	                android:layout_gravity="center_vertical"
+	                android:background="@drawable/dots"
+	                android:onClick="showAdvancedOptions" />
+	        </LinearLayout>
+	    </RelativeLayout>
+    </RelativeLayout>
+
+</RelativeLayout>
\ No newline at end of file
diff --git a/vlc-android/res/layout-v17/player_action_bar.xml b/vlc-android/res/layout-v17/player_action_bar.xml
index c6ba0eb..72f5ba5 100644
--- a/vlc-android/res/layout-v17/player_action_bar.xml
+++ b/vlc-android/res/layout-v17/player_action_bar.xml
@@ -5,12 +5,14 @@
 
     <TextView
         android:id="@+id/player_overlay_title"
-        android:layout_width="wrap_content"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:gravity="center_horizontal"
         android:layout_gravity="top"
         android:background="?attr/status_bar_overlay"
         android:text="@string/title"
         android:textColor="#ffffff"
+        android:layout_marginTop="10dp"
         android:paddingLeft="5dp"
         android:paddingRight="5dp"
         android:textSize="15sp"
diff --git a/vlc-android/res/layout/player_overlay_header.xml b/vlc-android/res/layout/player_overlay_header.xml
index 07a7327..5a9a462 100644
--- a/vlc-android/res/layout/player_overlay_header.xml
+++ b/vlc-android/res/layout/player_overlay_header.xml
@@ -7,6 +7,7 @@
         android:layout_alignParentTop="true"
         android:layout_gravity="top"
         android:background="?attr/video_player_overlay"
+        android:layout_marginTop="10dp"
         android:paddingLeft="5dp"
         android:paddingRight="5dp"
         android:visibility="invisible" >
@@ -16,6 +17,7 @@
             android:layout_width="0dp"
             android:layout_height="fill_parent"
             android:layout_weight="1"
+            android:gravity="center_horizontal"
             android:text="@string/title"
             android:textColor="#ffffff"
             android:textSize="15sp" />
diff --git a/vlc-android/res/values-sw600dp-v17/dimens.xml b/vlc-android/res/values-sw600dp-v17/dimens.xml
new file mode 100644
index 0000000..e7c62ca
--- /dev/null
+++ b/vlc-android/res/values-sw600dp-v17/dimens.xml
@@ -0,0 +1,3 @@
+<resources>
+    <dimen name="overlay_margin_bottom">10dip</dimen>
+</resources>
\ No newline at end of file
diff --git a/vlc-android/res/values-sw600dp/dimens.xml b/vlc-android/res/values-sw600dp/dimens.xml
new file mode 100644
index 0000000..ded8585
--- /dev/null
+++ b/vlc-android/res/values-sw600dp/dimens.xml
@@ -0,0 +1,4 @@
+<resources>
+    <!-- Video Player -->
+    <dimen name="overlay_height">250dp</dimen>
+</resources>
\ No newline at end of file
diff --git a/vlc-android/res/values-v19/styles.xml b/vlc-android/res/values-v19/styles.xml
index 58513bc..6f1046f 100644
--- a/vlc-android/res/values-v19/styles.xml
+++ b/vlc-android/res/values-v19/styles.xml
@@ -4,6 +4,7 @@
         <item name="android:windowBackground">@color/black</item>
         <item name="android:windowActionBarOverlay">true</item>
         <item name="android:windowTranslucentStatus">true</item>
+        <item name="android:windowTranslucentNavigation">true</item>
 
         <item name="video_player_overlay">@color/transparent_gray</item>
         <item name="status_bar_overlay">@android:color/transparent</item>
diff --git a/vlc-android/res/values/dimens.xml b/vlc-android/res/values/dimens.xml
index ffdd68e..bde3575 100644
--- a/vlc-android/res/values/dimens.xml
+++ b/vlc-android/res/values/dimens.xml
@@ -3,4 +3,18 @@
     <dimen name="widget_margin">10dp</dimen>
     <dimen name="audio_browser_item_size">50dp</dimen>
     <dimen name="listview_bottom_padding">50dp</dimen>
+
+    <!-- Video Player -->
+    <dimen name="overlay_width">800dp</dimen>
+    <dimen name="overlay_height">200dp</dimen>
+    <dimen name="overlay_margin_bottom">10dip</dimen>
+    <dimen name="overlay_padding_bottom">10dip</dimen>
+    <dimen name="overlay_padding_top">20dip</dimen>
+    <dimen name="overlay_padding_sides">30dip</dimen>
+
+    <dimen name="seekbar_height">3dip</dimen>
+    <dimen name="seekbar_padding_sides">20dp</dimen>
+
+    <dimen name="media_ctrl_margin_top">20dp</dimen>
+    <dimen name="options_margin">10dp</dimen>
 </resources>
\ No newline at end of file
diff --git a/vlc-android/res/values/styles.xml b/vlc-android/res/values/styles.xml
index ca844a0..6325889 100644
--- a/vlc-android/res/values/styles.xml
+++ b/vlc-android/res/values/styles.xml
@@ -153,7 +153,8 @@
 
     <style name="Theme.VLC.Player" parent="android:Theme.NoTitleBar.Fullscreen">
         <item name="android:windowBackground">@color/black</item>
-        <item name="video_player_overlay">@color/transparent_gray</item>
+        <!-- item name="video_player_overlay">@color/transparent_gray</item-->
+        <item name="video_player_overlay">@android:color/transparent</item>
 
         <item name="advanced_options_style">@style/Theme.VLC.AdvancedOptionsBlack</item>
     </style>
diff --git a/vlc-android/src/org/videolan/vlc/gui/video/VideoPlayerActivity.java b/vlc-android/src/org/videolan/vlc/gui/video/VideoPlayerActivity.java
index d80b92d..3c174ea 100644
--- a/vlc-android/src/org/videolan/vlc/gui/video/VideoPlayerActivity.java
+++ b/vlc-android/src/org/videolan/vlc/gui/video/VideoPlayerActivity.java
@@ -72,6 +72,7 @@ import android.content.SharedPreferences;
 import android.content.SharedPreferences.Editor;
 import android.content.pm.ActivityInfo;
 import android.content.res.Configuration;
+import android.content.res.Resources;
 import android.database.Cursor;
 import android.graphics.Color;
 import android.graphics.ImageFormat;
@@ -112,6 +113,7 @@ import android.view.animation.RotateAnimation;
 import android.widget.FrameLayout;
 import android.widget.ImageButton;
 import android.widget.ImageView;
+import android.widget.RelativeLayout;
 import android.widget.SeekBar;
 import android.widget.SeekBar.OnSeekBarChangeListener;
 import android.widget.TextView;
@@ -367,7 +369,6 @@ public class VideoPlayerActivity extends Activity implements IVideoPlayer {
 
         mSize = (ImageButton) findViewById(R.id.player_overlay_size);
         mSize.setOnClickListener(mSizeListener);
-
         mMenu = (ImageButton) findViewById(R.id.player_overlay_adv_function);
 
         try {
@@ -796,6 +797,15 @@ public class VideoPlayerActivity extends Activity implements IVideoPlayer {
     @Override
     public void onConfigurationChanged(Configuration newConfig) {
         setSurfaceSize(mVideoWidth, mVideoHeight, mVideoVisibleWidth, mVideoVisibleHeight, mSarNum, mSarDen);
+        //Maintain HUD over the system bar on Android 4.2+
+        RelativeLayout.LayoutParams lp = (android.widget.RelativeLayout.LayoutParams) mOverlayProgress.getLayoutParams();
+        Resources res = getResources();
+        lp.setMargins(0, 0, 0, res.getDimensionPixelSize(R.dimen.overlay_margin_bottom));
+        mOverlayProgress.setPadding(res.getDimensionPixelSize(R.dimen.overlay_padding_sides),
+                res.getDimensionPixelSize(R.dimen.overlay_padding_top),
+                res.getDimensionPixelSize(R.dimen.overlay_padding_sides),
+                res.getDimensionPixelSize(R.dimen.overlay_padding_bottom));
+        mOverlayProgress.setLayoutParams(lp);
         super.onConfigurationChanged(newConfig);
     }
 
@@ -1834,6 +1844,8 @@ public class VideoPlayerActivity extends Activity implements IVideoPlayer {
                     mOverlayHeader.setVisibility(View.VISIBLE);
                 mOverlayOption.setVisibility(View.VISIBLE);
                 mPlayPause.setVisibility(View.VISIBLE);
+                mBackward.setVisibility(View.VISIBLE);
+                mForward.setVisibility(View.VISIBLE);
                 mMenu.setVisibility(View.VISIBLE);
                 dimStatusBar(false);
             }
@@ -1863,6 +1875,8 @@ public class VideoPlayerActivity extends Activity implements IVideoPlayer {
                 mOverlayOption.startAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
                 mOverlayProgress.startAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
                 mPlayPause.startAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
+                mBackward.startAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
+                mForward.startAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
                 mMenu.startAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
             }
             if (mPresentation != null) {
@@ -1876,6 +1890,8 @@ public class VideoPlayerActivity extends Activity implements IVideoPlayer {
             mOverlayOption.setVisibility(View.INVISIBLE);
             mOverlayProgress.setVisibility(View.INVISIBLE);
             mPlayPause.setVisibility(View.INVISIBLE);
+            mBackward.setVisibility(View.INVISIBLE);
+            mForward.setVisibility(View.INVISIBLE);
             mMenu.setVisibility(View.INVISIBLE);
             mShowing = false;
             dimStatusBar(true);
@@ -1946,8 +1962,8 @@ public class VideoPlayerActivity extends Activity implements IVideoPlayer {
 
         // Update all view elements
         boolean isSeekable = mEnableJumpButtons && length > 0;
-        mBackward.setVisibility(isSeekable ? View.VISIBLE : View.GONE);
-        mForward.setVisibility(isSeekable ? View.VISIBLE : View.GONE);
+        mBackward.setVisibility(isSeekable && !mIsLocked ? View.VISIBLE : View.GONE);
+        mForward.setVisibility(isSeekable && !mIsLocked ? View.VISIBLE : View.GONE);
         mSeekbar.setMax(length);
         mSeekbar.setProgress(time);
         if (mSysTime != null)
-- 
1.9.1



More information about the Android mailing list