constraint layout performance as recyclerview item - android

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

Related

How to create Placeholder Shimmer Layout for Recycler View using same row which is used in Adapter?

I implemented some examples for Shimmer effect for learning. I don't understand that why people are using separate placeholder layout for while using shimmer effect?
Can't we do change color programmatically and do it for the row which we're used in Adapter class?
See the code for my adapter class row:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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:clickable="true"
android:focusable="true"
android:foreground="?selectableItemBackground"
app:cardCornerRadius="3dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<LinearLayout
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_toStartOf="#+id/delete"
android:orientation="vertical">
<TextView
android:id="#+id/eventTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:textColor="#color/colorBlack"
android:textSize="18sp"
android:visibility="gone" />
<TextView
android:id="#+id/eventDes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
<TextView
android:id="#+id/eventAttendee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
<TextView
android:id="#+id/eventStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
<TextView
android:id="#+id/eventEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
<TextView
android:id="#+id/eventLocation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:visibility="gone" />
</LinearLayout>
<ImageView
android:id="#+id/delete"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:clickable="true"
android:focusable="true"
android:tint="#color/colorBlack"
app:srcCompat="#drawable/ic_baseline_delete_24" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
Can I do that with this layout only? or should I create separate? If separate, can you please tell me how to do that for this above row? Everyone using "view" layout only. I don't understand this.
The reason for declaring a new layout is because you have to wrap your views inside Shimmerlayout and its parent layout will be either frame layout or linear layout. So basically you are restricted in terms of which container to use. Moreover, you are only going to show shimmer animation for a few seconds so using it as a primary ViewGroup is not recommended.
So to create this row just wrap it inside
<?xml version="1.0" encoding="utf-8"?>
<com.facebook.shimmer.ShimmerFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/shimmer_view_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:foreground="?selectableItemBackground"
app:cardCornerRadius="3dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<LinearLayout
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_toStartOf="#+id/delete"
android:orientation="vertical">
<TextView
android:id="#+id/eventTitle"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:layout_marginStart="12dp"
android:textSize="18sp"
android:text="your title"
android:background="#cecece"
android:textColor="#cecece"
/>
<TextView
android:id="#+id/eventDes"
android:layout_width="match_parent"
android:layout_height="15dp"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:text="your sample description goes here"
android:background="#cecece"
android:textColor="#cecece"
/>
<TextView
android:id="#+id/eventAttendee"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:text="your eventAttendee"
android:background="#cecece"
android:textColor="#cecece"
/>
<TextView
android:id="#+id/eventStart"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:text="your start time"
android:background="#cecece"
android:textColor="#cecece"
/>
<TextView
android:id="#+id/eventEnd"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:text="your end time"
android:background="#cecece"
android:textColor="#cecece"
/>
<TextView
android:id="#+id/eventLocation"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:text="your location"
android:background="#cecece"
android:textColor="#cecece"
/>
</LinearLayout>
<ImageView
android:id="#+id/delete"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:clickable="true"
android:focusable="true"
android:tint="#cecece"
app:srcCompat="#drawable/ic_delete" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</com.facebook.shimmer.ShimmerFrameLayout>
Now when you have to start it just use -
`
ShimmerFrameLayout container =
(ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
container.startShimmer();

About the constraint layout height

The below picture is the output I wanted to make:
I have already gone through
How to set a view's height match parent in ConstraintLayout?
and
https://developer.android.com/reference/android/support/constraint/ConstraintLayout
What I have done is I have made a constrain layout as the main parent layout and inside that, I had mad a relative layout with the circle as background and Image on top.
And also the rectangular top curved corners one is in the background of a constraint layout. Now what I am not getting is the height of this constraint layout the bottom of this should touch the bottom of the screen but as soon as I declare the height as match parent it occupies the whole screen from top to bottom. Below is my XML code.
<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="match_parent"
android:background="#color/silver"
tools:context=".ResetPassword">
<RelativeLayout
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/circle_shape"
>
<ImageView
android:id="#+id/iv_reset_bck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_arrow_back_black_24dp"></ImageView>
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl_reset_topImage"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/circle_shape">
<ImageView
android:id="#+id/iv_reset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
app:srcCompat="#mipmap/ic_launcher_round" />
</RelativeLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#drawable/bg_rectangle"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingRight="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rl_reset_topImage">
<LinearLayout
android:id="#+id/welcomeLoginLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteY="5dp">
<com.example.portfolio.CustomViews.PopinsBoldTextView
android:id="#+id/tv_welcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="43dp"
android:layout_marginLeft="43dp"
android:layout_marginTop="44dp"
android:text="#string/welcome"
android:textColor="#color/black"
android:textSize="26sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.example.portfolio.CustomViews.PopinsBoldTextView
android:id="#+id/tv_logintext_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="43dp"
android:layout_marginLeft="43dp"
android:text="#string/loginwith"
android:textColor="#color/black"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
<RelativeLayout
android:id="#+id/emailRelativeLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginStart="40dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="40dp"
android:layout_marginRight="40dp"
android:background="#drawable/bg_email_rect"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/welcomeLoginLayout">
<EditText
android:id="#+id/et_email"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:background="#android:color/transparent"
android:hint="#string/prompt_email"
android:paddingTop="5dp"
android:textSize="20sp"
android:paddingBottom="5dp"
android:textColorHint="#color/dark_gey"></EditText>
</RelativeLayout>
<RelativeLayout
android:id="#+id/passwordlRelativeLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginStart="40dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="40dp"
android:layout_marginRight="40dp"
android:background="#drawable/bg_email_rect"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailRelativeLayout">
<EditText
android:id="#+id/et_password"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:background="#android:color/transparent"
android:hint="#string/prompt_password"
android:textSize="20sp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:textColorHint="#color/dark_gey"></EditText>
</RelativeLayout>
<RelativeLayout
android:id="#+id/login_btnLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginStart="40dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="40dp"
android:layout_marginRight="40dp"
android:background="#drawable/bg_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passwordlRelativeLayout">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Login"
android:textColor="#FFF"
android:textSize="20dp"
android:textStyle="bold"></TextView>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This is what I get the output from the above code
How can I make it as the above image?
As mentioned in the comment, you do not need to setup parent Layouts inside ConstraintLayout as ConstraintLayout is pretty powerful and can easily achieve what you want. What you are lacking is good use of constraints, and you are trying to compensate that by using RelativeLayout. Having a ConstraintLayout inside a ConstraintLayout is an overkill.
I have not created the BottomSheet for you ResetPassword, but that is something you can work on yourself as its simply an arrangement of elements or bringing in a customView. My point is to simply use one ConstraintLayout as the parent that will manage all the ViewGroups, and refrain from using any other Layouts inside it.
Design preview
XML Layout file
<?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="match_parent">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.25"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="Reset your password"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Reset your password to use app"
app:layout_constraintEnd_toEndOf="#+id/textView"
app:layout_constraintStart_toStartOf="#+id/textView"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<EditText
android:id="#+id/editTextTextPersonName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<EditText
android:id="#+id/editTextTextPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPersonName"
app:layout_constraintStart_toStartOf="#+id/editTextTextPersonName"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPassword"
app:layout_constraintStart_toStartOf="#+id/editTextTextPassword"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPassword" />
</androidx.constraintlayout.widget.ConstraintLayout>

Gap between imageviews in Linear Layout that is inside the Constraint layout

I have 2 imageviews in a linear layout inside a constraint layout. There should be no gap between them, but when I run it, on some large devices it shows the gap even though I didnt give any margin or padding between them. The imageviews are with ids onboarding_image and image_line. I linear layout must be between the two guidelines showing images one upon the other without any space should take up whatever the space is left between the guideline in all devices.
<?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:id="#+id/swipe_layer"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/blue1"
>
<ImageView
android:id="#+id/app_tour_group"
android:layout_width="70dp"
android:layout_height="9dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/group_1" />
<RelativeLayout
android:id="#+id/next_layout"
android:layout_width="277dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toTopOf="#+id/app_tour_group"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline1">
<View
android:id="#+id/app_tour_next"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:background="#drawable/rectangle_2" />
<TextView
android:id="#+id/next_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:gravity="center"
android:text="NEXT"
android:textColor="#ffffff"
android:textSize="18sp" />
</RelativeLayout>
<TextView
android:id="#+id/onboarding_title"
android:layout_width="375dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="TextView"
android:textColor="#ffffff"
android:textSize="29sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/onboarding_description"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center"
android:text="TextView"
android:textColor="#50287d"
android:textSize="17sp"
android:layout_marginBottom="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/onboarding_title"
app:layout_constraintBottom_toTopOf="#id/guideline2"/>
<LinearLayout
android:layout_width="315dp"
android:layout_height="0dp"
android:id="#+id/image_layout"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#id/guideline1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline2"
app:layout_constraintVertical_weight="1"
android:weightSum="417"
>
<ImageView
android:id="#+id/onboarding_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="0dp"
android:layout_margin="0dp"
android:layout_marginBottom="-8dip"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:layout_weight="414"
/>
<ImageView
android:id="#+id/image_line"
android:layout_width="wrap_content"
android:layout_weight="3"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_gravity="center"
android:padding="0dp"
android:layout_margin="0dp"
android:layout_marginTop="-8dip"
app:srcCompat="#drawable/line"
android:scaleType="centerInside"
android:adjustViewBounds="true"/>
</LinearLayout>
<android.support.constraint.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.88"
app:layout_constraintBottom_toTopOf="#+id/next_layout"
app:layout_constraintTop_toBottomOf="#+id/image_layout"/>
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.245"
app:layout_constraintBottom_toTopOf="#+id/image_layout"
app:layout_constraintTop_toBottomOf="#+id/onboarding_description"
/>
</android.support.constraint.ConstraintLayout>
You say: I didn't give any margin or padding between them.
However, I can see android:layout_marginBottom="-8dip". I know you are setting also android:layout_marginTop="-8dip" to the other image. It's a little weird.
If you want to make your Images fill all the contents, use:
android:scaleType="fitxy"
or
android:scaleType="centerCrop"
in both images

Set linearLayout margin

I need to fill a LinearLayout (child of a ScrollView) with dynamic TextViews.
The problem is that, in my app, the position where the scroll starts is not defined (it changes dynamically while using the app) and I think I've resolved this with layout_constraintTop_toBottomOf.
The main problem is that I need the ScrollView to end at 90dp from the bottom. But I cannot do that with margins (as in my code below) cause it ignores them.
I've also tried padding but doesn't work too.
This is my solution that doesn't work:
<ScrollView
android:id="#+id/scroll_seguiti"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/scroll_view">
<LinearLayout
android:id="#+id/linear_view_seguiti"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="90dp"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
I really need that margin cause at the bottom there are some buttons.
As asked, this is my full xml:
<TableLayout
android:id="#+id/tableLayout_seguiti"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="25dp"
android:layout_marginBottom="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="Cerca utenti da seguire"
android:textSize="20sp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp">
<EditText
android:id="#+id/edit_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:hint="Cerca..." />
</TableRow>
</TableLayout>
<ScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/tableLayout_seguiti">
<LinearLayout
android:id="#+id/linear_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginBottom="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/scroll">
<LinearLayout
android:id="#+id/ln_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="8dp"
android:text="Utenti che segui"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="Clicca sul nome degli utenti che desideri seguire o smettere di seguire."
android:textSize="12sp" />
</LinearLayout>
</ScrollView>
<ScrollView
android:id="#+id/scroll_seguiti"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/scroll_view">
<LinearLayout
android:id="#+id/linear_view_seguiti"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/btn_mieiPost"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginEnd="10dp"
android:layout_marginStart="15dp"
android:text="I miei post"
style="#style/Widget.AppCompat.Button.Colored"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btn_home"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_seguiti"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginEnd="15dp"
android:layout_marginStart="10dp"
android:text="Seguiti"
style="#style/Widget.AppCompat.Button.Colored"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/btn_home" />
<Button
android:id="#+id/btn_home"
android:layout_width="100dp"
android:layout_height="70dp"
android:layout_marginBottom="10dp"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:text="Home"
style="#style/Widget.AppCompat.Button.Colored"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btn_seguiti"
app:layout_constraintStart_toEndOf="#+id/btn_mieiPost"
app:srcCompat="#android:drawable/ic_menu_gallery" />
you need to set margin only for scroll view. Remove the margin from the linear layout.
Add full viewport: true for scroll view.
make height of scrollView match_parent this may help check below
<ScrollView
android:id="#+id/scroll_seguiti"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/scroll_view">
<LinearLayout
android:id="#+id/linear_view_seguiti"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="90dp"
android:orientation="vertical">
</LinearLayout>

Is this design possible with ConstraintLayout?

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.

Categories

Resources