1. Are you ready for the Galaxy S20? Here is everything we know so far!

UX design query

Discussion in 'Android Development' started by Greum, Jul 4, 2019.

  1. Greum

    Greum Well-Known Member
    Thread Starter

    I have a set of 3 radio buttons defined in a single row as follows:

    Code (Text):
    1.     <RadioGroup
    2.         android:id="@+id/radioGroup"
    3.         android:layout_width="wrap_content"
    4.         android:layout_height="wrap_content"
    5.         android:layout_marginStart="16dp"
    6.         android:layout_marginTop="8dp"
    7.         android:layout_marginEnd="16dp"
    8.         android:orientation="horizontal"
    9.         app:layout_constraintEnd_toEndOf="parent"
    10.         app:layout_constraintStart_toStartOf="parent"
    11.         app:layout_constraintTop_toBottomOf="@+id/checkBox2">
    12.  
    13.         <RadioButton
    14.             android:id="@+id/radioButton"
    15.             android:layout_width="wrap_content"
    16.             android:layout_height="wrap_content"
    17.             android:layout_marginStart="0dp"
    18.             android:layout_marginEnd="6dp"
    19.             android:checked="true"
    20.             android:text="@string/single_prop" />
    21.  
    22.         <RadioButton
    23.             android:id="@+id/radioButton2"
    24.             android:layout_width="wrap_content"
    25.             android:layout_height="wrap_content"
    26.             android:layout_marginLeft="6dp"
    27.             android:layout_marginRight="6dp"
    28.             android:text="@string/investor" />
    29.  
    30.         <RadioButton
    31.             android:id="@+id/radioButton3"
    32.             android:layout_width="wrap_content"
    33.             android:layout_height="wrap_content"
    34.             android:layout_marginStart="6dp"
    35.             android:layout_marginEnd="0dp"
    36.             android:text="@string/first_timer" />
    37.  
    38.     </RadioGroup>
    Is it possible to define the buttons so that they are in a single row if there's room or wrapped with 2 on the first line and the third on a second line if there's not room for them all? Or is it a question of designing for the lowest common denominator (smallest device)?
     


  2. Brian Berry

    Brian Berry Well-Known Member

    Learn and use constraint layout particularly percentage helpers
     
    Greum likes this.
  3. Greum

    Greum Well-Known Member
    Thread Starter

    Thanks. I'm using constraint layout. I haven't come across percentage helpers. I'm on the case...
     
  4. Greum

    Greum Well-Known Member
    Thread Starter

    I'm struggling to find anything about percentage helpers, can you perhaps point me in the right direction?
     
  5. Brian Berry

    Brian Berry Well-Known Member

    Right click in the xml/ui editor and choose helpers choose vertical or horizontal helper then a line will appear on the ui Editor screen click on the lines arrow dot until it changes to a percent sign drag the line around to different locations and constrain your ui objects such as a button to the line
     
  6. Greum

    Greum Well-Known Member
    Thread Starter

    Thanks for the tip, Brian. I have played around but I'm not sure how this helps with my problem of showing the radio buttons on 1 line if they fit or two lines if not.

    The thing is in design view they all fit on a single line and all is fine. It is only when I run the app on my real device (a P20 lite) that I see a potential problem. (I've also since tested on a Nexus S AVD and the problem is more pronounced.

    I'm wondering if my problem is solved by programatically changing the constraints if the phone width is too small...

    This is the design window

    Screenshot 2019-07-05 09.24.01.png

    This is in a Nexus S

    Screenshot 2019-07-05 09.24.19.png
     
  7. Brian Berry

    Brian Berry Well-Known Member

    Keep constraint helpers on the back of your mind.Constraint layout is about making the app look almost the same on multiple screens
     
    Greum likes this.
  8. Greum

    Greum Well-Known Member
    Thread Starter

    I'm sold on constraint layout :) I'm clearly not understanding something about constraint helpers...
     
  9. Greum

    Greum Well-Known Member
    Thread Starter

  10. Brian Berry

    Brian Berry Well-Known Member

    Helpers let you fine tune the constraint layout to fit your target screen size setting helpers to percentages will help you fine tune the layout. I suggest you use lots of percentage helpers. When your layout fails use helpers
     
    Greum likes this.
  11. Deleted User

    Deleted User Guest

    Lol! Thought you would be. Isn't it awesome?
     
    #11 Deleted User, Jul 5, 2019
    Last edited by a moderator: Jul 5, 2019
    Greum likes this.
  12. 23tony

    23tony Well-Known Member

    I'm with Brian and LV here, constraint layout has been very useful for me, too. I rarely use anything else at this point.

    A question about constraint helpers: If I'm understanding that article correctly, it's done as a combination of code and XML attributes? I'm thinking I might play around with them a bit.
     
  13. Brian Berry

    Brian Berry Well-Known Member

    Yeah combination of the two..... aspect ratios doesn't get set by the editor for example but setting image aspect ratios is highly useful
     
  14. Greum

    Greum Well-Known Member
    Thread Starter

    I'm quite happy using constraint layouts (although I could do with a larger monitor when dragging constraint handles around! lol)

    In post #5, I'm assuming I should be selecting "add horizontal guideline" not "add horizontal barrier" after choosing helpers from the pop-up menu? Either way, I don't seem to get anything that shows as a % sign to drag around.
     
  15. Brian Berry

    Brian Berry Well-Known Member

    You have to select and click on the guidelines arrow until it turns to a percent sign I think you click it twice
     
  16. Greum

    Greum Well-Known Member
    Thread Starter

    Oh dear! I'm struggling with this. The following is what I see when I've added a guideline (the dotted blue line near the top). I tried clicking on various parts without luck.

    Screenshot 2019-07-08 13.16.18.png

    In an attempt to try something different I added a
    androidx.constraintlayout.helper.widget.Flow manually but that didn't get me anywhere.
     
  17. Brian Berry

    Brian Berry Well-Known Member

    You need to be in design view and click on show all constraints the line is what you need
     
  18. Brian Berry

    Brian Berry Well-Known Member

    That blue line is it click on it at the very beginning of the line
     
    Greum likes this.
  19. Brian Berry

    Brian Berry Well-Known Member

    This is the XML for constraint guidleing using percentages and here is a screen shot on a 21 inch monitor

    Code (Text):
    1.  <android.support.constraint.Guideline
    2.         android:id="@+id/horTotalBetGuide0"
    3.         android:layout_width="wrap_content"
    4.         android:layout_height="wrap_content"
    5.         android:orientation="horizontal"
    6.         app:layout_constraintGuide_percent="0.87" />
     

    Attached Files:

    Greum likes this.
  20. Greum

    Greum Well-Known Member
    Thread Starter

    By jove, I've got it now! Phew. I could certainly do with a larger monitor for this :)

    So now I have my percentage helper guideline, how do I use it to get my 3 radio buttons on 1 or 2 lines as space permits?
     
  21. Brian Berry

    Brian Berry Well-Known Member

    Well the number of buttons you can have in each row is dependent upon the screen size and size of buttons you don't want to try to make the number of buttons position dynamic just make it pretty use the guidelines to set the buttons in good positions. A lot of it is trial and error ona couple of devices
     
    Greum likes this.
  22. Greum

    Greum Well-Known Member
    Thread Starter

    Yes, indeed. However, I can't figure out how I use the guideline to achieve this.
     
  23. Greum

    Greum Well-Known Member
    Thread Starter

    Okay, I have found some explanations and have made a tiny bit of progress. I have created two vertical guidelines and have constrained the RadioGroup to them. However, the RadioButtons still pop outside the constraints and don't wrap.

    This is part of my XML

    Code (Text):
    1.         <RadioGroup
    2.             android:id="@+id/radioGroup"
    3.             android:layout_width="wrap_content"
    4.             android:layout_height="wrap_content"
    5.             android:layout_marginStart="16dp"
    6.             android:layout_marginTop="8dp"
    7.             android:layout_marginEnd="16dp"
    8.             android:orientation="horizontal"
    9.             app:layout_constraintEnd_toEndOf="@+id/guideline3"
    10.             app:layout_constraintStart_toStartOf="@+id/guideline2"
    11.             app:layout_constraintTop_toBottomOf="@+id/checkBox2">
    12.  
    13.             <RadioButton
    14.                 android:id="@+id/radioButton"
    15.                 android:layout_width="wrap_content"
    16.                 android:layout_height="wrap_content"
    17.                 android:layout_marginStart="0dp"
    18.                 android:layout_marginEnd="6dp"
    19.                 android:checked="true"
    20.                 android:text="@string/single_prop" />
    21.  
    22.             <RadioButton
    23.                 android:id="@+id/radioButton2"
    24.                 android:layout_width="wrap_content"
    25.                 android:layout_height="wrap_content"
    26.                 android:layout_marginLeft="6dp"
    27.                 android:layout_marginRight="6dp"
    28.                 android:text="@string/investor" />
    29.  
    30.             <RadioButton
    31.                 android:id="@+id/radioButton3"
    32.                 android:layout_width="wrap_content"
    33.                 android:layout_height="wrap_content"
    34.                 android:layout_marginStart="6dp"
    35.                 android:layout_marginEnd="0dp"
    36.                 android:text="@string/first_timer" />
    37.  
    38.         </RadioGroup>
     
    #23 Greum, Jul 9, 2019
    Last edited: Jul 9, 2019
  24. Greum

    Greum Well-Known Member
    Thread Starter

    Ah well, I have found several places in my layouts where I probably should have been using guidelines. I'm not going to say I have mastered the art of guidelines, but I have added a few of them to my layouts, and I even found a suitable place for a barrier. However, I still don't see how to use them to solve my original problem. Can anyone explain? Thx
     
  25. Brian Berry

    Brian Berry Well-Known Member

    Guidelines won't wrap your buttons but when you view your app on a different device than your target device it will look good. Guidelines and constraint layout is about making your app look consistent on multiple devices
     
Loading...

Share This Page

Loading...