一个经典的constraintlayout布局

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.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="wrap_content"

    android:layout_margin="8dp"

    android:background="@drawable/shape_btn_white">

 

    <ImageView

        android:id="@+id/icon"

        android:layout_width="48dp"

        android:layout_height="48dp"

        android:layout_margin="10dp"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        tools:src="@drawable/icon_tickids_device_girl" />

 

 

    <TextView

        android:id="@+id/nickname"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="6dp"

        android:textColor="@color/text_black"

        android:textSize="16sp"

        app:layout_constraintStart_toEndOf="@id/icon"

        app:layout_constraintTop_toTopOf="@id/icon"

        tools:src="@drawable/icon_tickids_device_girl"

        tools:text="张三" />

 

    <ImageView

        android:id="@+id/connect"

        android:layout_width="12sp"

        android:layout_height="12sp"

        app:layout_constraintBottom_toBottomOf="@id/status"

        app:layout_constraintStart_toStartOf="@id/nickname"

        app:layout_constraintTop_toTopOf="@id/status"

        tools:src="@drawable/ic_clear" />

 

    <TextView

        android:id="@+id/status"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="4dp"

        android:layout_marginTop="8dp"

        android:textColor="@color/tickids_device_disconnected"

        android:textSize="12sp"

        app:layout_constraintStart_toEndOf="@id/connect"

        app:layout_constraintTop_toBottomOf="@id/nickname"

        tools:text="已链接" />

 

    <ImageView

        android:id="@+id/settings"

        android:layout_width="24dp"

        android:layout_height="24dp"

        android:layout_marginTop="24dp"

        android:layout_marginEnd="24dp"

        android:src="@drawable/icon_tickids_device_settings"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

 

    <TextView

        android:id="@+id/unread"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginBottom="5dp"

        android:background="@drawable/shape_red_circle"

        android:gravity="center"

        android:textColor="@color/white"

        android:textSize="8sp"

        app:layout_constraintEnd_toEndOf="@id/settings"

        app:layout_constraintTop_toTopOf="@id/settings"

        tools:text="1" />

 

 

    <View

        android:id="@+id/line"

        android:layout_width="match_parent"

        android:layout_height="1dp"

        android:layout_marginTop="12dp"

        android:background="@color/line_color"

        app:layout_constraintTop_toBottomOf="@id/status" />

 

    <ProgressBar

        android:id="@+id/progress"

        style="?android:attr/progressBarStyleHorizontal"

        android:layout_width="match_parent"

        android:layout_height="3dp"

        android:progressDrawable="@drawable/tickids_progress_bg"

        android:visibility="visible"

        app:layout_constraintTop_toBottomOf="@id/line"

        tools:progress="50"

        android:progress="0"

        tools:visibility="visible" />

 

    <ImageView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="12dp"

        android:src="@drawable/icon_tickids_device_location"

        app:layout_constraintBottom_toBottomOf="@id/location"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="@id/location"

        />

 

    <TextView

        android:id="@+id/location"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_marginStart="40dp"

        android:layout_marginTop="16dp"

        android:layout_marginEnd="12dp"

        android:fontFamily="sans-serif-medium"

        android:textColor="@color/text_black"

        android:textSize="14sp"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@id/progress"

        tools:text="dr. Cipto Mangunkusumo National Central General Hospital" />

 

    <TextView

        android:id="@+id/location_detail"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_marginTop="8dp"

        android:textColor="@color/tickids_text_grey"

        android:textSize="12sp"

        app:layout_constraintEnd_toEndOf="@id/location"

        app:layout_constraintStart_toStartOf="@id/location"

        app:layout_constraintTop_toBottomOf="@id/location"

        tools:text="Jl. Salemba Raya Jl. Pangeran Diponegoro No.71, RW.5, Kenari, Kec. Senen, Kota Jakarta Pusat, Daerah Khusus Ibukota Jakarta 10430, Indonesia" />

 

    <ImageView

        android:id="@+id/location_type"

        android:layout_width="16dp"

        android:layout_height="16dp"

        android:layout_marginTop="12dp"

        app:layout_constraintStart_toStartOf="@id/location_detail"

        app:layout_constraintTop_toBottomOf="@id/location_detail"

        tools:src="@drawable/icon_tickids_device_wifi" />

 

 

    <TextView

        android:id="@+id/accuracy"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="16dp"

        android:layout_marginTop="12dp"

        android:gravity="center"

        android:textColor="#11D4BE"

        android:textSize="12sp"

        app:layout_constraintStart_toEndOf="@id/location_type"

        app:layout_constraintTop_toBottomOf="@id/location_detail"

        tools:text="Presisi &lt; 5m" />

 

    <TextView

        android:id="@+id/time"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="16dp"

        android:layout_marginTop="12dp"

        android:gravity="center"

        android:textColor="#11D4BE"

        android:textSize="12sp"

        app:layout_constraintStart_toEndOf="@id/accuracy"

        app:layout_constraintTop_toBottomOf="@id/location_detail"

        tools:text="2 menit yang lalu" />

 

 

    <TextView

        android:id="@+id/refresh"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="8dp"

        android:layout_marginBottom="18dp"

        android:background="@drawable/shape_btn_oval_green"

        android:drawableStart="@drawable/icon_tickids_device_refresh"

        android:gravity="start|center_vertical"

        android:paddingStart="6dp"

        android:paddingEnd="6dp"

        android:textColor="@color/white"

        android:textSize="12sp"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintStart_toStartOf="@id/location_type"

        app:layout_constraintTop_toBottomOf="@id/time”

        android:text="@string/refresh_location" />

 

</androidx.constraintlayout.widget.ConstraintLayout>