I am using constraintLayout
I wanted one of my view to take height of another view
I wanted my right Textview to take the height of left TextView
My code :
<TextView
android:id="#+id/tv_cal_consumed"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/button_selector_curved"
android:drawableLeft="#drawable/ic_add"
android:drawablePadding="5dp"
android:gravity="start"
android:padding="10dp"
android:text="#string/cal_consumed"
android:textColor="#color/white"
android:textSize="#dimen/text_small"
android:textStyle="normal"
android:typeface="normal"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/tv_cal_burnt"
app:layout_constraintTop_toBottomOf="#+id/con_info" />
<TextView
android:id="#+id/tv_cal_burnt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:background="#drawable/button_selector_curved"
android:drawableLeft="#drawable/ic_add"
android:drawablePadding="5dp"
android:gravity="start"
android:padding="10dp"
android:text="#string/cal_burnt"
android:textColor="#color/white"
android:textSize="#dimen/text_small"
android:textStyle="normal"
android:typeface="normal"
app:layout_constraintTop_toTopOf="#+id/tv_cal_consumed"
app:layout_constraintLeft_toRightOf="#+id/tv_cal_consumed"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/tv_cal_consumed" />
Current output:
Change the layout_height to 0dp (match constraints) for tv_cal_burnt. That will cause the TextView to grow to the same height as the other view. Your top and bottom constraints are already set correctly to make this work. See this.
Using 0dp, which is the equivalent of "MATCH_CONSTRAINT"
<TextView
android:id="#+id/tv_cal_burnt"
android:layout_height="0dp"
...
Update: If you don't know in advance which view will be taller/wider due to localization, etc., I suggest taking a look at this answer to a similar question. The concept outlined in that answer works for heights and widths - just interchange app:layout_constraintWidth_min="wrap" for app:layout_constraintHeight_min="wrap". (As of ConstraintLayout 2.0.4)
Try this following code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/tv_cal_consumed"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#a7a7a7"
android:drawableLeft="#android:drawable/ic_input_add"
android:drawablePadding="5dp"
android:gravity="start"
android:layout_margin="5dp"
app:layout_constraintHorizontal_weight=".1"
android:layout_marginTop="10dp"
android:padding="10dp"
android:text="calorie Consumed"
android:textColor="#color/white"
android:textSize="15sp"
android:textStyle="normal"
android:typeface="normal"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/tv_cal_burnt" />
<TextView
android:id="#+id/tv_cal_burnt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:background="#a7a7a7"
android:layout_marginTop="5dp"
app:layout_constraintHorizontal_weight=".1"
android:drawableLeft="#android:drawable/ic_input_add"
android:drawablePadding="5dp"
android:gravity="start"
android:padding="10dp"
android:text="Calorie Burnt"
android:layout_margin="10dp"
android:textColor="#color/white"
android:textSize="15sp"
android:textStyle="normal"
android:typeface="normal"
app:layout_constraintBottom_toBottomOf="#+id/tv_cal_consumed"
app:layout_constraintLeft_toRightOf="#+id/tv_cal_consumed"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/tv_cal_consumed" />
</android.support.constraint.ConstraintLayout>
if you want to make text as center use android:gravity="center" Instance of this android:gravity="start"
I hope this may help you.
Output here:
Try minimum height of the text view.
android:minLines = "1"
The simplest solution depends on if you feel comfortable making the assumption that the left button is always bigger.
If so, constrain the top of the right button to the top of the left button, and the bottom of the right button to the bottom of the left button ;)
Related
I have four TextView in LinearLayout with orientation="horizontal". Below in image, I want my fourth TextView to vertically center with respect to other views, In simple words, I want to move my fourth TextView a little bit up so it looks like in the center. I tried to add layout:gravity and margins but its not working.
Here is the code:
<LinearLayout
android:id="#+id/tv_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_main_feature_LL"
android:layout_marginStart="10dp"
android:layout_marginBottom="10dp"
android:orientation="horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_food_and_restaurant"
android:padding="3dp"
android:text="Resturant"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_tv_black_24dp"
android:padding="3dp"
android:text="LCD Tv"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_local_parking_black_24dp"
android:padding="3dp"
android:text="Parking"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white"
/>
<TextView
android:id="#+id/tv_plus_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginBottom="20dp"
android:background="#drawable/round_background"
android:text="+15"
android:textColor="#android:color/white" />
</LinearLayout>
You could easily do that by adding android:layout_gravity="center_vertical" and removing your margin bottom.
<TextView
android:id="#+id/tv_plus_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_gravity="center_vertical"
android:background="#drawable/round_background"
android:text="+15"
android:textColor="#android:color/white" />
Add this prop to your #+id/tv_amenities LinearLayout
android:gravity="center_vertical"
Use android:layout_gravity="center_vertical" attribute in your TextView's
I checked your code inside a constraint layout and it's fine.
All I changed is in your last TextView:
android:layout_gravity="center"
Or
android:layout_gravity="center_vertical"
The layout_gravity=center looks the same as
layout_gravity=center_horizontal here because they are in a vertical
linear layout. You can't center vertically in this case, so
layout_gravity=center only centers horizontally.
This link can help you to fix your issue in LinearLayout or RelativeLayout.
You might find this link useful:What is the difference between gravity and layout_gravity in Android?
So here's the code of a simple ConstraintLayout containing two textviews.
Classic Chat Bubble. As I expand the text length of "message_body" Textview everything works as expected until the parent reaches its left border (marginLeft=100dp).
Instead of adding further text to a second line the "message-body" Textview keeps expanding for a while beyond its boundaries and messes up my layout before finally going to next line. How can I fix this it really drives me crazy.
Thanks in advance to this great community!
<?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:id="#+id/myMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginLeft="100dp"
android:layout_marginTop="4dp"
android:layout_marginRight="4dp"
android:background="#drawable/my_message">
<TextView
android:id="#+id/message_body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:elevation="0dp"
android:gravity="left"
android:padding="10dp"
android:text="try make this text than one line"
android:textColor="#fff"
android:textSize="12dp"
app:layout_constraintEnd_toStartOf="#+id/timestamp"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/timestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/message_body"
android:elevation="0dp"
android:padding="5dp"
android:text="10:00"
android:textColor="#fff"
android:textSize="8dp"
app:layout_constraintEnd_toEndOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Screenshots:
short_text
medium_still_good
now it chrashes left and right border
tried your advice but looks like this now
dmitris solution looks like this on my side atm
Your TextView was missing these:
android:layout_width="0dp"
android:textAlignment="textEnd"
.
<TextView
android:id="#+id/message_body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:elevation="0dp"
android:padding="10dp"
android:text="try make this text than one line"
android:textColor="#fff"
android:textSize="12dp"
android:textAlignment="textEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/timestamp" />
The above code should fix your problem, but I would also suggest you fixing all the warnings that Android Studio highlighted for you - add 1 vertical constraint to the TextViews
Try use android:layout_width="0dp" so that the system will apply constraint properly.
I have the following layout:
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<TextView
android:id="#+id/itemKey"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
app:layout_constraintStart_toStartOf="parent"
tools:text="Recipient:"/>
<TextView
android:id="#+id/itemValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toRightOf="#id/itemKey"
tools:text="loooooooooonnnnnnngemmmmmmmmaaaaaaaiiilll#gmail.com"/>
</android.support.constraint.ConstraintLayout>
And this is how it shows up:
It should really be:
What do I need to fix this? I've tried using guidelines and horizontal bias, and also tried constraining it with RelativeLayout instead of a ConstraintLayout, but nothing has helped so far.
You could try setting itemValue width to 0 and use layout_constraintStart_toEndOf instead:
<TextView
android:id="#+id/itemValue"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/itemKey"
tools:text="loooooooooonnnnnnngemmmmmmmmaaaaaaaiiilll#gmail.com"/>
You may need to use android:gravity="right|end" if you intend to align the text to the end.
If you don't care about having the second view's width be wrap_content, you can make some small changes. Make the width 0dp instead of wrap_content and change app:layout_constraintLeft_toRightOf to app:layout_constraintStart_toEndOf (with the same value). This will make the view always be exactly as large as the remaining horizontal space:
If you need wrap_content behavior, then you can do the same as above but additionally add these two attributes:
app:layout_constraintHorizontal_bias="0"
app:layout_constraintWidth_default="wrap"
Here it is all together:
<TextView
android:id="#+id/itemValue"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#id/itemKey"
app:layout_constraintWidth_default="wrap"
tools:text="loooooooooonnnnnnngemmmmmmmmaaaaaaaiiilll#gmail.com" />
This should solve your problem. If you want the text to take the next line you can remove the maxLines=1 condition.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<TextView
android:id="#+id/itemKey"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
app:layout_constraintStart_toStartOf="parent"
tools:text="Recipient:"/>
<TextView
android:id="#+id/itemValue"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/itemKey"
tools:text="loooooooooonnnnnnngemmmmmmmmaaaaaaaiiilll#gmail.com"/>
</android.support.constraint.ConstraintLayout>
I want to center the headline of my page. The headline can look like (1) Dokument1 or (3) GreatDocument. I want to have right and left margins of 60dp and the name of the document has a variable length. When I use wrap_content for #+id/title the centering works well, however the margins don't work for long names of documents. When I use 0dp the margins get respected but the centering doesn't work.
How do I get the packed chain in my ConstraintLayout to center while having a dynamic length and having margins.
<android.support.constraint.ConstraintLayout
android:id="#+id/top_bar_xml"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/open_brackets"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="("
android:gravity="center_vertical"
android:layout_marginStart="60dp"
android:textSize="20sp"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintEnd_toStartOf="#id/page_count"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/page_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:gravity="center_vertical"
android:textSize="20sp"
app:layout_constraintStart_toEndOf="#id/open_brackets"
app:layout_constraintEnd_toStartOf="#id/close_brackets"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/close_brackets"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=") "
android:gravity="center_vertical"
android:textColor="#color/black"
android:textSize="20sp"
app:layout_constraintStart_toEndOf="#id/page_count"
app:layout_constraintEnd_toStartOf="#id/title"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="60dp"
android:text="DocumentTitle"
android:textSize="20sp"
android:gravity="center_vertical"
android:ellipsize="end"
app:layout_constraintStart_toEndOf="#+id/close_brackets"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
(I simplified the example by removing references to ViewModels for page count and title; the document has additional Views below that have a lower margin)
You can set width of #id/title to wrap_content and add
app:layout_constrainedWidth="true"
attribute to it so that the constraints of that TextView are respected when it gets too big to satisfy the margins.
I need to fit 2 TextViews in one line. I tried to use LinearLayout, and now my best approach is to use RelativeLayout.
Here you can see XML for it
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="start"
android:visibility="visible">
<TextView
android:id="#+id/partner_full_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_alignParentLeft="true"
android:textColor="#color/black"
android:maxLines="2"
android:textSize="12sp"
android:layout_toLeftOf="#+id/session_duration"
android:text="#string/dummy_text" />
<TextView
android:id="#+id/session_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:maxLines="1"
android:textSize="12sp"
android:layout_alignParentRight="true"
android:text="asdadsd"
android:textColor="#android:color/darker_gray"
/>
</RelativeLayout>
And the result
As you can see it's fit's okay, but second TextView is on the right side, when I want it to be after first TextView.
When I used LinearLayout I faced problem with size of first TextView (if it have to many text in it, second TextView will go off screen). Another approach with LinearLayout gave me similar results to RelativeLayout with same problem (wrong position of second view)
This happens because you are using wrap_content. If textView1 needs the space of the whole screen, then textView2 will get nothing. Instead you can use layout_weight to always give a View his space.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:gravity="center"
android:visibility="visible"
android:orientation="horizontal">
<TextView
android:id="#+id/partner_full_name"
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:gravity="left"
android:maxLines="2"
android:text="Super Long String"
android:textColor="#color/black"
android:textSize="12sp" />
<TextView
android:id="#+id/session_duration"
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="I will always show"
android:textColor="#android:color/darker_gray"
android:textSize="12sp" />
</LinearLayout>
Remove this line from second TextView :
android:layout_alignParentRight="true"