I want to create this layout using the ConstraintLayout:
The "My Device" lies in the top-left corner, the "Bedroom" lies in the top-right corner, the user icon lies in the left of the layout, below "My Device". These 3 items are ok with ConstraintLayout. The problem is the center-right content area, include the "20:30" and an imageview.
I want them lie in the area that below "Bedroom" and "My Device", and to right of the user icon. My layout file is below:
<?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"
android:layout_width="255dp"
android:layout_height="@dimen/device_main_page_grid_item_height"
android:background="@drawable/rounded_white_bg_2"
android:layoutDirection="ltr"
android:transitionName="card_in">
<TextView
android:id="@+id/tv_num1"
style="@style/device_main_grid_item_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="9dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="6dp"
android:fadingEdge="horizontal"
android:fadingEdgeLength="@dimen/list_title_default_title_fade_edge"
android:includeFontPadding="false"
android:requiresFadingEdge="none"
android:text="My Device"
android:textColor="@color/class_V"
android:textSize="@dimen/font_size_13sp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/tv_num"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv_num"
style="@style/device_main_grid_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/rounded_gray_bg_3"
android:fadingEdge="horizontal"
android:gravity="center"
android:includeFontPadding="false"
android:paddingLeft="5dp"
android:paddingTop="1dp"
android:paddingRight="5dp"
android:paddingBottom="1dp"
android:text="Bedroom"
android:textColor="#FF999999"
android:textSize="@dimen/font_size_11sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/tv_num1" />
<ImageView
android:id="@+id/icon"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="1dp"
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
android:src="@drawable/default_avatar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1,1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_num1" />
<View
android:id="@+id/devider_line"
android:layout_width="match_parent"
android:layout_height="1px"
app:layout_constraintTop_toBottomOf="@id/tv_num1"
/>
<RelativeLayout
android:id="@+id/right_bottom_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/devider_line"
app:layout_constraintStart_toEndOf="@id/icon"
app:layout_constraintLeft_toRightOf="@id/icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent">
<ImageView
android:id="@+id/shortcut"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="6dp"
android:layout_marginRight="6dp"
android:layout_marginBottom="6dp"
android:contentDescription="@string/operation_open_close"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="@drawable/kuailian_confirm_loading_filled"
android:visibility="visible"
/>
<TextView
android:id="@+id/status_tv"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toLeftOf="@id/shortcut"
android:layout_centerVertical="true"
android:textSize="30dp"
android:text="20:30"
/>
</RelativeLayout>
<CheckBox
android:id="@+id/ckb_edit_selected"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="@drawable/list_icon_selector"
android:button="@null"
android:clickable="false"
android:focusable="false"
android:maxWidth="8dp"
android:maxHeight="8dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1,1"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
However, the preview of the layout is below in android studio:
It seems the center-right content area overlaps with the "Bedroom", and is not below the "Bedroom", which it should be.
How to create this layout using ConstrantLayout?
So you can make something like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="255dp"
android:layout_height="70dp"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="@+id/myDevice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My device"
android:layout_margin="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<ImageView
android:id="@+id/img1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintTop_toBottomOf="@+id/myDevice"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="@+id/clock"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="20:30"
android:textSize="24sp"
app:layout_constraintTop_toTopOf="@id/img1"
app:layout_constraintBottom_toBottomOf="@id/img1"
app:layout_constraintStart_toEndOf="@id/img1"
app:layout_constraintEnd_toStartOf="@id/img2"/>
<TextView
android:id="@+id/Bedroom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bedroom"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/myDevice"/>
<ImageView
android:id="@+id/img2"
android:layout_width="0dp"
android:layout_height="0dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/Bedroom"
app:layout_constraintStart_toEndOf="@id/clock"/>
</android.support.constraint.ConstraintLayout>
Result that you will get be like:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.