Wrap right-aligned view when there is no space












2















I have 2 views in a layout - TextView and Button. TextView is aligned/anchored to the left side and the button is to the right side.



What I'm trying to achieve is the natural "wrap behavior" of the Button. When TextView will be wide enough so that there won't be space for the button (in the same line), it should move below the TextView, while still anchored to the right.



Here are 3 scenarios for the layout which I want to achieve:



mockup





I was trying to make this with FlexBoxLayout, but the button appears on the left side after wrapping.



<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="space_between"
>


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text text"
android:gravity="start"
/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:text="Button"
/>

</com.google.android.flexbox.FlexboxLayout>


So how can I do that? It doesn't need to be FlexBox, I can use any layout, even 3rd party.










share|improve this question





























    2















    I have 2 views in a layout - TextView and Button. TextView is aligned/anchored to the left side and the button is to the right side.



    What I'm trying to achieve is the natural "wrap behavior" of the Button. When TextView will be wide enough so that there won't be space for the button (in the same line), it should move below the TextView, while still anchored to the right.



    Here are 3 scenarios for the layout which I want to achieve:



    mockup





    I was trying to make this with FlexBoxLayout, but the button appears on the left side after wrapping.



    <com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexDirection="row"
    app:flexWrap="wrap"
    app:justifyContent="space_between"
    >


    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="text text"
    android:gravity="start"
    />

    <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="end"
    android:text="Button"
    />

    </com.google.android.flexbox.FlexboxLayout>


    So how can I do that? It doesn't need to be FlexBox, I can use any layout, even 3rd party.










    share|improve this question



























      2












      2








      2








      I have 2 views in a layout - TextView and Button. TextView is aligned/anchored to the left side and the button is to the right side.



      What I'm trying to achieve is the natural "wrap behavior" of the Button. When TextView will be wide enough so that there won't be space for the button (in the same line), it should move below the TextView, while still anchored to the right.



      Here are 3 scenarios for the layout which I want to achieve:



      mockup





      I was trying to make this with FlexBoxLayout, but the button appears on the left side after wrapping.



      <com.google.android.flexbox.FlexboxLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:flexDirection="row"
      app:flexWrap="wrap"
      app:justifyContent="space_between"
      >


      <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="text text"
      android:gravity="start"
      />

      <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="end"
      android:text="Button"
      />

      </com.google.android.flexbox.FlexboxLayout>


      So how can I do that? It doesn't need to be FlexBox, I can use any layout, even 3rd party.










      share|improve this question
















      I have 2 views in a layout - TextView and Button. TextView is aligned/anchored to the left side and the button is to the right side.



      What I'm trying to achieve is the natural "wrap behavior" of the Button. When TextView will be wide enough so that there won't be space for the button (in the same line), it should move below the TextView, while still anchored to the right.



      Here are 3 scenarios for the layout which I want to achieve:



      mockup





      I was trying to make this with FlexBoxLayout, but the button appears on the left side after wrapping.



      <com.google.android.flexbox.FlexboxLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:flexDirection="row"
      app:flexWrap="wrap"
      app:justifyContent="space_between"
      >


      <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="text text"
      android:gravity="start"
      />

      <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="end"
      android:text="Button"
      />

      </com.google.android.flexbox.FlexboxLayout>


      So how can I do that? It doesn't need to be FlexBox, I can use any layout, even 3rd party.







      android android-layout android-constraintlayout android-flexboxlayout






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 27 '18 at 16:16







      Jared Bts.

















      asked Nov 27 '18 at 0:05









      Jared Bts.Jared Bts.

      163




      163
























          2 Answers
          2






          active

          oldest

          votes


















          0














          Doesn't seem like there is a way to do it with Flexbox. I would just do it programmatically when you've inflated the resource (in onCreateView() or something like that). The parent of both of the views would be a RelativeLayout, with the Button aligned to the TextView top when the widths combined don't exceed the width of the RelativeLayout, and aligned to the bottom of the TextView when the widths are larger than that.






          share|improve this answer































            0














            No need for a 3rd party layout.
            ConstraintLayout should be more than enough - with a small tweak in code.



            Your TextView will have straightforward constraints, set to parent layout (start, top, end).



            <?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"
            xmlns:tools="http://schemas.android.com/tools">

            <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="Text text text text text text" />

            <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/text" />
            </android.support.constraint.ConstraintLayout>


            In the code, just check the width of the TextView and compare it with the width of the parent (basically check it should overlap with the button).



            If it does change(you will have to do this in code but this is the principle):



            app:layout_constraintTop_toTopOf="@+id/text"


            to



            app:layout_constraintTop_toBottomOf="@+id/text"


            If you need to do this dynamically ConstraintLayout has neat feature "Keyframe animations" that creates awesome looking animations when you are changing constraints.






            share|improve this answer























              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490914%2fwrap-right-aligned-view-when-there-is-no-space%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              2 Answers
              2






              active

              oldest

              votes








              2 Answers
              2






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              0














              Doesn't seem like there is a way to do it with Flexbox. I would just do it programmatically when you've inflated the resource (in onCreateView() or something like that). The parent of both of the views would be a RelativeLayout, with the Button aligned to the TextView top when the widths combined don't exceed the width of the RelativeLayout, and aligned to the bottom of the TextView when the widths are larger than that.






              share|improve this answer




























                0














                Doesn't seem like there is a way to do it with Flexbox. I would just do it programmatically when you've inflated the resource (in onCreateView() or something like that). The parent of both of the views would be a RelativeLayout, with the Button aligned to the TextView top when the widths combined don't exceed the width of the RelativeLayout, and aligned to the bottom of the TextView when the widths are larger than that.






                share|improve this answer


























                  0












                  0








                  0







                  Doesn't seem like there is a way to do it with Flexbox. I would just do it programmatically when you've inflated the resource (in onCreateView() or something like that). The parent of both of the views would be a RelativeLayout, with the Button aligned to the TextView top when the widths combined don't exceed the width of the RelativeLayout, and aligned to the bottom of the TextView when the widths are larger than that.






                  share|improve this answer













                  Doesn't seem like there is a way to do it with Flexbox. I would just do it programmatically when you've inflated the resource (in onCreateView() or something like that). The parent of both of the views would be a RelativeLayout, with the Button aligned to the TextView top when the widths combined don't exceed the width of the RelativeLayout, and aligned to the bottom of the TextView when the widths are larger than that.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 27 '18 at 23:14









                  urgentxurgentx

                  1,8291223




                  1,8291223

























                      0














                      No need for a 3rd party layout.
                      ConstraintLayout should be more than enough - with a small tweak in code.



                      Your TextView will have straightforward constraints, set to parent layout (start, top, end).



                      <?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"
                      xmlns:tools="http://schemas.android.com/tools">

                      <TextView
                      android:id="@+id/text"
                      android:layout_width="wrap_content"
                      android:layout_height="48dp"
                      android:layout_marginEnd="8dp"
                      android:layout_marginStart="8dp"
                      android:layout_marginTop="8dp"
                      app:layout_constraintEnd_toEndOf="parent"
                      app:layout_constraintHorizontal_bias="0.0"
                      app:layout_constraintStart_toStartOf="parent"
                      app:layout_constraintTop_toTopOf="parent"
                      tools:text="Text text text text text text" />

                      <Button
                      android:id="@+id/button"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_marginEnd="8dp"
                      app:layout_constraintEnd_toEndOf="parent"
                      app:layout_constraintTop_toTopOf="@+id/text" />
                      </android.support.constraint.ConstraintLayout>


                      In the code, just check the width of the TextView and compare it with the width of the parent (basically check it should overlap with the button).



                      If it does change(you will have to do this in code but this is the principle):



                      app:layout_constraintTop_toTopOf="@+id/text"


                      to



                      app:layout_constraintTop_toBottomOf="@+id/text"


                      If you need to do this dynamically ConstraintLayout has neat feature "Keyframe animations" that creates awesome looking animations when you are changing constraints.






                      share|improve this answer




























                        0














                        No need for a 3rd party layout.
                        ConstraintLayout should be more than enough - with a small tweak in code.



                        Your TextView will have straightforward constraints, set to parent layout (start, top, end).



                        <?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"
                        xmlns:tools="http://schemas.android.com/tools">

                        <TextView
                        android:id="@+id/text"
                        android:layout_width="wrap_content"
                        android:layout_height="48dp"
                        android:layout_marginEnd="8dp"
                        android:layout_marginStart="8dp"
                        android:layout_marginTop="8dp"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="0.0"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        tools:text="Text text text text text text" />

                        <Button
                        android:id="@+id/button"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="8dp"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toTopOf="@+id/text" />
                        </android.support.constraint.ConstraintLayout>


                        In the code, just check the width of the TextView and compare it with the width of the parent (basically check it should overlap with the button).



                        If it does change(you will have to do this in code but this is the principle):



                        app:layout_constraintTop_toTopOf="@+id/text"


                        to



                        app:layout_constraintTop_toBottomOf="@+id/text"


                        If you need to do this dynamically ConstraintLayout has neat feature "Keyframe animations" that creates awesome looking animations when you are changing constraints.






                        share|improve this answer


























                          0












                          0








                          0







                          No need for a 3rd party layout.
                          ConstraintLayout should be more than enough - with a small tweak in code.



                          Your TextView will have straightforward constraints, set to parent layout (start, top, end).



                          <?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"
                          xmlns:tools="http://schemas.android.com/tools">

                          <TextView
                          android:id="@+id/text"
                          android:layout_width="wrap_content"
                          android:layout_height="48dp"
                          android:layout_marginEnd="8dp"
                          android:layout_marginStart="8dp"
                          android:layout_marginTop="8dp"
                          app:layout_constraintEnd_toEndOf="parent"
                          app:layout_constraintHorizontal_bias="0.0"
                          app:layout_constraintStart_toStartOf="parent"
                          app:layout_constraintTop_toTopOf="parent"
                          tools:text="Text text text text text text" />

                          <Button
                          android:id="@+id/button"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:layout_marginEnd="8dp"
                          app:layout_constraintEnd_toEndOf="parent"
                          app:layout_constraintTop_toTopOf="@+id/text" />
                          </android.support.constraint.ConstraintLayout>


                          In the code, just check the width of the TextView and compare it with the width of the parent (basically check it should overlap with the button).



                          If it does change(you will have to do this in code but this is the principle):



                          app:layout_constraintTop_toTopOf="@+id/text"


                          to



                          app:layout_constraintTop_toBottomOf="@+id/text"


                          If you need to do this dynamically ConstraintLayout has neat feature "Keyframe animations" that creates awesome looking animations when you are changing constraints.






                          share|improve this answer













                          No need for a 3rd party layout.
                          ConstraintLayout should be more than enough - with a small tweak in code.



                          Your TextView will have straightforward constraints, set to parent layout (start, top, end).



                          <?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"
                          xmlns:tools="http://schemas.android.com/tools">

                          <TextView
                          android:id="@+id/text"
                          android:layout_width="wrap_content"
                          android:layout_height="48dp"
                          android:layout_marginEnd="8dp"
                          android:layout_marginStart="8dp"
                          android:layout_marginTop="8dp"
                          app:layout_constraintEnd_toEndOf="parent"
                          app:layout_constraintHorizontal_bias="0.0"
                          app:layout_constraintStart_toStartOf="parent"
                          app:layout_constraintTop_toTopOf="parent"
                          tools:text="Text text text text text text" />

                          <Button
                          android:id="@+id/button"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:layout_marginEnd="8dp"
                          app:layout_constraintEnd_toEndOf="parent"
                          app:layout_constraintTop_toTopOf="@+id/text" />
                          </android.support.constraint.ConstraintLayout>


                          In the code, just check the width of the TextView and compare it with the width of the parent (basically check it should overlap with the button).



                          If it does change(you will have to do this in code but this is the principle):



                          app:layout_constraintTop_toTopOf="@+id/text"


                          to



                          app:layout_constraintTop_toBottomOf="@+id/text"


                          If you need to do this dynamically ConstraintLayout has neat feature "Keyframe animations" that creates awesome looking animations when you are changing constraints.







                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Nov 28 '18 at 7:51









                          TheLibrarianTheLibrarian

                          93115




                          93115






























                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490914%2fwrap-right-aligned-view-when-there-is-no-space%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

                              Calculate evaluation metrics using cross_val_predict sklearn

                              Insert data from modal to MySQL (multiple modal on website)