I am trying to implement a layout like this:
I had added a code like below, but the problem is that the two ImageViews' heights is zero in the final rendered layout. I don't know why the app:layout_constraintDimensionRatio="1:1" (height to width ratio 1:1) has no effect? Did I missed something?
<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/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#drawable/orange_gradient"
app:layout_constraintDimensionRatio="1:0.5">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
android:orientation="horizontal"
android:weightSum="10">
<!-- want height to be constrained by 1:1 to width -->
<ImageView
android:id="#+id/croppedFaceImageView"
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
android:background="#android:color/darker_gray" />
<TextView
android:id="#+id/confidenceLabel"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:text="90%"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="8sp"
android:background="#android:color/holo_green_dark" />
<ImageView
android:id="#+id/avartarImageView"
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
android:background="#android:color/holo_orange_dark" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
You can only use app:layout_constraintDimensionRatio in a ConstraintLayout.
However, there is a way to achieve what you're looking for.
Replace the LinearLayout with ConstraintLayout and follow the following code template on your xml design
NB. Notice that the trick to have the child views line out properly is using constraint rules against each child.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/sun"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/mon"
android:text="S"/>
<TextView
android:id="#+id/mon"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/sun"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/tue"
android:text="M"/>
<TextView
android:id="#+id/tue"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/mon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/wed"
android:text="T"/>
<TextView
android:id="#+id/wed"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/tue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/thur"
android:text="W"/>
<TextView
android:id="#+id/thur"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/wed"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/fri"
android:text="T"/>
<TextView
android:id="#+id/fri"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/thur"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/sat"
android:text="F"/>
<TextView
android:id="#+id/sat"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/fri"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="S"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The above code will create something like:
Related
I need to achieve the following layout:
The title 'Trouble in paradise should be able to expand in height but it shouldn't push 'Ma 21januari' outside of the bounds.
This is my layout at the moment:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/wrapper_titles"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/image_episode"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_episode"
app:layout_constraintTop_toTopOf="#id/image_episode"
>
<TextView
android:id="#+id/subtitle_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="bottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/title_episode"
tools:text="Ma 21 januari"
style="#style/Text_Episode_Subtitle"
/>
<TextView
android:id="#+id/title_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:text="Trouble in paradise"
style="#style/Text_Episode_Title"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
How can I make title_episode expand to the full height but with subtitle_episode still fixed to the top?
I think the cleanest solution would be to put both TextViews in a packed vertical chain with bias set to 1 so that they stick to the bottom. This means that you need to add top constraints for these TextViews which will also help to prevent them from getting pushed outside. Since the title_episode's height is set to wrap_content, it's also important to set the app:layout_constrainedHeight="true" attribute to enforce its constraints as it expands.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/wrapper_titles"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/image_episode"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_episode"
app:layout_constraintTop_toTopOf="#id/image_episode"
>
<TextView
android:id="#+id/subtitle_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="bottom"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/title_episode"
app:layout_constraintTop_toTopOf="parent"
tools:text="Ma 21 januari"
style="#style/Text_Episode_Subtitle"
/>
<TextView
android:id="#+id/title_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/subtitle_episode"
tools:text="Trouble in paradise"
style="#style/Text_Episode_Title"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I've provided a basic structure meeting your requirements, customize according to your need:
<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">
<ImageView
android:id="#+id/image_thumbnail"
android:layout_width="180dp"
android:layout_height="150dp"
android:scaleType="fitXY"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#tools:sample/avatars" />
<TextView
android:id="#+id/subtitle_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="15dp"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="#+id/image_thumbnail"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image_thumbnail"
app:layout_constraintTop_toTopOf="#+id/image_thumbnail"
tools:text="Ma 21 januari" />
<TextView
android:id="#+id/title_episode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="15dp"
android:textColor="#android:color/black"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image_thumbnail"
app:layout_constraintTop_toBottomOf="#+id/subtitle_episode"
tools:text="Trouble in paradise Trouble in paradise Trouble in paradise" />
</android.support.constraint.ConstraintLayout>
Here, take a look:
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/image_episode"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_episode"
app:layout_constraintTop_toTopOf="#id/image_episode">
<TextView
android:id="#+id/subtitle_episode"
style="#style/Text_Episode_Subtitle"
android:layout_width="0dp"
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"
tools:text="Ma 21 januari" />
<TextView
android:id="#+id/title_episode"
style="#style/Text_Episode_Title"
android:layout_width="0dp"
android:layout_height="0dp"
android:ellipsize="end"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/subtitle_episode"
tools:text="Trouble in paradise Trouble in paradise" />
</android.support.constraint.ConstraintLayout>
I'm trying to give two Textviews the correct position in the Constraintlayout in my layout file. The problem is the textviews needs to be scalable using app: autoSizeTextType="uniform". To make them scale I also have to match_parent on the layout_width and layout_height. This makes the two textviews overlap. How can I accomplish the desired result?
Current XML file:
<?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/colorPrimary"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
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.362" />
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
Actual result:
Both textviews scales, but overlaps, and are placed in the center of the constraintlayout.
The current state:
The expected result:
One textview centered in the middle. One textview aligned at the bottom. Both textviews scales with the constraintlayout.
Expected result: (3 different custom compounds in an activity)
you have to give top and bottom proper constraint
<androidx.constraintlayout.widget.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"
android:background="#color/colorPrimary"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
It might be helpful
<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:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="24dp"
android:gravity="center"
android:text="1"
android:textSize="50sp"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textSize="28sp"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title" />
</android.support.constraint.ConstraintLayout>
Textview size we have to add
Modify the TextView to have height and width of 0dp, this will match parent constraint view, add in a constraint for the views in relation to each other and that should give you as you asked for
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
2x2 plus 1 un-centered tile
I have 5 square tiles all of which need to be the same size but flexible so it can grow and shrink to fit different display sizes. There is text beneath each tile. I want the last row to be centered horizontally and wish to do this using only xml if possible. I also have a toolbar and a navigation bar. Here is my xml file:
<?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:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" android:background="#drawable/sunrise" tools:layout_editor_absoluteY="25dp">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/toolBarColor"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navigationIcon="#drawable/refresh2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Now - The Technology"
android:textColor="#color/appTitleColor"
android:textSize="18sp"
android:layout_gravity="center"
android:id="#+id/toolbar_title"/>
</android.support.v7.widget.Toolbar>
<ImageView
android:id="#+id/ivPlay"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/play"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp"
app:layout_constraintEnd_toStartOf="#+id/ivReminder"
android:layout_marginEnd="16dp"
/>
<TextView android:id="#+id/tvPlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivPlay"
app:layout_constraintEnd_toEndOf="#+id/ivPlay"
app:layout_constraintTop_toBottomOf="#+id/ivPlay"
android:layout_marginBottom="2dp"
android:text="#string/play_10_minutes"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivReminder"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/reminder"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintStart_toEndOf="#+id/ivPlay"
android:layout_marginStart="16dp"
/>
<TextView android:id="#+id/tvReminder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivReminder"
app:layout_constraintEnd_toEndOf="#+id/ivReminder"
app:layout_constraintTop_toBottomOf="#+id/ivReminder"
android:layout_marginBottom="2dp"
android:text="#string/now_reminder"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivGuide"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/guide"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/tvPlay"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="#+id/ivPlay"
app:layout_constraintEnd_toEndOf="#+id/ivPlay"
app:layout_constraintHorizontal_bias="1.0"/>
<TextView android:id="#+id/tvGuide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivGuide"
app:layout_constraintEnd_toEndOf="#+id/ivGuide"
app:layout_constraintTop_toBottomOf="#+id/ivGuide"
android:layout_marginBottom="2dp"
android:text="#string/guide"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivUpgrade"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/upgrade"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toTopOf="#+id/ivGuide"
app:layout_constraintStart_toStartOf="#+id/ivReminder"
app:layout_constraintEnd_toEndOf="#+id/ivReminder"
/>
<TextView android:id="#+id/tvUpgrade"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivUpgrade"
app:layout_constraintEnd_toEndOf="#+id/ivUpgrade"
app:layout_constraintTop_toBottomOf="#+id/ivUpgrade"
android:layout_marginTop="2dp"
android:text="#string/upgrade"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivLearn"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/learn"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/tvGuide"
app:layout_constraintStart_toStartOf="#+id/ivGuide"
app:layout_constraintEnd_toEndOf="#+id/ivGuide"
app:layout_constraintBottom_toTopOf="#+id/tvLearn"
android:layout_marginTop="16dp"
android:foregroundGravity="center_horizontal"
app:layout_constraintHorizontal_bias="0.5"/>
<TextView android:id="#+id/tvLearn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivLearn"
app:layout_constraintEnd_toEndOf="#+id/ivLearn"
app:layout_constraintTop_toBottomOf="#+id/ivLearn"
app:layout_constraintBottom_toTopOf="#+id/navigation"
android:text="#string/learn"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
android:layout_marginTop="2dp"
android:layout_marginBottom="16dp"
/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#D3D3D3"
app:menu="#menu/navigation" app:itemTextColor="#color/navAccent" style="#style/AppTheme"
android:visibility="visible" app:itemIconTint="#color/navAccent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="0dp"/>
</android.support.constraint.ConstraintLayout>
Thanks in advance.
Try change attributes of android:id="#+id/ivLearn"
from
app:layout_constraintStart_toStartOf="#+id/ivGuide"
app:layout_constraintEnd_toEndOf="#+id/ivGuide"
to
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
I haven't tried it yet but the recycler view looks like the best and most flexible answer from the android team. I used vertical guidelines using percentages and I need to test it on different screen sizes which seems to work at least on one screen size. I will have to convert the Java code to Kotlin which I am learning as well.
Thanks.
I had this nested linear layouts
<LinearLayout
android:id="#+id/has_selected_account"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/account_menu_header_signed_in_vertical_margin"
android:layout_marginBottom="#dimen/account_menu_header_signed_in_vertical_margin"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/close_and_recents"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.myImage
android:id="#+id/account_avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginEnd="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:layout_marginLeft="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginRight="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:contentDescription="#null"
app:imageViewSize="#dimen/account_menu_header_signed_in_disc_size"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="#dimen/account_menu_name_and_display_vertical_padding"
android:paddingBottom="#dimen/account_menu_name_and_display_vertical_padding"
android:orientation="vertical">
<TextView
android:id="#+id/account_display_name"
style="#style/AccountDataDisplayName"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
tools:text="DisplayNameIsLongSoItShouldBeTruncatedAtSomePoint"/>
<TextView
android:id="#+id/account_name"
style="#style/AccountDataAccountName"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical|start"
android:includeFontPadding="false"
tools:text="emailisverylongaswellwewantittogettruncated#gmail.longdomain.com"/>
</LinearLayout>
</LinearLayout>
and i wanted to convert it to one constraint layout:
<merge>
<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:id="#+id/has_selected_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/google_blue100">
<com.myView
android:id="#+id/account_avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginEnd="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:layout_marginLeft="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginRight="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:contentDescription="#null"
app:imageViewSize="#dimen/account_menu_header_signed_in_disc_size"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/account_display_name_top_padding"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="#dimen/account_menu_name_and_display_vertical_padding"
android:background="#color/google_red50"
app:layout_constraintBottom_toTopOf="#id/account_display_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/account_display_name"
style="#style/AccountDataDisplayName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/google_red100"
android:gravity="center_vertical"
android:includeFontPadding="false"
app:layout_constraintBottom_toTopOf="#+id/account_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toTopOf="#+id/account_display_name_top_padding"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintWidth_default="wrap"
tools:text="DisplayNameIssLongSoItShouldBeTruncatedAtSomePoint"/>
<TextView
android:id="#+id/account_name"
style="#style/AccountDataAccountName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/google_green100"
android:gravity="center_vertical"
android:includeFontPadding="false"
app:layout_constraintBottom_toBottomOf="#+id/account_name_bottom_padding"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toBottomOf="#+id/account_display_name"
app:layout_constraintWidth_default="wrap"
tools:text="emailisverylongaswellwewantittogettruncated#gmail.longdomain.com"/>
<View
android:id="#+id/account_name_bottom_padding"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="#dimen/account_menu_name_and_display_vertical_padding"
android:background="#color/google_red50"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toBottomOf="#id/account_name"/>
</android.support.constraint.ConstraintLayout>
</merge>
The result was almost OK, but the textViews are going too up and too close to the Image view.
here is the new result overlapping the old ui:
Does anyone have an idea why? or how to solve this?
I have added margin left to the imageView but it didn't seem to change anything.
Try building a more parallel structure between the TextViews in the LinearLayout and the ones in the ConstraintLayout something like the following. Here I have used a FrameLayout to show the overlay better and took some liberties with sizes, but the concept holds for your layout. As you can see from the image, the TextViews line up precisely except for the final character which is different between the two sets of TextViews to give a visual of the overlay.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="250dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="16dp"
android:paddingBottom="16dp">
<TextView
android:id="#+id/account_display_name"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="DisplayName1" />
<TextView
android:id="#+id/account_name"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_weight="1"
android:gravity="center_vertical|start"
android:includeFontPadding="false"
android:text="emailisvery1" />
</LinearLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="500dp"
android:layout_height="match_parent">
<TextView
android:id="#+id/account_display_name2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:gravity="center_vertical"
android:paddingTop="16dp"
android:text="DisplayName2"
app:layout_constraintBottom_toTopOf="#id/account_name2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1" />
<TextView
android:id="#+id/account_name2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:gravity="center_vertical|start"
android:includeFontPadding="false"
android:paddingBottom="16dp"
android:text="emailisvery2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/account_display_name2"
app:layout_constraintVertical_weight="1" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>t>
I'm seeing a ConstraintLayout occasionally fail to draw correctly, but only when I switch between fragments, and I'm not seeing why.
It looks like this initially:
But, after switching tabs, it looks like this:
fragment_overview.xml (The Fragment layout)
<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"
android:background="#color/palette_grey_light"
android:clipToPadding="false"
android:paddingTop="16dp">
<uk.lobsterdoodle.edinburghwolves.view.FixtureView
android:id="#+id/overview_fixture_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
... a few other views ...
</android.support.constraint.ConstraintLayout>
fixture_view.xml (The custom view layout, FixtureView)
<?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="wrap_content">
<View
android:id="#+id/fixture_away_color"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/palette_red"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/fixture_home_color"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/fixture_home_color"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/palette_grey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="#+id/fixture_away_color"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/fixture_away_team_score"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="27"
android:textColor="#color/palette_white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="#+id/fixture_away_team_name"
app:layout_constraintStart_toStartOf="#+id/fixture_away_team_name"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/fixture_away_team_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="32dp"
android:text="WOLVES"
android:textColor="#color/palette_white"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/fixture_home_color"
app:layout_constraintTop_toBottomOf="#+id/fixture_away_team_score"
app:layout_constraintVertical_bias="0.0"
android:layout_marginTop="0dp"/>
<TextView
android:id="#+id/fixture_home_team_score"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="21"
android:textColor="#color/palette_white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="#+id/fixture_home_team_name"
app:layout_constraintStart_toStartOf="#+id/fixture_home_team_name"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/fixture_home_team_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="32dp"
android:text="PIRATES"
android:textColor="#color/palette_white"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/fixture_home_color"
android:layout_marginTop="0dp"
app:layout_constraintTop_toBottomOf="#+id/fixture_home_team_score"/>
<TextView
android:id="#+id/fixture_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="FINAL"
android:textColor="#color/palette_white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/fixture_away_team_score"
android:layout_marginBottom="0dp"
/>
</android.support.constraint.ConstraintLayout>
While your fixture_view.xml file constrains views in the ConstraintLayout properly, a view in the ConstraintLayout in fragment_overview.xml isn't constrained, so they won't display properly at runtime. Add some some constraints to your FixtureView in fragment_overview.xml like so:
<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"
android:background="#color/palette_grey_light"
android:clipToPadding="false"
android:paddingTop="16dp">
<!-- You were missing constraints here -->
<uk.lobsterdoodle.edinburghwolves.view.FixtureView
android:id="#+id/overview_fixture_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:cardBackgroundColor="#color/palette_white"
app:cardElevation="2dp"
app:contentPadding="16dp"
app:layout_constraintTop_toBottomOf="#id/overview_fixture_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="standings"
android:textColor="#color/palette_grey"/>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
Fixed, by making the score TextView's height wrap_content instead of matching constraint of 0dp
<TextView
android:id="#+id/fixture_away_team_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content" <-- wrap, not 0dp
...
/>