Random Gradient Background?

Question

I was wondering how to create a random gradient for the Fun Facts Activity. I was able to get a gradient going using a gradient selector in a gradient.xml under the drawable folder and it displays the gradient correctly.

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <gradient android:angle="90" android:startColor="#FF176D9A" android:endColor="#FF229CDC" android:type="linear" /> </shape> </item> </selector>

...but I can't figure out how to create multiple gradients similar to the array of colors, and then have it pull those instead of the plain colors. Any help would be appreciated! :)

Answer 1 · 2015-04-21T05:07:20Z

April 21, 2015 5:07am

Hello Jeff,

Sorry about the delayed response, I think I have something that will work for you.

So, I added a String[] to the color wheel class, so that portion of the class will look like this:

public class ColorWheel {



    private String mColors[] = {
             "#39add1", // light blue [0]
            "#3079ab", // dark blue [1]
            "#c25975", // mauve [2]
            "#e15258", // red
            "#f9845b", // orange
            "#838cc7", // lavender
            "#7d669e", // purple
            "#53bbb4", // aqua
            "#51b46d", // green
            "#e0ab18", // mustard
            "#637a91", // dark gray
            "#f092b0", // pink
            "#b7c0c7"  // light gray
    };

    private String mColors2[] = {
            "#3079ab", //dark blue  [0]
            "#39add1", // light blue [1]
            "#e0ab18", // mustard [2]
            "#637a91", // dark gray
            "#f092b0", // pink
            "#b7c0c7",  // light gray
            "#c25975", // mauve
            "#51b46d", // green
            "#e15258", // red
            "#f9845b", // orange
            "#838cc7", // lavender
            "#7d669e", // purple
            "#53bbb4", // aqua
    };

So basically the color codes which inhabit each spot (i.e - [0], [1], [2]) will become a gradient with it's counterpart between the two string arrays. So in spot [0] you should have the colors which you would like paired. Currently it is set to "Light blue" in "mColors[]", and "Dark blue" in "mColors2[]".

Now we have to add a new method to get these which will look similar to our getColor method in our ColorWheel class.

    public int[] getGcolors() {
        String color = "";
        String color2 = "";

        Random randomGenerator = new Random();
        int randomNumber = randomGenerator.nextInt(mColors.length);

        color = mColors[randomNumber];
        color2 = mColors2[randomNumber];
        int colorAsInt = Color.parseColor(color);
        int colorAsInt2 = Color.parseColor(color2);

        return new int[] {colorAsInt, colorAsInt2};

Ok, so now we have two colors, from two seperate arrays, but we're using the same "random number" for both. Which is going to be very helpful right away.

In our Main Activity, my onClickListener now looks like this:

 View.OnClickListener listener = new View.OnClickListener() {
            @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
            @Override
            public void onClick(View v) {
                String fact = mFactBook.getFact();

                // update label with dynamic fact
                factLabel.setText(fact);

                int color = mColorWheel.getColor();
                int[] gColors = mColorWheel.getGcolors();

                GradientDrawable gd2 = new GradientDrawable(
                        GradientDrawable.Orientation.TOP_BOTTOM,
                        new int[] {gColors[0], gColors[1]});
                        gd2.setCornerRadius(0f);

                relativeLayout.setBackground(gd2);
                showFactButton.setTextColor(color);
            }
        };

Alright. So now our gradient will be based on the result of two color codes, each pulled from a seperate array, but from the same array number, if that makes sense, haha. You may have to put a little work into which colors go with what, and placing them in the right spots, but this is a good first step I believe.

Let me know if this works for you, Joe

Answer 2 · 2015-04-19T06:01:20Z

April 19, 2015 6:01am

Hello! I thought this was an interesting question so I've been playing around a bit in Android Studio. I'm also using the funFacts activity, so I have the same resources you do at the moment. In my mainActivity I changed my setBackground portion of my onClickListener() to :

        View.OnClickListener listener = new View.OnClickListener() {
            @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
            @Override
            public void onClick(View v) {
                String fact = mFactBook.getFact();

                // update label with dynamic fact
                factLabel.setText(fact);

                int color1 = mColorWheel.getColor();
                int color2 = mColorWheel.getColor();

             GradientDrawable gd = new GradientDrawable(
                        GradientDrawable.Orientation.TOP_BOTTOM,
                        new int[] {color1, color2});
                gd.setCornerRadius(0f);

                relativeLayout.setBackground(gd);

                showFactButton.setTextColor(color2);
            }
        };

This basically creates a new Gradient Drawable using two Random Colors generated from our ColorWheel class. Let me know if it works for you

Also, this is kind of a cool effect, using three colors instead of just two by changing this line:

    new int[] {color1, color2});

to this line:

    new int[] {color1, color2, color1});

Answer 3 · 2015-04-18T23:36:51Z

April 18, 2015 11:36pm

Hello,

I'm not 100% sure if this is what you are looking for, but this posting on stackoverflow might be what you are looking for.

Welcome to the Treehouse Community

Looking to learn something new?

Jeff Janes

Jeff Janes

Random Gradient Background?

3 Answers

Joseph Bogaert

Joseph Bogaert

Jeff Janes

Jeff Janes

Joseph Bogaert

Joseph Bogaert

Harry James

Harry James

Jeff Janes

Jeff Janes

James Simshaw

James Simshaw