I have layout with ConstraintLayout as parent. Inside my constraint layout there are three views: ImageView and two TextView. I need, depending on whether the visibility of the ImageView and the TextView (1) is visible or not, the margin top of the second TextView changes. This is a visual example of what I want to implement:
I tried using goneMarginTop = 32 for my second TextView. However, in this case, as soon as the visibility of the first TextView is gone, I get margin between ImageView and TextView = 32 dp but expected 12 dp. I need margin = 32 dp only when ImageView and first TextView are gone. Here is my code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="gone"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="14dp"
android:gravity="center"
android:textColor="#color/black"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/ivImage"
app:layout_goneMarginTop="32dp" />
<TextView
app:layout_goneMarginTop="32dp"
android:id="#+id/tvDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="14dp"
android:textColor="#color/black"
android:textSize="17sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvTitle" />
</androidx.constraintlayout.widget.ConstraintLayout>
Is it possible to implement the behavior as in the image using ConstraintLayout from layout (not programmatically).
Please, help me.
I don't think there is a way to do what you ask just with XML and gone margins. You can do it programmatically like it is suggested, but you can also get the spacing you want by using a Barrier and a Space widget. See the comments in the sample XML below. (I added background colors and a visible horizontal marker at 32dp to show the extent of the widgets)
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--
Space is set to the top of the layout with a height of 20dp.
-->
<Space
android:id="#+id/space"
android:layout_width="wrap_content"
android:layout_height="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--
A barrier is set to the bottom of the Space above and the bottom TextView (tvDesc). The
vertical placement of this barrier will vary from the bottom of tvTitle when
tvTitle is visible to 20dp (the bottom of the Space widget) when tvTitle is gone.
-->
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="space,tvTitle" />
<ImageView
android:id="#+id/ivImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_blue_light"
android:visibility="gone"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="14dp"
android:background="#android:color/holo_red_light"
android:gravity="center"
android:textColor="#color/black"
android:textSize="18sp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/ivImage"
app:layout_goneMarginTop="20dp"
tools:visibility="visible" />
<!--
The top constraint of tvDesc is set to the barrier and the top margin is set to 12dp. If
tvTitle and the ImageView are gone, the top margin will still be 12dp. Since the
minimum vertical placement of the barrier is 20dp (the height of the Space widget) the
effective top margin for tvDesc will be 32dp (20dp + 12dp) as desired.
-->
<TextView
android:id="#+id/tvDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="14dp"
android:background="#android:color/holo_green_light"
android:textColor="#color/black"
android:textSize="17sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/barrier"
tools:visibility="visible" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="32dp"
android:background="#android:color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
All views visible:
tvTitle gone
ImageView and tvTitle gone
you can do it programmatically :
val layoutParams = imageView.layoutParams as RelativeLayout.LayoutParams
layoutParams.setMargins(100, 100, 100, 100)
Related
It has been quite some time since I used XML layout for Android. I am struggling with what seems to be very simple thing, yet I cannot find a quick solution.
I have a constraintLayout with an image, title, description and a button:
<?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"
tools:context=".FirstFragment">
<ImageView
android:id="#+id/image_cover"
android:layout_width="200dp"
android:layout_height="300dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_red_dark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="5dp"
android:textColor="#color/black"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_cover"
app:layout_constraintTop_toTopOf="#id/image_cover"
tools:text="Title" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="#id/title"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="#string/some_very_long_text"/>
<Button
android:id="#+id/button"
app:layout_constraintTop_toBottomOf="#id/description"
app:layout_constraintBottom_toBottomOf="#id/image_cover"
app:layout_constraintStart_toStartOf="#id/title"
android:layout_width="wrap_content"
android:padding="0dp"
android:layout_margin="0dp"
android:background="#color/black"
android:text="Button"
android:layout_height="36dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I want to achieve the following result when the description is short:
Description is aligned to bottom of the title and button aligned to bottom of the image
The following result when description is long:
the button is pushed down/aligned to bottom of the description
I tried to create a chain with either packed (and vertical bias) or spread-inside, however I am only able to achieve either result 1 or 2 and not both.
The idea to do it in XML only, not in Java/Kotlin code.
Since you specify that the button is 39dp in height, you can set a Space widget 39dp from the bottom of the description using a bottom margin. Now set a barrier with a direction = bottom to the Space widget and the description. Now the barrier will float between the bottom of the Space widget and the bottom of the description and will alight on whichever is lower.
Now you can set the top of the button to the bottom of the Barrier and the button will float. The XML is below.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<ImageView
android:id="#+id/image_cover"
android:layout_width="200dp"
android:layout_height="300dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_red_dark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="5dp"
android:textColor="#color/black"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_cover"
app:layout_constraintTop_toTopOf="#id/image_cover"
tools:text="Title" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/some_very_long_text"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="#id/title"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="spread_inside" />
<Space
android:id="#+id/space"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="36dp"
android:padding="0dp"
app:layout_constraintBottom_toBottomOf="#id/image_cover"
app:layout_constraintStart_toStartOf="#id/title" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:layout_margin="0dp"
android:background="#color/black"
android:padding="0dp"
android:text="Button"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/barrier" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="description,space" />
</androidx.constraintlayout.widget.ConstraintLayout>
If you don't explicitly know the height of the button, you can create an invisible clone of the button with the same constraints and use the invisible button for the barrier.
Here is another version that also works, but I am not sure why. It doesn't use a Space.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<ImageView
android:id="#+id/image_cover"
android:layout_width="200dp"
android:layout_height="300dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_red_dark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="5dp"
android:text="Title"
android:textColor="#color/black"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_cover"
app:layout_constraintTop_toTopOf="#id/image_cover" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/some_very_long_text1"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="#id/title"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintVertical_bias="0.0"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:layout_margin="0dp"
android:background="#color/black"
android:padding="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#id/barrier"
app:layout_constraintStart_toStartOf="#id/title" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="image_cover,description" />
</androidx.constraintlayout.widget.ConstraintLayout>
Update: I was curious about the last layout above. Although it works, I wouldn't use it and I have come to the conclusion that it is a bug since the barrier is located below the button but should be immediately below either the description or the image cover. I am using "androidx.constraintlayout:constraintlayout:2.1.4".
More: I no longer think that this is a bug but a reasonable resolution to a, seemingly, impossible condition: The barrier is positioned to the bottom of the TextView and ImageView. The button's bottom is constrained to the barrier while the TextView's bottom is constrained to top of the button. If the barrier is positioned immediately below its referenced views then the wrap_content height of the TextView cannot be honored since the button will intrude into the TextView height (For the long text.)
What is pictured above could be a compromise. The barrier is still below its referenced views, although much farther below, and all constraints and layout sizes can be honored.
It's hard to tell if this is intentional or not or if it will continue to be the case going forward. I believe that the Space solution is the better solution.
I want to build a listview whose every item can have different height as per text content length.
Below is the layout of my listview item. When I tried to set lengthy content on title, the bottom textview is getting cropped, however I wanted parent constraint layout to be expanded as per the text.
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"
android:background="#color/background"
android:minHeight="90dp"
android:padding="16dp">
<ImageView
android:id="#+id/iv_notification_thumbnail"
android:layout_width="36dp"
android:layout_height="36dp"
android:src="#drawable/ic_avatar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/tv_notification_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto"
android:text="If the cont"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#id/tv_notification_time"
app:layout_constraintStart_toEndOf="#id/iv_notification_thumbnail"
app:layout_constraintTop_toTopOf="#id/iv_notification_thumbnail" />
<TextView
android:id="#+id/tv_notification_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto"
android:text="#string/value_place_holder"
android:textColor="#color/text_desc"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_notification_title" />
<TextView
android:id="#+id/tv_notification_desc"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="4dp"
android:fontFamily="#font/roboto_medium"
android:text="#string/submit_to_oms"
android:textColor="#color/text_desc"
android:textSize="10sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/tv_notification_title"
app:layout_constraintStart_toStartOf="#id/tv_notification_title"
app:layout_constraintTop_toBottomOf="#id/tv_notification_title"
tools:ignore="SmallSp" />
<ImageButton
android:id="#+id/ib_unread_dot"
android:layout_width="8dp"
android:layout_height="8dp"
android:background="#drawable/shape_circle_orange"
android:clickable="false"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
</androidx.constraintlayout.widget.ConstraintLayout>
0dp makes the view follow the defined constraints as priority, and when there is no left space in the Item, it still follows the constraints, making the bottom of the view at the bottom of the parent and the top on the bottom of the title. There is no space between these two constraints when the title is too big.
Instead of 0dp, change the layout_height to wrap_content and it should wrap it's content:
<TextView
android:id="#+id/tv_notification_desc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/roboto_medium"
android:text="#string/submit_to_oms"
android:textColor="#color/text_desc"
android:textSize="10sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/tv_notification_title"
app:layout_constraintStart_toStartOf="#id/tv_notification_title"
app:layout_constraintTop_toBottomOf="#id/tv_notification_title"
tools:ignore="SmallSp" />
I'm building a timeline that looks like this
The center circle can be moved using horizontal bias, and can be on top of the first or last circle, or anywhere in between.
It's build using a ConstraintLayout, and the the date belonging to the center node is centered below it using start and end of the circle as constraints.
If the center node is moved to the far right, it looks like this
My issue is the fact that the TextView have been moved outside the parent layout. Is it possible to constraint it to the center node as I have, but force it to be 1 line and always within the parent layout?
EDIT
Here's the XML. It seemed like a pretty generic question, so I didn't expect the XML would be needed.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/timeline_layout"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/goal_chart_inner_layout"
app:layout_constraintTop_toTopOf="parent">
<!-- START -->
<TextView
android:textSize="12sp"
android:id="#+id/fast_started_datetime_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/timeline_start_node"
app:layout_constraintStart_toStartOf="#+id/timeline_start_node"
toots:text="STARTED" />
<ImageView
android:layout_marginStart="15dp"
android:id="#+id/timeline_start_node"
android:layout_width="15dp"
android:layout_height="15dp"
android:background="#drawable/circle_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- 1 EDGE -->
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="5dp"
android:layout_marginStart="#dimen/timeline_edge_padding"
android:layout_marginEnd="#dimen/timeline_edge_padding"
android:background="#drawable/circle_background"
app:layout_constraintBottom_toBottomOf="#+id/timeline_start_node"
app:layout_constraintEnd_toStartOf="#id/timeline_split_node"
app:layout_constraintStart_toEndOf="#id/timeline_start_node"
app:layout_constraintTop_toTopOf="#+id/timeline_end_node" />
<!-- SPLIT -->
<ImageView
android:id="#+id/timeline_split_node"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:background="#drawable/circle_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.84"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/fast_goal_datetime_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#+id/timeline_split_node"
app:layout_constraintStart_toStartOf="#+id/timeline_split_node"
app:layout_constraintTop_toBottomOf="#+id/timeline_split_node"
toots:text="GOAL - TEST - LONG" />
<!-- 2 EDGE -->
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_height="5dp"
android:layout_marginStart="#dimen/timeline_edge_padding"
android:layout_marginEnd="#dimen/timeline_edge_padding"
android:background="#drawable/circle_background"
app:layout_constraintBottom_toBottomOf="#+id/timeline_start_node"
app:layout_constraintEnd_toStartOf="#id/timeline_end_node"
app:layout_constraintStart_toEndOf="#id/timeline_split_node"
app:layout_constraintTop_toTopOf="#+id/timeline_end_node" />
<!-- END -->
<TextView
android:textSize="12sp"
android:id="#+id/fast_ended_datetime_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/timeline_end_node"
app:layout_constraintEnd_toEndOf="#+id/timeline_end_node"
toots:text="ENDED" />
<ImageView
android:layout_marginEnd="15dp"
android:id="#+id/timeline_end_node"
android:layout_width="15dp"
android:layout_height="15dp"
android:background="#drawable/circle_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
When you move the circle change the constraints of the textview programmatically to the end of the parent layout instead:
ConstraintSet constraintSet = new ConstraintSet();
constraintSet.connect(R.id.your_textview,ConstraintSet.END,R.id.the_parent_layout,ConstraintSet.END,0);
constraintSet.applyTo(yourConstraintLayout);
check the documentation for more details.
#lukas hansen
If you want to align the TextView to center, you could do something like this:
<TextView
android:textSize="12sp"
android:id="#+id/fast_ended_datetime_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:text="ENDED" />
Note: This will constraint the TextView to parent on both edges.
Also, assign a top_to_bottom_of one of the view above the TextView in the hierarchy.
I want my imageview to stay directly to the right of my textview. I can accomplish this by setting toLeftOf in the attributes for TextView. But for really long text strings, I have ellipses set, and after it reaches the width of the layout, it'll push the ImageView off as well.
I can have the ImageView displayed by setting gravity to 1 for TextView, but then the ImageView is anchored to the right. What should I do?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="left">
<TextView
android:id="#+id/title_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:layout_weight="1"
android:text="MY TEXT TO THE LEFT"
android:layout_toLeftOf="#id/img_button" />
<ImageButton
android:id="#+id/img_button"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="6dp"
android:background="#drawable/some_img"
app:srcCompat="#drawable/ic_edit" />
</LinearLayout>
So w/ setting the weight=1, that hugs the image to the far right, i need it to be dynamic and be to the right of the textview at all times and then when the width of the textview becomes longer than the parent, for the image to not get pushed off screen.
You can use constraintLayout and set your textView width to 0dp (also called match constraint).
The result will cause your textView to drop a line if the is a lot of text.
Here is an example:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/holo_green_light"
android:padding="10dp"
android:text="something"
android:textColor="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="#+id/textView10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="#+id/textView10" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="this is really long text and it wont push the green image because of android:layout_width attribute"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline3"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
And it will look like this :
I set paddingRight to the size of the image button, inside the textview and I used alignRight on my image button.
And changed the container to RelativeLayout. It works as intended!!
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="left">
<TextView
android:id="#+id/title_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:paddingRight="22dp"
android:text="MY TEXT TO THE LEFT"
android:layout_toLeftOf="#id/img_button" />
<ImageButton
android:id="#+id/img_button"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="6dp"
android:layout_alignRight="#+id/title_view"
android:background="#drawable/some_img"
app:srcCompat="#drawable/ic_edit" />
</RelativeLayout>
Use LinearLayout with the orientation="horizontal" attribute . Than set the weight_sum = 100 for the LinearLayout , and than for your TextView and ImageView , just place the weight attribute according to what you want . Hope it helps .
how can I align TextView to end of ImageView that TextView would be centered vertically using ConstraintLayout I managed to align it to the end of ImageView but it's not centered vertically because ImageView is a bit bigger than TextView I know how to do it using RelativeLayout, but wanna use best practices and use only ConstraintLayout
Here is an example how it should look (Cloud icon and text Last Backup)
Just use app:layout_constraintTop_toTopOf and app:layout_constraintBottom_toBottomOf together, and it will cause the TextView center vertical align to the ImageView.
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:text="Last Backup"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
/>
Use drawable left for your TextView like this and change gravity by your root layout as you want
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="15dp"
android:drawableLeft="#drawable/google"
android:text="#string/textGoogle" />
You can do like in using ConstraintLayout:
Set Textview top and bottom constrain to ImageView top and bottom.
These constraints will set TextView in center of ImageView.
<?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.support.v7.widget.AppCompatImageView
android:id="#+id/imageview"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_icon"/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#android:color/white"
android:textSize="14sp"
app:layout_constraintStart_toEndOf="#+id/imageview"
app:layout_constraintBottom_toBottomOf="#+id/imageview"
app:layout_constraintTop_toTopOf="#+id/imageview"/>
</android.support.constraint.ConstraintLayout>
Set parent constrain end top and bottom. These constraints will set center of constrain
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent".
<ImageView
android:id="#+id/ivImg"
android:layout_width="#dimen/dimen_24dp"
android:layout_height="#dimen/dimen_24dp"
android:layout_marginTop="#dimen/dimen_40dp"
android:src="#android:drawable/ic_menu_search"
android:layout_marginEnd="#dimen/dimen_20dp"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintEnd_toStartOf="#+id/txtlbResult"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txtlbResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="#dimen/text14sp"
android:layout_marginTop="#dimen/dimen_40dp"
android:text="#string/your_result_are_here"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/ivImg"
app:layout_constraintTop_toTopOf="parent" />