LinearLayout: prevent last child from getting pushed out or squeezed by large textview before it

Question

I have a LinearLayout with two children inside of it. The first is a TextView with dynamic content, the second one is a button. My problem is that the button gets pushed out of its parent or gets squeezed up to a point where it is no longer visible. I would like the TextView to recognize that there is no more space inside its parents together with the second child, and to start a new line instead of stealing the space needed for the second child. The Button should however be next to the text, and not all the way to the right side of by default.

I have tried lots of different things that didn't work, here in the following code I'm just posting the minimal example that I would like to work, without the different changes I tried already.

So in summary: I would like the TextView to take several lines instead of taking the Button's space. The number of lines should of course be dynamic, depending on the text inside the view. The Button should be directly next to the textview and move to the right as the text gets larger.

Here is a visual representation of what i want:

and here what I get.

setting the maxwidth of the textview is an easy solution, but in more complex and dynamic layouts, you don't always know what the maximum width will be. So it would be nice to have a solution without hard-coded maxWidths.

user_9851608 · Answer

Doing it in Layout

This can be fixed using ConstraintLayout with:

packed horizontal chain
0 horizontal bias.
Enable constraintWidth

Doing it dynamically

If you still need to use LinearLayout, then you can do it programmtically. As you need to wrap_content both the TextView and Button in the same width, so logically this is not achievable because when the sum of widths is greater than the screen width, some view will be greedy on the other.

Therefore you decided to do that wrap_content until the button takes wraps its width without going off the end of the screen.

But now the TextView width shouldn't be wrap_content; instead it should be some fixed size; because if it still wrap_content it'll be greedy on the Button, and kick it off the screen or being squeezed like in your case.

So, we need to do some effort programmatically to know the screen width, so we will limit the TextView to the equation:

TextView_maxWidth =  screenWidth - buttonWidth

Solution 1: Using LinearLayout

If we set the TextView text on the layout, now the button will be squeezed, and we couldn't determine the wrap_content size of the Button programmatically, so in this solution the textView text is set programmatically after we got the Button size.

layout (Nothing fancy):

Behavior:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    LinearLayout root = findViewById(R.id.root);
    
    root.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                root.getViewTreeObserver()
                        .removeOnGlobalLayoutListener(this);
            }
            int width = root.getWidth();
            Button button = findViewById(R.id.button);
            int buttonWidth = button.getWidth();
            int maxTextWidth = width - buttonWidth;

            TextView textView = findViewById(R.id.textView);
            textView.setMaxWidth(maxTextWidth);
            textView.setText("drndesfntzrfndtzmufzksbnsfdn stnbhdsfbns sth st ömcfz,frznz");

        }
    });
}

Solution 2: Using ConstraintLayout

Unlike LinearLayout, ConstraintLayout can force the button size to be wrap_content without being squeezed, and therefore we can set the text of the TextView on layout.

Layout:

Behavior:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ConstraintLayout root = findViewById(R.id.root);
    root.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                root.getViewTreeObserver()
                        .removeOnGlobalLayoutListener(this);
            }
            
            int width = root.getWidth();
            Button button = findViewById(R.id.button);
            int buttonWidth = button.getWidth();
            int maxTextWidth = width - buttonWidth;
            
            TextView textView = findViewById(R.id.textView);
            textView.setMaxWidth(maxTextWidth); 

        }
    });
}

Previews:

user_2827025 · Answer

You can try FlexboxLayout: https://github.com/google/flexbox-layout

app:layout_flexShrink="10000" is what does the correct resizing of the elements.

EDT build.gradle configuration:

allprojects {
  repositories {
    ...
    maven { url "https://maven.google.com" }
  }
}

dependencies {
  ...
  implementation 'com.google.android.flexbox:flexbox:3.0.0'
}

user_16223940 · Answer

You can set the width of the TextView and Button to 0dp and set weigths, like this:

In this example the TextViews width is 3/4s and the Buttons width is 1/4 of the width of the Parent, but you can set this to whatever you want by playing with the weights.

user_11647620 · Answer

Use RelativeLayout for better results

LinearLayout: prevent last child from getting pushed out or squeezed by large textview before it

4 Answers

Doing it in Layout

Doing it dynamically

Previews: