Center a view up to a barrier - android

Using Android views, I've stumbled upon a recurring issue and thought it was about time to ask if anyone has a solution.
I have a parent ConstraintLayout, the blue one in the picture.
This layout contains two views: a green view constrained to the left of the parent, and the red view constrained to the center of the parent.
Both red view and green view are text views, and their actual size may vary depending on the language.
My wish is for the red view to always stay centered, so to grow symmetrically left and right until it reaches the green view. At its maximum width, the red view will touch the green view on the left, and there will be empty space on the right of the same width as the width of the green view.
Problem is that I can't find a way using regular XML layouts to do it. I can think of several hacks to do it, but thinking there should be a clean way.
Any idea?

Not sure but just an idea, maybe you can try to add two more barriers. One at the end of the green box at left. And one for it's symmetric. Because you said
and there will be empty space on the right of the same width as the
width of the green view
So with these two barriers you can mark the borders of the red one.
And you can set the constraints of the red to the barriers, and with 0dp width may work. Let us know :)

If you are certain that the width of the red view will not ever need to go to two lines because it runs out of space (maybe it is truncated, marque'd or ellipsised) then you would simply constrain the start and end of the red view to a guideline set in the center of the ConstraintLayout.
However, if you can't guarantee that the red view will never need two lines then you are stuck with a hack. The simplest hack would be to create an invisible view on the right that has the same width as the green view. (It could simply be another TextView with the same text and characteristics.) You would then constrain the start of the red view to the end of the green view and the end to the start of the invisible view.

Related

Position View based on where LinearLayout children touch

I have a layout like this. Colored green is a horizontal LinearLayout, blue is a vertical LinearLayout and black are EditTexts (whose width and height can change). The red line represents where the EditTexts in the blue LinearLayout touch.
What I'm trying to accomplish is align the outer EditTexts so that the red line is always in the vertical center of them. On the image it already looks like that since I set the layout's gravity to center, but my issue occurs when the height of one of the EditTexts in the blue layout is bigger that the other. It should look like this, but in reality it looks like this.
What I'm trying to achieve can be accomplished with ConstraintLayouts by constraining the outer EditText's top to the bottom of the top inner (inner meaning those which used to be in the blue layout) EditText and the bottom to the top of the bottom inner EditText, but then there are other issues
All EditTexts would be in the same layout which messes with the code a lot
You can constrain the end/start to only one other View and so one of the inner EditTexts would overlap the outer one (e.g. if the outer EditText was constrained to the top inner EditText, the bottom inner EditText would overlap the outer one if it were wider than the top one) Demonstration
Every View is created dynamically so using LinearLayouts makes locating each one way easier
How would you approach this issue?
There is no way to use just the XML for the layout you have to center the external EditTexts to the red line. ConstraintLayout is the way to go but, if that is not desirable, then you can apply translation to the external EditTexts. The idea is that you would measure the vertical location of the red line and the top position of each EditText. You would then apply enough translation in the Y direction to place the EditTexts where you want them
Se setTranslationY() and getY().

Android: Placing a TextView centered around a specified position in XML

I have a TextView that can have a few different values, and is updated runtime (in Java code).
However, I need this TextView to retain its center point, so that when the text in that TextView is updated, it is always center justified. It should be centered around a point which is not the center of the screen or anything else, so setting gravity only will not help.
As the values that it may contain are already defined, I could try with the longest one first, position it to the correct top left position and set its gravity to center. In this case every shorter in length text should fit correctly.
However, I would like to know if there is better approach, for cases when the values are not known beforehand.
This TextView is placed below an ImageView and it could take the whole screen width (nothing else is placed left or right to it).
Note: I guess it could be also possible to position it every time to a new X axis position, whenever the text is changed, but I don't think it is a nice solution at all.
Set the android:layout_width to match_parent and set android:gravity to center_horizontal.
This way the View is stretched all the way horizontally, and the content (the text) will be centered. If the content changes, it will still be centered.
One thing that many people don't realize is the difference between android:gravity and android:layout_gravity. The first one defines the alignment of the content inside itself, the other one defines alignment of itself relative to its parent.

Android ellipse overflow priority

I have 2 textviews per horizontal linearlayout row on two rows. All the views are set as 0dp width and weight 1. They all have the same font and text size etc.
The views on the left side are gravity aligned left and the two on the right are gravity aligned right.
When both textviews text length overflow android always gives precedence to the textview on the right and ellipse the views on the left.
Is there a method that can be used to control which view ellipses when both views on the same row would not fit.
Ideally I want the views on the right to ellipse in favor of those on the left. Or failing that make them ellipse evenly per row.
thanks
i don't think there is a feature of order of the views to manage how they are measured.
you can customize the linearLayout by extending it in order to support this feature , but this is too hardcore for this task .
i would suggest putting the problematic views (those that take too much space and you don't with them to take too much space) into a new layout , and set its width to match_parent .
this way , it should take the rest of the space at the end of the measurements of the other views ,

Set negative margin on ImageView shifts ImageView but not Image

I Need to shift an ImageView, which is a direct child of a LinearLayout, a bit to the left.
What happens: The View is shifted (can see the "bounding box" is shifted, with android layout manager) but the drawable keeps in the same place.
Also the drawable is cut on the right side, if I set margin low enough.
Why is this? Any advice?
Clarification: I have to shift the Image to the left. That means a bit ouside of the bounds of the containing layout.
It seems elements are always clipped when they get outside of parent's bounds (also with clipChildren=false).
A solution is to create an additional container-layout for everything besides of the item to be shifted. And then shift the container-layout in the opposite direction.
For example, to shift -10dip:
<Original container ...>
<Item to be shifted/>
<New container with margin 10dip>
<Previous content of Original container ... />
</New container with margin 10dip>
</Original container>
If your container have enough padding you can set its clipToPadding to false and use negative margin!
Why are you using negative margin? use a positive a bit more to the opposite side of the ImageView to the direction you want to shift the image, i.e. if you want to shift the image to the left, use more positive margin to the right.

Android padding problem

:) I'm having the following problem: I have a view and i want to add borders to it. What I'm currently trying to do is to set padding to the view (padding from all the sides) and set background color to it which will fill the padding. The thing is that it seems to me that it's possible to set padding either only from top and left or from bottom and right but not from all of them together. I.e if i write
view.setPadding(border,border,border,border)
this will set padding only from top and left. In order to set padding from bottom and right I have to write:
view.setPadding(-border,-border,0,0)
which won't leave left and top padding and so on. If I try to use margin it moves the whole block(the view + the padding area), but not only the view, so this doesn't seem to work either. Any ideas on how to do it without having to use a wrapping layout? Thanks!
What exactly happens when you use the first example?
The four int parameters for setPadding() are for left, top, right, and bottom, respectively. So, calling setPadding(4, 5, 6, 7) should give you 4 pixels of space for the left edge, 5 for the top, 6 for the right, and 7 for the bottom. What result are you getting when you do this? Can you show a screenshot?
What is the content of your view? If it's an image or something similar, perhaps it's not being centered or scaled properly. Try calling setGravity(CENTER);.

Categories

Resources