Changing the Background Color for BeginHorizontal

I have a list in which every row is a BeginHorizontal area. Since the list is long I would love to make the alternating color effect between every row so the list gets more readable. Example of what I'm trying to achieve:


Can somebody help out on this problem?

I would like to do everything in code, I think I am suppose to dynamically create GUIStyle, as well as dynamically set GUIStyle.normal.background, after that attach this GUIStyle to BeginHorizontal area, but I can't seem to do this and need some serious help.

 

Yes, that's how you do it. What's the problem you're having? Post your code if you can, it's probably something simple.

 

Ugh ... I forgot to mention the part that I really got stuck on =_=''

So for example, if I want to have a red background in BeginHorizontal, how would I do the "?" of the example code below.

Code (csharp):

1.  
2. GUIStyle gsTest = new GUIStyle();
3. gsTest.normal.background = ?;
4.  
5. for(int i = 0; i < 10; i++) {
6.             GUILayout.BeginHorizontal(gsTest);
7.             GUILayout.Label("Test text");
8.             GUILayout.EndHorizontal();
9. }
10.  

 

Replace '?' with 'Color.red', or 'new Color(1f, 0f, 0f, 1f)'. However, you said you wanted alternating, so:

Code (csharp):

1.  
2. Color[] colors = new Colour[] { Color.red, Color.blue };
3. GUIStyle gsTest = new GUIStyle();
4.  
5. for(int i = 0; i < 10; i++) {
6.             gsTest.normal.background = colors[i % 2];
7.             GUILayout.BeginHorizontal(gsTest);
8.             GUILayout.Label("Test text");
9.             GUILayout.EndHorizontal();
10. }
11.  

 

Looks exactly like something I would like to use, but I get these two errors upon implementation:

error CS0246: The type or namespace name `Colour' could not be found. Are you missing a using directive or an assembly reference?
error CS0029: Cannot implicitly convert type `UnityEngine.Color' to `UnityEngine.Texture2D'

 

Oops; the first error is just that you mis-spelled Color (no 'u'), but the other was my mistake, mis-remembering the GUI API. To change background color, you actually have to set GUI.backgroundColor, not manipulate a GUIStyle. I don't have time to double-check this code in Unity right now, but it should be closer:

Code (csharp):

1.  
2. Color[] colors = new Colour[] { Color.red, Color.blue };
3. for(int i = 0; i < 10; i++) {
4.             GUI.backgroundColor = colors[i % 2];
5.             GUILayout.BeginHorizontal();
6.             GUILayout.Label("Test text");
7.             GUILayout.EndHorizontal();
8. }
9.  

 

Thanks for the reply, but I still can't get it to work.
As a matter a fact, when I change GUI.backgroundColor like you proposed, nothing is happening to the area or labels, except when I create GUI.Button for testing, then the button has red or blue background.

So buttons use GUI.backgroundColor and other elements don't? Weird.

So I tried GUI.color and got all the elements in red or blue color, except the areas, damn ...

Code (csharp):

1. Color[] colors = new Colour[] { Color.red, Color.blue };
2. for(int i = 0; i < 10; i++) {
3.             GUI.color= colors[i % 2];
4.             GUILayout.BeginHorizontal();
5.             GUILayout.Label("Test text");
6.             GUILayout.EndHorizontal();
7. }

I feel I'm closer to the area but not quite there.

 

Solved it a little bit differently but it works, I got alternating color in question list:
With help from andeeee, tnx man.

Code (csharp):

1.  
2. GUIStyle gsAlterQuest = new GUIStyle();
3. gsAlterQuest.normal.background = MakeTex(600, 1, new Color(1.0f, 1.0f, 1.0f, 0.1f));
4.  
5. for(int i = 0; i < 30; i++)
6.         {
7.             if(i%2 == 0)
8.                 GUILayout.BeginHorizontal(gsAlterQuest);
9.             else
10.                 GUILayout.BeginHorizontal();
11.             GUILayout.Label("EPIC WIN!!!");
12.             GUILayout.EndHorizontal();
13.         }
14.  

p.s. C#

Code (csharp):

1.  
2. private Texture2D MakeTex(int width, int height, Color col)
3.     {
4.         Color[] pix = new Color[width*height];
5.  
6.         for(int i = 0; i < pix.Length; i++)
7.             pix[i] = col;
8.  
9.         Texture2D result = new Texture2D(width, height);
10.         result.SetPixels(pix);
11.         result.Apply();
12.  
13.         return result;
14.     }
15.  

Thread referenced: http://forum.unity3d.com/threads/20510-Giving-UnityGUI-elements-a-background-color.?p=430604#post430604

 

you can set the Gui.Color before the horizontal group

and change it back to its original color after that.

Code (CSharp):

1.  
2. Color defaultColor=GUI.color;
3. GUI.color=Color.cyan;
4.  
5.   if(GUILayout.Button("my button")){
6.  
7.                 dosomething();            
8. }
9.  
10.  GUI.color=defaultColor;

 

just popped-in to thank you

Also want to add that 1x1 texel texture will suffice.
so MakeTex(600, 1, new Color(1.0f, 1.0f, 1.0f, 0.1f)) becomes
MakeTex(1, 1, new Color(1.0f, 1.0f, 1.0f, 0.1f));

 

"Like" ;-p

 

(In custom Editor)

Code (CSharp):

1. public override void OnInspectorGUI()
2. {
3. GUI.backgroundColor = Color.green;
4. // Code
5. GUI.backgroundColor = Color.white;
6. }

 

Code (CSharp):

1. Texture2D[] __texture_array = new Texture2D[2]{ new Texture2D(1,1),new Texture2D(1,1) };
2.  
3. __texture_array[0].SetPixel(0,0,Color.grey * 0.05f);
4. __texture_array[0].Apply();
5.  
6. __texture_array[1].SetPixel(0,0,Color.clear);
7. __texture_array[1].Apply();
8.  
9. GUIStyle __style = new GUIStyle();
10.  
11. for(int i = 0; i < {data_array.Length}; i++) {
12.  
13.     __style.normal.background = __texture_array[i % 2];
14.  
15.     GUILayout.BeginHorizontal(__style);
16.     //    content...
17.     GUILayout.EndHorizontal();
18. }

 

Code (CSharp):

1. public static class BackgroundStyle
2. {
3.     private static GUIStyle style = new GUIStyle();
4.     private static Texture2D texture = new Texture2D(1, 1);
5.  
6.  
7.     public static GUIStyle Get(Color color)
8.     {
9.             texture.SetPixel(0, 0, color);
10.             texture.Apply();
11.             style.normal.background = texture;
12.             return style;
13.     }
14. }
15.  
16. EditorGUILayout.BeginVertical(BackgroundStyle.Get(Color.red));

 

Exactly what I was looking for thanks