172

Share

GAME DEVELOPMENT

How To Set Content Size Of Scrollview Dynamically In Unity?

  • Home
  • Blogs
  • How To Set Content Size Of Scrollview Dynamically In Unity?

A scroll view includes a scroll react, a mask, and scrollbar components. We use it when the content takes more space and needs to be displayed in a small area.

Agnesh Pipaliya

June 24, 2022

A scroll view is a UI element of Unity that displays the content with a scrollable function. 

It usually comes into use when the content is taking up a lot of space and we have a small area to display it. Hence, we got confused while adding the scroll view with dynamic content size on the Unity platform.

We have created a guide to help you learn the process easily. Take a look.

Steps

To do this, we need scrollview to let’s add a scroll view in the scene. (Create > UI > ScrollView)

 

 

By Default Content Size:

Now click on ScrollView game object, you can see there is one child object name with “Content”, in which we add the items, to show inside the scroll view. By default, the size provided for the content game object is bigger than the body of the scroll view. We are able to change the position and size of the content as per our needs.

 

 

The problem that you are faced with this type of content:

The size of the content is fixed.

If you want to add more items in the content then it does not adjust the size accordingly. So, items that are not inside the content might not display inside the scroll view.

If we want to add content items at run-time and if the items count is dynamic, it does not adjust the size accordingly.

Dynamic Content Size:

If you want to dynamically change the size of your content in a scroll view, just follow the below-mentioned steps:

Add Horizontal Layout Group or Vertical Layout Group component to your content as per your need. It will automatically adjust the position of items inside the content object.

 

 

Here I just add a Horizontal layout Group to set the horizontally dynamic size of my Content.

Add Content size fitter component. Here I am just select the Horizontal Fit as preferred size instead of unconstrained to set my Content size dynamically adjustable with respect to the size of the items added in Content.

Here you can also select or change Vertical Fit as preferred size instead of unconstrained if you need to set content size vertically. You can free to change both options as per your need horizontally, vertically or both.

 

 

The settings are complete. Now, run the scene and add items inside content at run-time to test.

Now, we are able to see that the content size of the scroll view is automatically adjusting (Here in my case Horizontally) its size as per content items.

 

 

 

 

Conclusion

In this blog, we have discussed how you can set your content size in a scroll view dynamically on the Unity platform.

It offers the functionality of scrolling over the content. And it will be helpful for businesses and startups to display more content in a small area dynamically.

 

img

Agnesh Pipaliya

COO of Vasundhara Infotech, a leading Software development company in the USA. His technological interests has helped the company in making useful decisions.

message

Have a project in mind? Drop a message to Bansi Pipaliya & start the discussion!

Get a Newsletter

Sign Up to our newsletter to get latest updates staight in your inbox.

Vasundhara respects your privancy. No Spam!

Get a Newsletter

Sign Up to our newsletter to get latest updates staight in your inbox.

Vasundhara respects your privancy. No Spam!

message

Have a project in mind? Drop a message to Bansi Pipaliya & start the discussion!

Latest 13 Web Development Trends To Expect In 2022
April 11, 2022 Category : company news

Revealing Vasundhara’s New Identity

Read More
Leave a Comment