UI Image Wont Stretch Problem in Unity 5

There’s a common problem that those new to the basic UI system in Unity have when it comes to properly stretching Images or Raw Images across the screen inside the Canvas. This can also happen even with other UI objects like the Panels. While the stretch functionality under Rect Transform in the Inspector is one the absolute greatest things in the UI toolset, it does unfortunately suffer from some un-intuitiveness.

The reason that probably led you here is that you’ve used the stretch mechanism before, perhaps many times before, but for some reason its just not working this time and its driving you crazy, right? Never fear!

I’ll start with a common example which can cause the “stretch” feature to apparently not work. I recently had a toolbar that I had placed at the bottom of the screen that would only stretch perhaps 40% or halfway, but just refused to stretch all the way across.

I had a 1×54 pixel image that I planned to use for the toolbar to stretch across the top of the Canvas screen. I’d already changed the image to texture type “Sprite (2D and UI)“, extrude edges to 0, and had the wrap mode set to Repeat.

Next I had added the UI -> Image to the canvas, set the source image to my 1×54 texture, set the Image Type to Filled. Made sure the Fill Amount was maxed to 1. That’s when I go into Rect Transform in the game object’s inspector, clicked on the stretch box, and chose the bottom stretch option.

Stretch Options  under Inspector Rect Transform in Unity 5
Stretch Options – Basic

However, even with stretch horizontal set, the toolbar just say there at the bottom, in the middle, but only stretching about halfway in both directions. Frustrating.. but it doesn’t have to be.

The issue, is the improper usage of the stretching feature. Its not simply a matter of selecting the basic stretch. You’ll also notice that there are two modes attached to both the shift and alt keys.

These two modes are for setting the pivot and position respectively (as clearly labeled at the top of the drop-down image).

While its not necessary to use the modes all the time, it would behoove you to go ahead and pay attention to them when a stretch isn’t working. In my case, I simply had to continue by holding down the alt key and re-selecting the stretch effect that I was intending to have on the toolbar gameobject. You’ll even notice that when you do start holding down the alt key, that the drop-down actually changes to reflect what the new intended options will cause.

Stretch Set Position under Game Object Inspector in Unity 5
Stretch Options – Holding down Alt key

If you don’t understand exactly what the difference is between setting the stretch pivot and stretch position, that’s not really a big deal. So long as you know to try both methods when you’re having an issue, to rectify whatever problem you’re having with stretching your UI gameobject.

So, once you get the knack for it, most problems can be easily solved without having to go through the hassle of attaching a script. In fact, for any static UI images being stretched on the screen, there should never be a need to use a script to do what you need. If you find yourself doing that, you’re probably doing something wrong.

For dynamic ones, that’s an entirely different story of course, but even for initially displaying a graphic, that should be best left up to the inspector tools.

Leave a Reply