UX design query

[Greum]

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

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/checkBox2">

        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="0dp"
            android:layout_marginEnd="6dp"
            android:checked="true"
            android:text="@string/single_prop" />

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="6dp"
            android:layout_marginRight="6dp"
            android:text="@string/investor" />

        <RadioButton
            android:id="@+id/radioButton3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="6dp"
            android:layout_marginEnd="0dp"
            android:text="@string/first_timer" />

    </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)?

 

[Brian Berry]

Learn and use constraint layout particularly percentage helpers

 

[Greum]

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

 

[Greum]

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

 

[Brian Berry]

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

 

[Greum]

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

This is in a Nexus S

 

[Brian Berry]

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

 

[Greum]

I'm sold on constraint layout I'm clearly not understanding something about constraint helpers...

 

[Greum]

Okay, so I have found the following article https://www.polidea.com/blog/android-constraintlayout-the-guide-to-constrainthelpers and think I might just see a pin-prick of light at the end of the tunnel.

 

[Brian Berry]

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

 

[Deleted User]

I'm sold on constraint layout

Lol! Thought you would be. Isn't it awesome?

 

[23tony]

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.

 

[Brian Berry]

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

 

[Greum]

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.

 

[Brian Berry]

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

 

[Greum]

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.

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

 

[Brian Berry]

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

 

[Brian Berry]

That blue line is it click on it at the very beginning of the line

 

[Brian Berry]

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

 <android.support.constraint.Guideline
        android:id="@+id/horTotalBetGuide0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.87" />

 

[Greum]

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?

 

[Brian Berry]

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]

Well the number of buttons you can have in each row is dependent upon the screen size and size of buttons

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

 

[Greum]

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

        <RadioGroup
            android:id="@+id/radioGroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="16dp"
            android:orientation="horizontal"
            app:layout_constraintEnd_toEndOf="@+id/guideline3"
            app:layout_constraintStart_toStartOf="@+id/guideline2"
            app:layout_constraintTop_toBottomOf="@+id/checkBox2">

            <RadioButton
                android:id="@+id/radioButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="0dp"
                android:layout_marginEnd="6dp"
                android:checked="true"
                android:text="@string/single_prop" />

            <RadioButton
                android:id="@+id/radioButton2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="6dp"
                android:layout_marginRight="6dp"
                android:text="@string/investor" />

            <RadioButton
                android:id="@+id/radioButton3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="6dp"
                android:layout_marginEnd="0dp"
                android:text="@string/first_timer" />

        </RadioGroup>

 

[Greum]

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

 

[Brian Berry]

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