I was playing around with ConstraintLayout and I can't guess how to do this simple design using only a ConstraintLayout.
Simple design
Each TextView is centered with its image.
Each image is separated with the previous image with a fixed margin.
All views, treated like a group, are centered horizontally.
I have implemented the design using RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="4dp">
<RelativeLayout
android:id="#+id/androidALayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/androidAIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/androidATV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android A"
android:layout_below="#id/androidAIV"
android:layout_marginTop="4dp"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/androidBLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/androidALayout"
android:layout_marginLeft="32dp">
<ImageView
android:id="#+id/androidBIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/androidBTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android B"
android:layout_below="#id/androidBIV"
android:layout_marginTop="4dp"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/androidCLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/androidBLayout"
android:layout_marginLeft="32dp">
<ImageView
android:id="#+id/androidCIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/androidCTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android C"
android:layout_below="#id/androidCIV"
android:layout_marginTop="4dp"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/androidDLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/androidCLayout"
android:layout_marginLeft="32dp">
<ImageView
android:id="#+id/androidDIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/androidDTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android D"
android:layout_below="#id/androidDIV"
android:layout_marginTop="4dp"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
Is this possible?
It surely is possible. The best approach is choosing the first ImageView as reference element to which constrain everything else.
Center the TextView by assigning the left and right constraints to its image left and right edges respectively.
Then assign each image left and top contrain to their right and top edge of the previous image respectively.
Finally select all the images in the layout editor, right click and Center Horizontally (this will chain them to fit the screen width)
Example:
<?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="match_parent" android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintLeft_toLeftOf="#+id/imageView"
app:layout_constraintRight_toRightOf="#+id/imageView"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="30dp"
app:layout_constraintRight_toLeftOf="#+id/imageView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintLeft_toLeftOf="#+id/imageView2"
app:layout_constraintRight_toRightOf="#+id/imageView2"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
app:layout_constraintLeft_toRightOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:layout_constraintRight_toLeftOf="#+id/imageView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintLeft_toLeftOf="#+id/imageView3"
app:layout_constraintRight_toRightOf="#+id/imageView3"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/imageView3" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
app:layout_constraintLeft_toRightOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2"
app:layout_constraintRight_toLeftOf="#+id/imageView4" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintLeft_toLeftOf="#+id/imageView4"
app:layout_constraintRight_toRightOf="#+id/imageView4"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/imageView4" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
app:layout_constraintLeft_toRightOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
I've found the solution: Group views in ConstraintLayout to treat them as a single view
Using chains, multiple views could be treated like a group.
Related
Textview fills all the space and leaves no room for the other text view.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/cv_prof"
android:layout_toEndOf="#id/cv_prof"
android:layout_alignParentEnd="true"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_other_user_chat"
android:fontFamily="#font/sf_pro_display_light"
android:padding="#dimen/_10sdp"
android:textColor="#color/blue_theme"
android:textSize="#dimen/_11ssp" />
<TextView
android:id="#+id/tv_time_sent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_5sdp"
android:layout_marginEnd="#dimen/_15sdp"
android:fontFamily="#font/sf_pro_display_light"
android:text="#string/placeholder_time"
android:textColor="#color/white"
android:textSize="#dimen/_8ssp" />
</LinearLayout>
How can i achieve this results?
Please help me
Result 1:
Result 2:
You should add layout_weight element into child view of LinearLayout. Ex:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/cv_prof"
android:layout_toEndOf="#id/cv_prof"
android:layout_alignParentEnd="true"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_other_user_chat"
android:fontFamily="#font/sf_pro_display_light"
android:padding="#dimen/_10sdp"
android:textColor="#color/blue_theme"
android:textSize="#dimen/_11ssp"
android:layout_weight="1"/>
<TextView
android:id="#+id/tv_time_sent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_5sdp"
android:layout_marginEnd="#dimen/_15sdp"
android:fontFamily="#font/sf_pro_display_light"
android:text="#string/placeholder_time"
android:textColor="#color/white"
android:textSize="#dimen/_8ssp"
android:layout_weight="1"/>
</LinearLayout>
set weight = 1 for 2 TextViews that mean width of them will be the same.
Edit:
If you want to use constrain layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="#+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_pdf"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#id/tv_content"/>
<TextView
android:id="#+id/tv_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/ic_pdf"
android:text="abcdjhfjdgfgfdgdfgfdgfdg gfdg hgjkdfhgj fdghjkfdhg hgjkfdh sdgdfg fgnjkdfgh fghfdhg fgjk"
app:layout_constraintBottom_toBottomOf="#+id/imageview"
app:layout_constraintEnd_toStartOf="#id/tv_time_sent"
app:layout_constraintStart_toEndOf="#id/imageview"
app:layout_constraintTop_toTopOf="#+id/imageview" />
<TextView
android:id="#+id/tv_time_sent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="10:00pm"
app:layout_constraintBottom_toBottomOf="#+id/imageview"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/tv_content"
app:layout_constraintTop_toTopOf="#+id/imageview" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have to create three CardView like structure as shown in the below image. For that, I am currently using
Constraintlayout but facing multiple issues i.e, clipping issue.
There is no usecase of swipe animation or anything like that.
Is there anything that I am missing here.Any help will be appreciated.
Here is my code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:id="#+id/card_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:rotation="-20"
android:layout_marginTop="#dimen/dimen_12"
android:layout_marginStart="#dimen/dimen_25"
app:cardCornerRadius="#dimen/dimen_8"
app:cardElevation="#dimen/dimen_1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RelativeLayout
android:id="#+id/rl_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/top_colored_gradient_dark"
android:padding="#dimen/dimen_12">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/img_one"
android:layout_width="72dp"
android:layout_height="72dp"
android:src="#drawable/blue_social" />
<TextView
android:id="#+id/txt_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/img_one"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/dimen_15"
android:textColor="#313131"
android:textSize="#dimen/dimen_14sp"
tools:text="Title Here" />
<TextView
android:id="#+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/txt_name"
android:layout_centerHorizontal="true"
android:textColor="#color/light_text_color"
android:textSize="#dimen/dimen_11sp"
tools:text="Date" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/card_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="#dimen/dimen_2"
app:cardUseCompatPadding="true"
app:cardCornerRadius="#dimen/dimen_8"
android:layout_marginEnd="#dimen/dimen_15"
app:layout_constraintEnd_toStartOf="#id/card_third"
app:layout_constraintStart_toEndOf="#id/card_one"
app:layout_constraintTop_toTopOf="parent">
<RelativeLayout
android:id="#+id/rl_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/top_colored_gradient_dark"
android:padding="#dimen/dimen_12">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/img_two"
android:layout_width="72dp"
android:layout_height="72dp"
android:src="#drawable/blue_social" />
<TextView
android:id="#+id/txt_name_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/img_two"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/dimen_15"
android:textColor="#313131"
android:textSize="#dimen/dimen_14sp"
tools:text="Title Here" />
<TextView
android:id="#+id/txt_date_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/txt_name_two"
android:layout_centerHorizontal="true"
android:textColor="#color/light_text_color"
android:textSize="#dimen/dimen_11sp"
tools:text="Date" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/card_third"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="#dimen/dimen_1"
app:cardCornerRadius="#dimen/dimen_8"
android:layout_marginTop="#dimen/dimen_8"
android:rotation="20"
app:cardUseCompatPadding="true"
app:layout_constraintStart_toEndOf="#id/card_second"
app:layout_constraintTop_toTopOf="parent">
<RelativeLayout
android:id="#+id/rl_third"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/top_colored_gradient_dark"
android:padding="#dimen/dimen_12">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/img_third"
android:layout_width="72dp"
android:layout_height="72dp"
android:src="#drawable/blue_social" />
<TextView
android:id="#+id/txt_name_third"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/img_third"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/dimen_15"
android:textColor="#313131"
android:textSize="#dimen/dimen_14sp"
tools:text="Title Here" />
<TextView
android:id="#+id/txt_date_third"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/txt_name_third"
android:layout_centerHorizontal="true"
android:textColor="#color/light_text_color"
android:textSize="#dimen/dimen_11sp"
tools:text="Date" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
You can use FrameLayout instead of constraint to stack Views like in the Image.
When I am trying to make a border (frame) around my ImageView by using padding or margin in FrameLayout (in code it has id: main_frame), it's only shown on left and right sides but not on top and bottom.
But as I wrote I need it around because it should look like frame.
There is a code:
<?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"
android:background="#color/colorPrimaryDark"
tools:context=".WallActivity">
<RelativeLayout
android:id="#+id/wall_frame"
android:layout_width="592dp"
android:layout_height="315dp"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout"
app:layout_constraintVertical_bias="1.0">
<ImageView
android:id="#+id/wall"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/room"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<FrameLayout
android:id="#+id/main_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#android:color/transparent"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0.621"
android:layout_margin="40dp">
<FrameLayout
android:id="#+id/frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/black"
android:visibility="visible"
android:padding="20dp">
<FrameLayout
android:id="#+id/mat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/white"
android:visibility="visible"
android:padding="10dp">
<RelativeLayout
android:id="#+id/imageholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent">
<ImageView
android:id="#+id/picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/nature"
android:visibility="visible"
android:layout_centerInParent="true"/>
</RelativeLayout>
</FrameLayout>
</FrameLayout>
</FrameLayout>
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="586dp"
android:layout_height="36dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:orientation="horizontal"
android:weightSum="35.5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/hideBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Hide"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/clearBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Clear"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/lockBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Lock"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5" />
<Button
android:id="#+id/exportBTN"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Export"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5" />
<Button
android:id="#+id/wallBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Wall"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/pictureBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Picture"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
And here is the screenshot.
Do you have any idea how to solve it? I tried searching but couldn't find anything similar. Or is there a better way to make frames?
Thank you!
//Edited:
I added full xml code, added some padding to FrameLayouts with id: mat, frame. It looks perfect but main_frame is still broken. main_frame should be invisible (with transparent color) so you may think it's not necessarily to solve it, but I find out when I let it be like that it brokes image when I change it. It adds some white borders (only just on left and right side) to the image...
There is another picture to show you that frames look good but as I said main_frame is broken...
Add this: android:padding="2dp" to the FrameLayout with id frame. You can change 2dp to what you like.
You might consider having a simple layout using one RelativeLayout and an ImageView. The RelativeLayout might have a background whereas the ImageView will have some padding along with a background as well. So the layout will be something like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/room">
<ImageView
android:id="#+id/picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#android:color/black"
android:padding="16dp"
android:scaleType="fitCenter"
android:src="#drawable/nature" />
</RelativeLayout>
Hope that helps!
ConstraintLayout version: 1.1.0 stable.
I am using ConstraintLayout as recyclerview item layout, xml file looks like this:
<?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="wrap_content"
android:background="#drawable/list_item_bg_selector"
android:minHeight="60dp">
<android.support.constraint.Guideline
android:id="#+id/left_guide_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp"/>
<android.support.constraint.Guideline
android:id="#+id/top_guide_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="10dp"/>
<android.support.constraint.Guideline
android:id="#+id/right_guide_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="16dp"/>
<android.support.constraint.Guideline
android:id="#+id/bottom_guide_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_end="7dp"/>
<ImageView
android:id="#+id/avatar"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginBottom="5dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:scaleType="centerCrop"
android:src="#drawable/common_head_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="#+id/left_guide_line"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/tv_unread_red_point"
style="#style/tips_red_dot_circle_common"
android:visibility="gone"
app:layout_constraintBottom_toTopOf="#+id/avatar"
app:layout_constraintLeft_toRightOf="#+id/avatar"
app:layout_constraintRight_toRightOf="#+id/avatar"
app:layout_constraintTop_toTopOf="#+id/avatar"
tools:visibility="visible"/>
<TextView
android:id="#+id/tv_unread_msg_count"
style="#style/tips_red_dot_num_common"
android:layout_marginLeft="32dp"
android:gravity="center"
android:visibility="gone"
app:layout_constraintBottom_toTopOf="#+id/avatar"
app:layout_constraintLeft_toLeftOf="#+id/left_guide_line"
app:layout_constraintRight_toRightOf="#+id/avatar"
app:layout_constraintTop_toTopOf="#+id/avatar"
tools:text="99+"
tools:visibility="visible"/>
<cn.test.widget.NickWidget
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
app:layout_constraintBottom_toTopOf="#+id/msg"
app:layout_constraintLeft_toRightOf="#+id/avatar"
app:layout_constraintRight_toLeftOf="#+id/time"
app:layout_constraintTop_toTopOf="#+id/top_guide_line"
app:layout_constraintVertical_chainStyle="packed"/>
<TextView
android:id="#+id/time"
style="#style/text_h3_common_36px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:includeFontPadding="false"
android:maxLines="1"
android:text="#string/def_value"
app:layout_constraintBottom_toBottomOf="#+id/name"
app:layout_constraintLeft_toRightOf="#+id/name"
app:layout_constraintRight_toRightOf="#+id/right_guide_line"
app:layout_constraintTop_toTopOf="#+id/name"
tools:text="11:22"/>
<ImageView
android:id="#+id/msg_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="1dp"
android:scaleType="centerCrop"
android:src="#drawable/recent_msg_state"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/msg"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toRightOf="#+id/avatar"
app:layout_constraintRight_toLeftOf="#+id/icon_chatroom"
app:layout_constraintTop_toTopOf="#+id/msg"
tools:visibility="visible"/>
<ImageView
android:id="#+id/icon_chatroom"
android:layout_width="14dp"
android:layout_height="14dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:scaleType="centerCrop"
android:src="#drawable/common_head_icon"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/msg"
app:layout_constraintLeft_toRightOf="#+id/msg_state"
app:layout_constraintRight_toLeftOf="#+id/msg"
app:layout_constraintTop_toTopOf="#+id/msg"
app:layout_goneMarginLeft="10dp"
tools:visibility="visible"/>
<TextView
android:id="#+id/msg"
style="#style/text_h2_common_42px"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_marginTop="1dp"
android:ellipsize="end"
android:maxLines="1"
android:paddingBottom="1dp"
android:paddingTop="1dp"
app:layout_constraintBottom_toTopOf="#+id/bottom_guide_line"
app:layout_constraintLeft_toRightOf="#+id/icon_chatroom"
app:layout_constraintRight_toLeftOf="#+id/chat_room_exit_icon"
app:layout_constraintTop_toBottomOf="#+id/name"
app:layout_goneMarginLeft="10dp"/>
<ImageView
android:id="#+id/chat_room_exit_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/im_icon_chat_room_exit"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/msg"
app:layout_constraintLeft_toRightOf="#+id/msg"
app:layout_constraintRight_toLeftOf="#+id/group_msg_not_notify_icon"
app:layout_constraintTop_toTopOf="#+id/msg"
tools:visibility="visible"/>
<ImageView
android:id="#+id/group_msg_not_notify_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/pub_nngroup_icon_shield"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/msg"
app:layout_constraintLeft_toRightOf="#+id/chat_room_exit_icon"
app:layout_constraintRight_toLeftOf="#+id/right_guide_line"
app:layout_constraintTop_toTopOf="#+id/msg"
tools:visibility="visible"/>
</android.support.constraint.ConstraintLayout>
We got really bad performance when scrolling through the RecyclerView, and everything work just fine if I change item layout from a ConstraintLayout to a traditional layout (Nesting 4 or 5 layers). What can we do about this?
I have used ConstraintLayout as item layout of recyclerview, it scrolls smoothly. I think there is no problem of ConstraintLayout, but make sure that you should not call myAdapter.notifyDataSetChanged() in adapter class. It will make your app slow UI rendering.
Refer this Android document for Slow rendering
For the TitleBar I have a RelativeLayout, which should display two buttons on the right side, and two TextViews on the left side. I got the layout code working in the Editor, but on the device it always breaks down.
On the image you can see a Screenshot from the Layout Editor and from the device (runs like this on multiple devices).
Here is the Layout Code I'm using:
- I know I just can dump in LinearLayouts, but this should be possible with RelativeLayout?
- I used the "toStartOf" properties because I don't want to overflow the icons with text if the text might be longer.
- Bonus Question: how can I center the two labels vertical, so that they are also centered if I only have a title and set the subtitle visibility to GONE
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/toolbar_right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="#dimen/default_content_padding"
android:background="#android:color/transparent"
tools:src="#drawable/account"/>
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/toolbar_left_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="16dp"
android:layout_toStartOf="#id/toolbar_right_button"
android:background="#android:color/transparent"
tools:src="#drawable/ic_notifications"/>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignWithParentIfMissing="true"
android:layout_toStartOf="#id/toolbar_left_button"
android:fontFamily="#string/font_family_medium"
android:textAppearance="?android:textAppearanceMedium"
tools:text="Title "/>
<TextView
android:id="#+id/toolbar_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignWithParentIfMissing="true"
android:layout_below="#id/toolbar_title"
android:textAppearance="?android:textAppearanceSmall"
tools:text="Subtitle"/>
</RelativeLayout>
A ConstraintLayout would solve your problem. It keeps your layout flat, and also centers your text layouts vertically (and maintains it even after you 'remove' the subtitle).
<android.support.constraint.ConstraintLayout>
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/toolbar_right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/default_content_padding"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/account" />
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/toolbar_left_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/default_content_padding"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#+id/toolbar_right_button"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/ic_notifications" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#string/font_family_medium"
android:textAppearance="?android:textAppearanceMedium"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="#id/toolbar_subtitle"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/toolbar_left_button"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
tools:text="Title " />
<TextView
android:id="#+id/toolbar_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:textAppearance="?android:textAppearanceSmall"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar_title"
tools:text="Subtitle" />
</android.support.constraint.ConstraintLayout>
I have made it simple so it wont get messy:
<RelativeLayout 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">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
app:srcCompat="#android:drawable/ic_menu_compass" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignStart="#+id/imageButton"
android:layout_below="#+id/imageButton"
app:srcCompat="#android:drawable/btn_dialog" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageButton2"
android:layout_alignParentStart="true"
android:text="TextView" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/textView4"
android:text="TextView" />
There are high chances that if You add a lot of elements and tools to the layout it will get messy, try to keep it simple and You will find what caused the problem.