Home > Mobile >  Aligning three views in Android layout
Aligning three views in Android layout

Time:12-22

I have three views that are intended to look as follows:

 -----  ------------------------- 
|  1  ||                         |
 ----- |           3             |
 ----- |                         |
|  2  ||                         |
 -----  ------------------------- 

So far, so good. However...

Sometimes (3) is very small, and I want it centred in the vertical space used for (1) and (2).

 ----- 
|  1  | ------------------------- 
 ----- |          3              |
 ----- |                         |
|  2  | ------------------------- 
 ----- 

Other times, (3) is large, and I want (1) to align with the top (3), and for (2) to align with the bottom of (3):

 -----  ------------------------- 
|  1  ||                         |
 ----- |                         |
       |           3             |
       |                         |
 ----- |                         |
|  2  ||                         |
 -----  ------------------------- 

I have tried:

  • an outer Relative layout: (1) and (2) overlap in the "small-3" case
  • a linear layout containing (1) and (2) (with and without weights): the alignment at top/bottom does not work in the "big-3".
  • an outer linear layout (with various height settings): I can not get case (2) and (3) to work with the same settings.

To give a little context, (1) and (2) are buttons and (3) is a text block of varying size.

At this point I assume I am missing some very basic setting (or widget) that will make this work as intended.

Note: I have not included source code because there have, literally, been over a dozen different configurations tried and none worked.

CodePudding user response:

Just asking the question helped...pretty sure the answer is to use ConstraintLayout.

CodePudding user response:

Use ConstraintLayout and use the design tab instead of writing the code yourself when using the ConstraintLayout, its pretty easy to achieve what you want. Dont use RelativeLayout or LinearLayout for this.

  • Related