Making a Simple Collapsible Menu for Mobile Devices in Unity

Published in

Antaeus AR

8 min readMar 5, 2024

In previous articles, I have been playing with AR and describing how to place, scale, rotate and translate objects in the real world using your mobile device. So far, I am only able to place one type of object on the screen at a time.

I am going to make a simple collapsible menu for use on mobile devices. I will this menu to pick and choose different objects to place onto the screen. (If you already know the basics of Unity UI, you can skip to the bottom of this article.)

The first step is to create a canvas. Right click in the Hierarchy and then UI-> Canvas.

I set my screen dimensions to 1920 x 1080 Portrait in the Game view. (You can set the dimensions to whatever device you may be building for. The concepts I describe in this article will adapt to the different sizes.)

Once you have your canvas in place, there are a couple of settings to be adjusted. In the Canvas Scaler, set the UI Scale Mode to Scale With Screen Size and the Reference Resolution to whatever size you set your game display to earlier. I’m using a generic 1080 x 1920. Make sure that Screen Match Mode is Match Width or Height and set the Match value to 0.5. (This determines which dimension, X or Y that it uses to scale with. 0.5 sets X and Y to equal weights.) I left Reference Pixels Per Unit at 100.

Now, I’m going to add a button. Select Canvas in the Hierarchy and then right click -> UI -> Button — TextMeshPro. (If you don’t have TextMeshPro installed in your project you will be prompted to do so.)

A button should appear in the middle of your Scene and Game view.

As you can see, it’s pretty small. We can scale the button using the scaling tool or changing the width and height in the Inspector. I went with the initial dimensions of 200 x 100.

I now want to change the anchor point of the button. By default, the button is anchored to the center of the screen. If you need to know the anchor point, the Scene view will show a pinwheel shape to show you the anchor point.

The anchor point determines what area of the screen the button will move relative to if the screen resolution should change. I’m going to move this button to the bottom left corner and anchor it to that corner as well.

In the Inspector, there is an Anchor button that will allow you to change where the button is anchored.

When you press it, you will see a new screen that gives you several anchor point options. (The Unity UI Document give all the details on anchor points. For this article, I’m keeping things simple.) Usually I’ll pick the anchor point closest to the physical position of the UI element.

Using the Move Tool, I drug the button to the bottom-left corner of the screen and then set the anchor point to the bottom-left as well.

You can see in the illustration above that the pinwheel shape is now in the bottom-left corner.

I duplicated my button and renamed them to Button 1 and Button 2. I also changed the text in each appropriately.

As you can see below, both buttons are both in the same position and you can only see one of them. I could manually drag them into position, but instead I’m going to use a Horizontal Layout Group component to do it for me automatically.

Under the Canvas, I created an empty object and named it Bottom Layout Group.

I added a Horizontal Layout Group component to this object.

Finally, I made the two buttons children of this object. My two buttons moved immediately to the center of the screen because that is where the Horizontal Layout Group object is anchored. (Look for the pinwheel.)

I changed the anchor point of the Horizontal Layout Group object to Bottom Stretch. I moved it to the bottom using the Move Tool, changed the Left and Right padding to 0 and set the Child Alignment to Middle Center.

As you can see the buttons are automatically spaced within the layout group. (Notice an anchor pinwheel on each bottom corner.)

For this project, I have already made a primitive cube and primitive sphere Placement Prefab. I’m going to change the text in my buttons to reflect this.

I have an AR Placement Interactable object that controls what is placed on the screen when it is tapped.

Currently, it is set up to place the cube on the screen.

It is very easy to make each button change this to the appropriate value. I’m using Button 1 as an example. Click the + button in the On Click () area. This will add an On Click event to the button.

The object that I wish to change is the AR Placement Interactable, so I drug it into the Object field.

By clicking the Function pulldown, I was able to gain access to various functions on the AR Placement Interactable. I chose ARPlacementInteractable -> GameObject placementPrefab.

This added a new field to the On Click event. This button is going to be used to select the cube prefab, so I drug this prefab into the Game Object field.

The button is now set to change the value of the Placement Prefab in the AR Placement Interactable.

I repeated the same steps for Button 2 and set it to the sphere prefab.

As a final step, I deleted the value of the Placement Prefab in the AR Placement Interactable. This means that no object can be placed on the screen until one of the buttons is pressed.

It is now ready to test. I built the project and installed it on my mobile device.

It works beautifully! When I initially attempted to place an object, nothing happened until I selected the Cube button. I am still able to select, scale, rotate, and translate these objects.

In the title of this article, I promised to make a collapsible menu. Time to work on that.

I added a third button to the layout group and made the text a + sign. I named the new button, Menu Button.

When the app first starts, I want the + button to be the only one showing. When the user presses the + button, it disappears and the Cube and Sphere button appear. When an object is placed in the scene, the Cube and Sphere buttons disappear and the + button returns.

I began by turning the Cube and Sphere buttons off. Then, in the + button, I added three On Click events. One of them turns off the + button and the other two turn on the Cube and Sphere buttons.

The next step is to make the Cube and Sphere buttons disappear and the + button reappear when an object is placed in the scene. The AR Placement Interactable object has an Object Placed event that will do what we need. I created three events in it — turning the + button on and the Cube and Sphere buttons off.