I want to set app:layout_constraintHorizontal_bias="0.0" so that my TextView stays towards left. When I set it from layout editor by dragging the tiny circle to 0, the circle moves back to default 50. Also tried doing it from xml, but the layout has no effect on bias attribute at all.
If I remove the right constraint, the text goes offscreen owing to wrap_content width. Adding right constraint (along with existing left constraint) requires me to set horizontal bias to achieve permanent left alignment
This answer suggests to add constraint to "parent" (instead of another view, I guess), I tried it and set left and right constraints to parent but still no luck. (left was constraint to image view)
I tried left aligning it with another view (by selecting notification_subject and notification_body and using "Align Left Edges"), still no change in layout
This is my TextView
<TextView
android:id="#+id/notification_subject_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/notification_subject"
android:textAppearance="#style/TitleTextAppearance"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toRightOf="#id/notification_item_iv"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginRight="16dp"
android:layout_marginLeft="16dp"
app:layout_constraintHorizontal_bias="0.0"/>
Rendered layout in editor:
I think you have two issues here:
You are trying to match the constraint by using layout_width="0dp". I believe this should be set to layout_width="wrap_content".
On one side of your constraints you are using layout_constraintEnd_toEndOf="parent" and then layout_constraintLeft_toRightOf="#id/notification_item_iv" on the opposite side. Please can you change this to layout_constraintStart_toEndOf="#id/notification_item_iv"
Complete code:
<TextView
android:id="#+id/notification_subject_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/notification_subject"
android:textAppearance="#style/TitleTextAppearance"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/notification_item_iv"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginRight="16dp"
android:layout_marginLeft="16dp"
app:layout_constraintHorizontal_bias="0.0"/>
Related
I have some issue with follow structure:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/white_rectangle_radius10">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/first"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
/// many views here
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/second"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/first"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
/// many views here
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/third"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/second"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
/// many views here
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Programatically it can be 3 inner constraints or 4 or 2.
Root Constraint has round border radius.
Programatically when one of inner items clicked I set to this item background color, BUT when its first or last it overlap root border radius.
Note:
No need to suggest cardview as root element (not my option)
"Smart play" with margins/paddings also doesn't suit me because it should be changed programatically.
Is there some option to do it via XML?
When I added background color to first element it's top start/end corners not rounded.
First it is not recommended to nest layouts if you are going to use constraintLayout.
Second is how to design your view smoothly?
one of constraintlayout benefits is using the drag and drop option, therefore, start by doing that and ensure to place every item in its right place (but do not apply any constraint yet).
once all items are on the layout, click any item and look at the tool bar above the mobile screen, there is a magic wound, click on it, the constraint will be generated automatically based on the way you orgnized the view on the screen.
once that is done, now you might need to adjust the margins a bit according to the requirements.
also please assign id to each view before clicking the magic wound.
I hope I was helpful.
I have an element that should remain centered in the layout and a button on the right size. The button width is variable.
The following design exemplify two scenarios.
Scenario 1: Long text button
Scenario 2: Small text button
The current solution is have an invisible duplicated button on the left. This is not ideal because the button look and feel may also vary for different locales. I have tried guidelines but that would require to define a percentage and I would prefer if it was dynamic. Barriers don't seem to work either because I would need them to be mirrored.
Any tips how to achieve this?
Try doing width with 0dp and give them weight and change this in runtime
may be they are in linear layout which is horizontal.
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)
button.getLayoutParams();
params.weight = 1.0f; // afterwards you can do the same with changing the weight
button.setLayoutParams(params);
Perhaps you can take advantage of the ConstraintLayoutStates:
https://riggaroo.co.za/constraintlayout-constraintlayoutstates/
And have two layouts one for each scenario.
I ended up using a different solution. I used two guidelines, one at 20% and another at 80%, to define the areas where the button could expand to.
When no button is available, I used the property app:layout_constrainedWidth="false" that ignores the constrainst and allow the title to expand to the available space.
I used this solution because I may need multiple buttons with different call to actions according to the selected language. It would be difficult to manage multiple hidden anchor buttons.
If I understand your pictures correctly, you want to have two elements on your screen:
A View that's centered on the screen, it can be any width size.
A Button that's positioned to the right of the View that can also be any width size. You want this button to be centered in the empty space between the View and the edge of the right screen.
You can try this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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/view"
android:layout_width="100dp"
android:layout_height="100dp"
android:gravity="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="1"
android:textColor="#FFFFFF"
android:background="#000000"
/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
android:text="2"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I am trying to build an Android UI where I need 7 boxes with the days of the week. In order to do this, I decided to go with a ConstraintLayout in order to be able to auto resize my views on any screen.
I created a chain between all 7 views with the with the "spread_inside" attribute, with worked but since I had my views' widths set to wrap_content, due to the nature of TextViews the views did not have equal widths. So I tried making them have equal widths by setting all of 7 views' widths to 0dp. This works but leaves no space between the views. Is there a way to add some spacing between these 7 views? Or is there another way of achieving the "equal widths" to all 7 views while keeping the auto-resizing ability on any screen? Is this even possible with ConstraintLayout or should I keep using LinearLayout for this kind of things? (as seen in the last screenshot)
I want my views to shrink when the screen is small and to expand up to a level when the screen is big. Please see the screenshots below of how it looks now. I want to add an 8dp padding between each view (on a LinearLayout I achieve this by adding a transparent divider on the layout with 8dp width, as in the last screenshot)
How it should look, achieved using LinearLayout
if you want them to be all the same width you don't even need spread_inside, just set the width to 0dp and then add margins to the views. for example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginRight="4dp"
android:layout_marginLeft="8dp"
android:background="#ffff0000"
app:layout_constraintEnd_toStartOf="#+id/view2"
app:layout_constraintStart_toStartOf="parent"/>
<View
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginRight="8dp"
android:layout_marginLeft="4dp"
android:background="#ff00ff00"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/view1"/>
</android.support.constraint.ConstraintLayout>
keep in mind that space between views will be the sum of 2 margins, first and last view will have only 1 margin space, so you need to set them accordingly (like 4dp for margins between views and 8dp for first and last margin)
I have guideline 60% from top and LinearLayout with bottom constrain to that guideline (so my LinearLayout will 60% of screen). Now Im need to put half of CardView to the bottom of that LinearLayout (screenshot added).
CardView height is wrap_content, cause will be added dynamically so I dont know height and cannot use something like margin bottom -50dp.
Thats what I have:
I need something like that:
I cannot find future like constrain by center. Could you help me, please.
You just need to set the top anchor of cardview to be connected to the bottom anchor of the linear layout (or to the guideline), and do the same for the bottom anchor. With both top and bottom anchors pointing to the same target, the cardview will be centered vertically on that target. Also, you might not need that linearlayout, depending on what you do. Check the chains functionality in ConstraintLayout.
<android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="200dp"
tools:layout_editor_absoluteX="28dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/guideline"
tools:layout_editor_absoluteY="156dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
The eaiest way is to do this in code at runtime. Wait until the height has been calculated, then add a top margin of -.5*height.
I am having a spot of bother with a fairly simple layout. Here it is:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/id1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:ellipsize="end"
android:maxLines="1"/>
<TextView
android:id="#+id/id2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"/>
</LinearLayout>
3 Questions:
How do I center vertical both TextViews (or perhaps better said, the text within those views) within the parent LinearLayout? The left view is vertically centered OK, but the right one (because it has a smaller font) is not. It seems to be centered vertically at the top. I obviously tried playing with layout_gravity of the second view but that makes no difference whatsoever. The only way I can solve it is to wrap the second TextView in a LinearLayout with its layout height parameter set to match_parent (but is this the correct way of doing this?)
Similarly, I want the View on the left horizontally centered on the left, and the View on the right horizontally centered on the right. Currently the right View is placed immediatly next to the left one. The only way I can solve this is by adding something like this inbetween the two text views:
<TextView
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="">
basically acting as a spacer which decreases in size depending on the legth of the text in both TextViews
I want the text in the left View to be truncated if the combined text of the Views does not fit horizontally. No wrapping onto a new line. Currently the text in the left View simply "pushes" the right one out of the parent. No idea how to achieve that (apart from adding android:maxLines="1" to stop the text from wrapping). I have tried android:ellipsize="end" but that does not seem to have any effect.
Best way is to use Relative layout , but still if you want to do the same thing in Linear layout than do some changes in your xml file
-First is set Linear layout hight as match parent :
<LinearLayout android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizonatal">
-Second for making the views visible at centre vertical do
android:layout_gravity="center_vertical"
same property android:layout_gravity = "center_horizontal" , you have to add in second text view also.
It will make your both text view appear at centre vertical but one next to other.
To make the second view appear on right I think you can add
android:layout_marginLeft="xx dp"
put some value in place of xx.
For your third question about truncating your text, you should give some size to your TextView not wrap content..Like android:layout_width ="25dp"
and then use android:ellipsize="end".
I guess you will get that..Actually I am in hurry,time to leave the office.