Search code examples
androidandroid-layoutsurfaceview

Divide the screen into SurfaceView and xml layout


MyActivity has setContentView(MySurfaceView) that covers all the screen.

I would like to divide the screen into two parts: the first 2/3 of the screen must be occupied by MySurfaceView and the last 1/3 by my_activity_layout.xml.

How can I do that? Thanks.

enter image description here

EDIT

Thanks for your answers, but I don't have how to apply them in my case. To be clear, these are my objects:

enter image description here

enter image description here


Solution

  • Solution:

    To attach an xml file in your layout, you can make use of the <include> tag.

    Reusing layouts is particularly powerful as it allows you create reusable complex layouts. For example, a yes/no button panel, or custom progress bar with description text. More

    You can have a functionality as shown in the question with the help of ConstraintLayout. Of course, there are solutions using the legacy <LinearLayout> with something called as weights but as the warning says Weights are bad for performance.

    Why weights are bad for performance?

    Layout weights require a widget to be measured twice. When a LinearLayout with non-zero weights is nested inside another LinearLayout with non-zero weights, then the number of measurements increase exponentially.

    So let's get on to the solution using <ConstraintLayout>.

    Let's say we have a layout file called my_activity_layout.xml and we use the below code to achieve what we want:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <SurfaceView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/guideline"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <android.support.constraint.Guideline
            android:id="@+id/guideline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.67" />
    
        <include
            android:id="@+id/news_title"
            layout="@layout/my_activity_layout"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/guideline" />
    
    </android.support.constraint.ConstraintLayout>
    

    As you can see the Guideline help us to get 2/3 i.e 66.666 ~ 67 % of the screen, and then you can constraint your SurfaceView and your layout using <include> tag on your activity.

    You can also see the required result:

    Desired Result

    You can just copy-paste the solution and see if it works as expected.