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

Thomas Guillem thomas at gllm.fr
Wed Oct 29 15:39:55 CET 2014


I like it.
For now, I prefer this interface than the previous one, I'll test it in
good conditions and send more feedback.

On Wed, Oct 29, 2014, at 15:11, Geoffrey Métais wrote:
> 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
> 
> _______________________________________________
> Android mailing list
> Android at videolan.org
> https://mailman.videolan.org/listinfo/android


More information about the Android mailing list