My id/ambient_check_text's marginStart/marginEnd not working, I tested in real device. It looks like below:
layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/ambient_title_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="16dp"
android:layout_weight="1"
android:alpha="0.80"
android:drawableEnd="#drawable/vip_detail_activity_ic_pro"
android:singleLine="true"
android:text="#string/ambient_detail_title"
android:textColor="#color/white"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<util.TopCropImageView
android:id="#+id/ambient_permission_bg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="10dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ambient_detail_permission_bg"
app:layout_constraintTop_toBottomOf="#id/ambient_title_text"
tools:ignore="ContentDescription" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:alpha="0.80"
android:background="#drawable/ambient_detail_decibels_bg"
android:paddingStart="8dp"
android:paddingTop="2dp"
android:paddingEnd="8dp"
android:paddingBottom="2dp"
android:text="#string/ambient_detail_decibels_for_sleep_25db"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="#id/ambient_permission_bg"
app:layout_constraintTop_toTopOf="#id/ambient_permission_bg" />
<TextView
android:id="#+id/ambient_quick_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#drawable/ambient_detail_quick_view_bg"
android:paddingStart="16dp"
android:paddingTop="5dp"
android:paddingEnd="16dp"
android:paddingBottom="5dp"
android:text="#string/ambient_detail_quick_view"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/ambient_permission_bg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/ambient_check_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:alpha="0.80"
android:text="12312313123123123123123123#string/ambient_detail_check_to_see"
android:textColor="#color/white"
app:layout_constraintBottom_toTopOf="#id/ambient_quick_view"
app:layout_constraintEnd_toEndOf="#id/ambient_permission_bg"
app:layout_constraintStart_toStartOf="#id/ambient_permission_bg" />
</androidx.constraintlayout.widget.ConstraintLayout>
UPDATE1:
My id/ambient_quick_view not working as I expected as well, as in some language it is 'quick view' or 'a long version of some language quick view', I tested in real device. (I think I actually expect wrap_content behave, and marginStart behave at the same time, maybe I should not use ContraintLayout.)
Because you applied wrap_text as textview's width. wrap_content takes as much width as required based on content even though you applied horizontal constraints.
Change it to 0dp.
<TextView
android:id="#+id/ambient_check_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:alpha="0.80"
android:text="12312313123123123123123123#string/ambient_detail_check_to_see"
android:textColor="#color/white"
app:layout_constraintBottom_toTopOf="#id/ambient_quick_view"
app:layout_constraintEnd_toEndOf="#id/ambient_permission_bg"
app:layout_constraintStart_toStartOf="#id/ambient_permission_bg" />
Change this
android:layout_width="wrap_content"
to
android:layout_width="0dp"
In ConstraintLayout, whenever we apply constraint, we need to work with 0dp, if vertical (0dp to height) & if horizontal (0dp to width)
Related
I am trying to build the following layout on Android:
As indicated by the dotted lines:
- The two TextViews should be left aligned.
- The ImageView should be center aligned with the title TextView
The labels should be anchored relative to the parent and each other as indicated in the sketch.
I have tried to implement this using ConstrainedLayout which gets me pretty far. But the tricky part is the alignment of image and title.
I would need an attribute like layout_constraintCenter_toCenterOf which unfortunately does not exist.
EDIT: ### removed hard-coded height ###
There was an unwanted hardcoded height in my code (marked in example below). After removing that it works fine for me.
But the question stands: What is the 'right' way to center-align views?
My solution feels like a hack.
#######################################
This is what I got so far:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="5dp">
<ImageView
android:id="#+id/image1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:layout_weight="0"
android:adjustViewBounds="true"
android:contentDescription="#null"
app:layout_constraintEnd_toStartOf="#+id/titleText"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/titleText"
android:layout_width="0dp"
### edit: this line must go:
### android:layout_height="19dp"
android:layout_marginStart="158dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
tools:text="title" />
<TextView
android:id="#+id/detailText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:layout_weight="0"
android:gravity="center_vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/titleText"
app:layout_constraintTop_toBottomOf="#+id/titleText"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="subtitle" />
</android.support.constraint.ConstraintLayout>
I have tried to work around by aligning top and bottom which looks right in the preview but causes glitches in the real app:
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
Maybe ConstrainedLayout is the wrong tool for the job altogether.
What is the 'right way' to implement this layout in Android?
You may try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:src="#drawable/connected_icon_png" />
<View
android:layout_width="10dp"
android:layout_height="0dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:text="Title Label"/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:maxLines="2"
android:text="Content that you want" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"/>
</LinearLayout>
</LinearLayout>
You may able to do further edit if you need.
Happy Coading
Snapshot:
use your widgets inside relative layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_centerInParent="true"
android:padding="5dp">
<ImageView
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:id="#+id/image1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:src="#color/colorAccent"
android:adjustViewBounds="true"
android:contentDescription="#null"
app:layout_constraintEnd_toStartOf="#+id/titleText"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/titleText"
android:layout_width="match_parent"
android:layout_height="19dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:ellipsize="end"
android:text="abcjdnadnaadjdndd"
android:layout_toRightOf="#id/image1"
android:gravity="center_vertical"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
tools:text="title" />
<TextView
android:layout_toRightOf="#id/image1"
android:textAlignment="center"
android:layout_below="#id/titleText"
android:id="#+id/detailText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:text="sadhbhaeadhbaedn"
android:gravity="center_vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/titleText"
app:layout_constraintTop_toBottomOf="#+id/titleText"
tools:text="subtitle" />
</RelativeLayout>
I have the following layout
I wish to achieve
Available space priority will be given to red region LinearLayout, so that no text wrapping will occur.
ConstraintLayout will try its best effort to occupy remaining space. If the remaining space isn't enough, it will perform text wrapping.
Hence,
wrap_content is given to red region LinearLayout
android:layout_width="0dp" and android:layout_weight="1" is given to ConstraintLayout
However, currently, when the content of ConstraintLayout is too long. It will perform text wrapping. However, it will also perform an undesired effect. It will push away the baby icon
This is my complete XML
<LinearLayout
android:orientation="horizontal"
android:id="#+id/top_relative_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="12dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<TextView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintEnd_toStartOf="#+id/sticky_image_view"
app:layout_constraintRight_toLeftOf="#+id/sticky_image_view"
android:text="Home long text long text"
android:id="#+id/label_text_view"
android:textSize="14sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="8dp"
android:paddingRight="8dp"
android:textColor="?attr/secondaryTextColor" />
<ImageView
app:layout_constraintLeft_toRightOf="#+id/label_text_view"
app:layout_constraintStart_toEndOf="#+id/label_text_view"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/sticky_image_view"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:tint="?attr/greyIconColor"
app:srcCompat="#drawable/sn_baby" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:background="#ff0000"
android:gravity="top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/pin_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd"
android:src="?attr/smallPinIcon" />
<ImageView
android:id="#+id/locked_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd" />
<ImageView
android:id="#+id/reminder_repeat_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="8dp"
android:paddingRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd" />
<ImageView
android:id="#+id/reminder_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="4dp"
android:paddingRight="4dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd" />
<TextView
android:text="Yesterday, 31 December, 2019"
android:id="#+id/date_time_text_view"
android:textSize="14sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/secondaryTextColor" />
</LinearLayout>
</LinearLayout>
Any idea how I can prevent such?
If you actually want the text to wrap, you might want to constrain the sticky_image_view to the end, bottom and top of parent. Then just add either a height or width to this imageview, a ratio of 1:1, and a horizontalBias of 0. This should do the trick.
Try to set layout_width = "0dp" on ConstraintLayout's TextView. ConstraintLayout constraints work when you set dimension to 0dp.
And the image view should be like this -
<ImageView
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
Instead of this -
<ImageView
app:layout_constraintLeft_toRightOf="#+id/label_text_view"
app:layout_constraintStart_toEndOf="#+id/label_text_view"
app:layout_constraintTop_toTopOf="parent"
Maybe this layout can work:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/top_relative_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="16dp"
android:paddingTop="8dp"
android:paddingRight="16dp"
android:paddingBottom="12dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/label_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:paddingEnd="28dp"
android:text="Home"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/sticky_image_view"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="2dp"
app:layout_constraintEnd_toEndOf="#id/label_text_view"
app:layout_constraintTop_toTopOf="#id/label_text_view"
app:srcCompat="#drawable/ic_done" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff0000"
android:gravity="top"
android:orientation="horizontal">
<ImageView
android:id="#+id/pin_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd"
android:src="#drawable/ic_circle" />
<ImageView
android:id="#+id/locked_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:adjustViewBounds="true"
android:scaleType="fitEnd" />
<ImageView
android:id="#+id/reminder_repeat_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:paddingEnd="8dp"
android:paddingRight="8dp"
android:scaleType="fitEnd" />
<ImageView
android:id="#+id/reminder_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:paddingEnd="4dp"
android:paddingRight="4dp"
android:scaleType="fitEnd" />
<TextView
android:id="#+id/date_time_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Yesterday, 31 December, 2019"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
This is how the design looked in Preview tab
But when I run it on emulator or real device, valid until date not appearing.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="#dimen/card_margin"
android:elevation="3dp"
card_view:cardCornerRadius="#dimen/sell_item_radius">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_blue_light">
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/validUntil"
android:textColor="#color/colorPrimaryDark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/date"
android:text="date"
android:textColor="#color/colorPrimaryDark" />
</RelativeLayout>
<ImageView
android:id="#+id/itemImage"
android:layout_width="match_parent"
android:layout_height="#dimen/sell_item_image_height"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/ic_camera" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/itemImage"
android:layout_alignParentRight="true"
android:src="#drawable/ic_favourite" />
<TextView
android:id="#+id/imageCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="5dp"
android:layout_marginRight="10dp"
android:text="#string/imageCount"
android:textColor="#color/blue" />
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/itemImage"
android:layout_marginTop="-3dp"
android:paddingLeft="#dimen/sell_item_image_padding"
android:paddingTop="#dimen/sell_item_image_padding"
android:paddingRight="#dimen/sell_item_image_padding"
android:text="#string/title"
android:textColor="#color/blue"
android:textSize="#dimen/sell_item_title" />
<TextView
android:id="#+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_marginRight="10dp"
android:paddingLeft="#dimen/sell_item_image_padding"
android:paddingRight="#dimen/sell_item_image_padding"
android:text="#string/price" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Thanks
The reason that you don't see some of your views is that all of your views width and height are wrap_content - so you created a layout that your views can expand according to the content of them (if you will add 200 dp on 600 dp image and set width and height to wrap_content this will be your view size) and you can see that even on your preview - your views are overlapping one another.
So you can either use fixed size on your views, but by doing so you are entering the danger zone - your layout won't be responsive to all screen sizes, that's because different phones got different screen size and what may look good on one phone won't look good on another phone.
Sure, you can fix this by creating a single layout for every screen size but that's a lot of work.
You can also define your relative layout with android:weightSum and layout_weight
But there is an even better option:
You can use ConstraintLayout to achieve a single layout that is responsive to all screen sizes, all of its view hierarchy is flat (no nested view groups) and is it really simple to use.
Here is an example for a layout that looks just like you want with constraintLayout :
<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">
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView13"
android:layout_width="0dp"
android:layout_height="15dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView12"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintStart_toEndOf="#+id/textView10"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView14"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="heart"
app:layout_constraintBottom_toTopOf="#+id/textView13"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textView8" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toTopOf="#+id/textView14"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8"
tools:src="#tools:sample/avatars[11]" />
</androidx.constraintlayout.widget.ConstraintLayout>
And here is how it looks in portrait :
And landscape:
Finally I solved it ! I just move the imageView with id itemImage, place it after first RelativeLayout.
I am having a Guideline in a Constraint Layout that I use to anchor a LinearLayout to keep to its left as follows:
So, you can see the Guideline a bit right to middle and between LinearLayout on the left and the ImageView to the right.
Now, when I run the App and set the text of Skill Set or Tutor Types or Location considerably large, it crosses the GuideLine to being behind the ImageView as follows:
(Note: This is NOT a real person's data but mock data)
If you see the XML, you will find that the LinearLayout is indeed meant to be anchored to_left_of the Guideline but that doesn't happen.
So, what is the problem here? Is there a bug in Constraint Layout or am I missing something?
Layout for reference:
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:background="#color/lightGrey"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:paddingBottom="10dp"
android:elevation="2dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.0"
android:id="#+id/linearLayout"
tools:layout_editor_absoluteY="16dp">
<TextView
android:text="#string/tutor_name"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tutor_name"/>
<TextView
android:text="#string/tutor_skill_set"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="#+id/skill_set"/>
<TextView
android:text="#string/tutor_types"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="#+id/tutor_types" />
<TextView
android:text="#string/tutor_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/location"
android:layout_marginTop="12dp" />
</LinearLayout>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
app:srcCompat="#android:color/holo_blue_light"
android:id="#+id/display_pic"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
app:layout_constraintHorizontal_bias="1.0" />
<com.iarcuschin.simpleratingbar.SimpleRatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tutor_rating"
android:layout_below="#+id/display_pic"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:srb_starSize="13dp"
app:srb_numberOfStars="5"
app:srb_borderColor="#color/blue"
app:srb_fillColor="#color/blue"
app:srb_starBorderWidth="1"
app:srb_isIndicator="true"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="#+id/display_pic"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/display_pic"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
app:layout_constraintHorizontal_bias="1.0" />
<TextView
android:id="#+id/tutor_requested_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="Requested time"
android:textStyle="italic"
android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/tutor_rating"
app:layout_constraintRight_toLeftOf="#+id/guideline"
android:layout_marginRight="8dp"
app:layout_constraintLeft_toLeftOf="#+id/linearLayout"
app:layout_constraintHorizontal_bias="0.0" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6796875" />
</android.support.constraint.ConstraintLayout>
Change the android:layout_width="wrap_content" property of the LinearLayout to android:layout_width="0dp".
This will work because setting the layout_width to 0dp means that the width for the LinearLayout will be computed based on the constraints placed on it. Whereas if the width is set to wrap_content the width will be computed based on the size of it's child views.
Update:
I just used setTextScaleX instead of setScalex to scale the textView and it worked as what I expected this time.
Just like the photos above.
I use ConstraintLayout to keep the space between "$" and center textView and "00".
When I set 5555 to the center textView, it became wider, but I want to keep its original size.
So I scaled the "5555" part, I found the constraints did not update as well.
Can anybody give me some advice?
Thanks a lot!
My layout xml is as following.
<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"
tools:context="com.echo.tipcalculator.fragments.FeeUnitFragment">
<TextView
android:id="#+id/fee_title"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="title"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="16dp" />
<TextView
android:id="#+id/fee_unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$"
android:textSize="20dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/fee_title"
app:layout_constraintLeft_toLeftOf="#+id/fee_title" />
<TextView
android:id="#+id/fee_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:clickable="true"
android:ellipsize="end"
android:gravity="top"
android:includeFontPadding="false"
android:maxLines="1"
android:text="0"
android:textSize="80dp"
app:layout_constraintLeft_toRightOf="#+id/fee_unit"
app:layout_constraintTop_toTopOf="#+id/fee_unit" />
<TextView
android:id="#+id/fee_decimal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00"
android:textSize="20dp"
app:layout_constraintTop_toTopOf="#+id/fee_main"
app:layout_constraintLeft_toRightOf="#+id/fee_main"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp" />
</android.support.constraint.ConstraintLayout>