CODEWITHSUNDEEP
androidsurfaceview
Tashen Jazbi
Tashen Jazbi

Reputation: 1068

How to make a rounded surfaceview

I'm trying to make a rounded shaped surfaceview. I've searched a lot but i couldn't find a good solution. what i'm doing right now is that, I've put the SurfaceView into a FrameLayout, then another View on top of it, either with a PNG mask, or a shape xml drawable. here it is

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="#000"
        android:orientation="vertical"
        android:visibility="visible" >

        <FrameLayout
            android:id="@+id/videorecordview"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_weight=".2" >

            <SurfaceView
            android:id="@+id/surfaceView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
        </FrameLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/rounded"
        android:orientation="vertical" >
    </LinearLayout>

</RelativeLayout>

But this is not a good solution and it is also not working perfectly. I want to customize surfaceview to a rounded shape. any help would be much appreciated. Thank you :)

Upvotes: 7

Views: 12098

Answers (4)

Rahul Vishwakarma
Rahul Vishwakarma

Reputation: 427

try this

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <gradient
        android:startColor="#FFFF0000"
        android:endColor="#80FF00FF"
        android:angle="270"/>
</shape>

<SurfaceView
    android:background="@drawable/circle"
    android:id="@+id/surfaceView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

Upvotes: -2

Nessie
Nessie

Reputation: 102

To achieve what you ask, it is very easy to do it. You only need to use the next XML:

<androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="12dp">
        <SurfaceView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" />
    </androidx.cardview.widget.CardView>

And to use this CardView, add this dependency on your build.gradle app:

implementation 'androidx.cardview:cardview:1.0.0'

Upvotes: 2

ralphgabb
ralphgabb

Reputation: 10528

A little hack. Put your surface view inside card view.

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/margin_normal" 
        app:cardCornerRadius="10dp"     
        app:cardPreventCornerOverlap="false">

        <SurfaceView
            android:id="@+id/surfaceView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="@dimen/margin_normal" />

    </android.support.v7.widget.CardView>

Don't forget to add this to your gradle file to use CardView

compile 'com.android.support:cardview-v7:25.0.1'

Also this two line inside card view

app:cardCornerRadius="10dp"     
app:cardPreventCornerOverlap="false"

Cheers happy coding

Upvotes: 28

fadden
fadden

Reputation: 52313

You can't change the shape of the SurfaceView's Surface.

A SurfaceView has two parts, the Surface and the View. The View part works like any other View. By default, it just acts as a transparent "hole", creating a window in the layout. All Views are rendered by the app onto a single layer.

The Surface part is a separate layer that sits behind the View layer (unless you explicitly change the Surface's Z order), so you only see it where it "shows through" transparent areas of the View layer. You can draw on the View layer to mask portions of the Surface, but you can't change the shape of the Surface layer itself. Layers are rectangular.

In many situations a TextureView can be used in place of a SurfaceView. TextureView offers greater flexibility because it's rendered by the app onto the View layer, but can be less efficient than SurfaceView.

More information can be found in the Android graphics architecture doc.

Upvotes: 10

Related Questions