How do I convert constraint layout to Relative layout?

Question

I am currently trying to convert my constraint layout to relative layout, but not sure how to deal with "app:" parameters which refer to constraints top of, bottom of etc. Here's my code for clarification:

<?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:id="@+id/myFragmentConstaintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/gray"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/activeSpeakerContainer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/groupList"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/myStatusContainer">

        <FrameLayout
            android:id="@+id/activeSpeakerVideo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/black" />

        <ImageView
            android:id="@+id/activeSpeakerImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="48dp"
            android:background="@color/black"
            android:src="@drawable/my_default_profile" />

        <TextView
            android:id="@+id/myParticipantCountText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:ellipsize="end"
            android:lines="1"
            android:background="@drawable/rounded_rect"
            android:layout_marginStart="18dp"
            android:layout_marginTop="18dp"
            android:drawablePadding="2dip"
            android:paddingLeft="10dip"
            android:textColor="@color/gray6"
            android:textSize="16sp"
            android:textStyle="bold"
            android:drawableLeft="@drawable/drawable_user_count_icon"
            android:drawableStart="@drawable/drawable_user_count_icon"/>

        <ImageView
            android:id="@+id/image_mark"
            android:layout_width="130dp"
            android:layout_height="28dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_marginBottom="36dp"
            android:layout_marginRight="16dp"
            android:layout_marginEnd="16dp"
            android:src="@drawable/image_mark_blue" />

        <TextView
            android:id="@+id/activeSpeakerName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="#AA555555"
            android:ellipsize="end"
            android:gravity="center_horizontal|bottom"
            android:lines="1"
            android:textColor="@color/gray6"
            android:textSize="16sp"
            tools:text="[email protected]" />

        <TextView
            android:id="@+id/DurationText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentBottom="true"
            android:gravity="start|bottom"
            android:lines="1"
            android:textColor="@color/gray6"
            android:textSize="14sp"
            tools:text="03:16" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/screenShareContainer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="0dp"
        android:layout_marginStart="0dp"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/myStatusContainer"
        app:layout_constraintBottom_toTopOf="@+id/myButtonContainer">

        <PinchandZoomLayout
            android:id="@+id/screenShareVideo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/black"/>

        <ImageButton
            android:id="@+id/screenShareToggle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_marginBottom="36dp"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:background="@android:color/transparent"
            android:src="@drawable/ic_video_cam_switch" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/myStatusContainer"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#AA555555"
        android:padding="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/myNameText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:ellipsize="end"
            android:lines="1"
            android:textColor="@color/gray6"
            android:textSize="14sp"
            tools:text="[email protected]" />

        <ImageButton
            android:id="@+id/myButtonVideoRotate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:background="@android:color/transparent"
            android:src="@drawable/ic_video_cam_switch" />

    </RelativeLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/groupList"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="invisible"
        app:layout_constraintBottom_toTopOf="@+id/myButtonContainer"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/activeSpeakerContainer">

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

    <RelativeLayout
        android:id="@+id/myProgressContainer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@+id/groupList"
        app:layout_constraintLeft_toLeftOf="@+id/groupList"
        app:layout_constraintRight_toRightOf="@+id/groupList"
        app:layout_constraintTop_toTopOf="@+id/groupList">

        <TextView
            android:id="@+id/myProgressName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="8dp"
            android:gravity="center_horizontal"
            android:textColor="@color/gray6"
            android:textSize="20sp"
            tools:text="My Name" />

        <TextView
            android:id="@+id/myProgressText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/myProgressName"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="8dp"
            android:gravity="center_horizontal"
            android:text="@string/my_status_connecting"
            android:textColor="@color/gray6"
            android:textSize="16sp" />

    </RelativeLayout>

    <include
        android:id="@+id/myButtonContainer"
        layout="@layout/layout_my_button_bar_1_row"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />


    <android.support.constraint.ConstraintLayout
        android:id="@+id/myButtonContainerUnavailable"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="@+id/myButtonContainer"
        app:layout_constraintLeft_toLeftOf="@+id/myButtonContainer"
        app:layout_constraintRight_toRightOf="@+id/myButtonContainer"
        app:layout_constraintTop_toTopOf="@+id/myButtonContainer"
        tools:visibility="visible">

        <Button
            android:id="@+id/myButtonCancel"
            style="@style/myButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/btn_my_end"
            android:text="@string/dialog_button_cancel"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/myButtonRetry"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/myButtonRetry"
            style="@style/myButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/btn_my_retry"
            android:text="@string/button_try_again"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/myButtonCancel"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

I just tried replacing "android.support.constraint.ConstraintLayout" with relative layout but there's these parameters " app:layout_constraint..." which are more difficult to deal with.Any easier way to go around this?

Thanks in advance.

Answer 1

I am using Android Studio version 3.1.2

No need to do that much complex stuff.Just right click on layout name in component tree as shown in image and select option convert view and choose the layout which you want to use.