How to change complex LinearLayout to ConstraintLayout

Question

PercentRelativeLayout is deprecated as of API 26 and I created this layout prior to the deprecation. Does anyone know what would be the best way to change this complex layout to a ConstraintLayout whilst making sure the design stays exactly the same?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:weightSum="100">
    <com.google.android.gms.maps.MapView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/map_stationmap_darktheme"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_weight="90"
        android:layout_width="match_parent"
        android:layout_height="0dp" />
    <android.support.percent.PercentRelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="10"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp">
        <ImageView
            android:id="@+id/imageViewSun"
            app:layout_widthPercent="40%"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            app:srcCompat="@drawable/ic_sun_white" />

        <FrameLayout
            android:id="@+id/switch_tgl"
            app:layout_widthPercent="20%"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:layout_toEndOf="@id/imageViewSun">
            <android.support.v7.widget.SwitchCompat
                android:id="@+id/switch_stationmap_darktheme"
                android:layout_gravity="center_horizontal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent" />
        </FrameLayout>

        <ImageView
            android:id="@+id/imageViewMoon"
            android:importantForAccessibility="no"
            app:layout_widthPercent="40%"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            app:srcCompat="@drawable/ic_moon_white"
            android:layout_toEndOf="@id/switch_tgl"/>
    </android.support.percent.PercentRelativeLayout>
</LinearLayout>

Answer 1

Focusing on the conversion of the PercentRelativeLayout to ConstraintLayout, there are a couple of approaches. If you are the recent beta release of ConstraintLayout you can use a couple of new attributes that seemed geared to help the sunsetting of the percent layouts:

    app:layout_constraintWidth_default="percent"
    app:layout_constraintWidth_percent="0.5"

There is not a lot of documentation online for this feature. Here is one that I ran across.

If you are not on the beta release, you can still accomplish what you want by using guidelines and constraining your views between those guidelines. Here is an answer to a question that you may find useful on how to use both of these techniques.