How can I draw rectangle with a border shadow shape around VideoView?

user_4977951 0
Viewed 202

I have VideoView and I want to draw this shape around VideoView.

I want to: I want to

I made with my xml code:

Vertical video:

enter image description here

Horizontal video:

enter image description here

My rectangle border does not correspond to the exact VideoView dimensions. When the video is horizontal, there is an overflow in the background at the top and bottom points. When vertical, there is overflow on the right and left. Their colors don't match well either.

I don't want my changes to affect the video resolution negatively.

My rectangle border xml:

                <solid
                    android:color="@color/grey_300" />
            </shape>
        </item>

        <item
            android:bottom="2dp"
            android:left="2dp"
            android:right="2dp"
            android:top="2dp">

            <shape>

                <gradient
                    android:angle="270"
                    android:endColor="#ffffff"
                    android:startColor="#ffffff" />

                <stroke
                    android:width="1dp"
                    android:color="@color/grey_300" />

                <corners
                    android:radius="10dp" />

                <padding
                    android:bottom="10dp"
                    android:left="10dp"
                    android:right="10dp"
                    android:top="10dp" />

            </shape>
        </item>
    </layer-list>
</item>

and layout xml:

<RelativeLayout
        android:id="@+id/view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/rect_border"
        android:elevation="5dp"
        android:outlineProvider="bounds">

        <VideoView
            android:id="@+id/video_loader"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:background="@drawable/bg_rounded"
            android:gravity="center" />

        <ImageView
            android:id="@+id/icon_video_play"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_centerInParent="true"
            app:srcCompat="@drawable/ic_baseline_play_circle_filled_24" />
    </RelativeLayout>
android-videoview android
3 Answers

Try using RelativeLayout inside of CardView. Remove elevation, background and outlineProvider in RelativeLayout and set android:layout_width and android:layout_height of VideoView to wrap_content.

user_131219710

try the below code snippet to display the video view with corner border

rectangle border xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#00ffffff" />

        </shape>
    </item>

    <item
        android:bottom="1px"
        android:left="1px"
        android:right="1px"
        android:top="1px">
        <shape android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="#6db23f" />
            <solid android:color="#ffffff" />
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp"></corners>
        </shape>
    </item>

</layer-list>

layout xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardView="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:gravity="center_horizontal"
    android:background="@drawable/rect_border"
    android:orientation="vertical" >

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        cardView:cardBackgroundColor="#ffffff"
        cardView:cardElevation="2dp"
        cardView:cardUseCompatPadding="true">

        <VideoView
            android:id="@+id/contentImageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:background="@drawable/bg_rounded" />

    </androidx.cardview.widget.CardView>

</LinearLayout>
user_148358760

just put your videoview in framelayout and add a rounded background to the frame layout as you did, add an outline provider and clip the frame layout to the outline.

<FrameLayout
    android:id="@+id/framelayout"
    android:layout_width="90dp" 
    android:layout_height="120dp" 
    android:background="@drawable/rounded_background"
    android:outlineProvider="background">

    <VideoView
        android:id="@+id/vidview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        />

</FrameLayout>

and then clipping to the outline programatically

framlayout.clipToOutline = true

try and play with it.

user_79245650
Related