Discussion Forums  >  Uncategorized

Replies: 25    Views: 3184

cragas
Android Fan
Profile
Posts: 32
Reg: May 04, 2011
gosport
320
05/31/11 10:15 AM (14 years ago)

Changing the background color

Hi Guys, I'm still fairly new to app building and after my first app was deployed successfully onto the android market i am working on my second. I'm currently only developing android apps and have been playing around with code in eclipse. I have worked out how to change menu background colours and menu text but was wondering how to change the entire app background colour from black to say blue? Thanks in advance for your help guys Craig
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
05/31/11 10:45 AM (14 years ago)
Not sure what's happening in Gosport but Alexa says: ' The site is relatively popular among users in the cities of Gosport (where it is ranked #38) and Prince George (#253).' Awesome! Layouts, styles, colors in Android screens, called Activities, are configured in individual Layout files. You can see these layout files in the /res directory in Eclipse. Do this by adding a android:background=#0000ff item to the layout. Or...if you want to do it programmatically, in Java, like after a button is clicked, you can access the layout in code then change it's color. See this for more:http://stackoverflow.com/questions/4761686/how-to-set-background-color-of-activity-to-white-programmatically
 
cragas
Android Fan
Profile
Posts: 32
Reg: May 04, 2011
gosport
320
like
05/31/11 10:54 AM (14 years ago)
38! that is amazing we might have to organize a Gosport meet up! Do you know which layout file it can be found in? Thanks David!
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
05/31/11 11:30 AM (14 years ago)
THe layout file to change the background color depends on the screen type. The home screen in a List Menu, try /res/layout/act_global_list.xml Look for the #000000 entry that is setting the background color to black. Set it to whatever hex you want. Gosport: I'm in!
 
steveh6883
buzztouch Evangelist
Profile
Posts: 383
Reg: May 15, 2011
Gosport, UK
3,830
like
05/31/11 11:55 AM (14 years ago)
#38 haha! prob just me an cragas coding our a**es off! I'm currently working on app #5 & #6 :-) but yeah have to arrange a meet (pub/coffe etc)
 
steveh6883
buzztouch Evangelist
Profile
Posts: 383
Reg: May 15, 2011
Gosport, UK
3,830
like
06/01/11 01:12 AM (14 years ago)
@cragas - drop me an email at [email protected] if you want to meet up for coffee or something :-)
 
cragas
Android Fan
Profile
Posts: 32
Reg: May 04, 2011
gosport
320
like
06/02/11 01:09 AM (14 years ago)
Hi Steve, Have sent you a message on facebook! Craig
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
06/02/11 09:54 PM (14 years ago)
How longs the flight from San Francisco? LOL
 
cragas
Android Fan
Profile
Posts: 32
Reg: May 04, 2011
gosport
320
like
06/05/11 03:56 AM (14 years ago)
Ok David, i have tried what you said still no joy. I have gone through all the layout files and changed everything that said #000000 to another color and on the emulator it stays the same. I have done a fair bit of web development over the years but can't get my head round why it aint working.
 
cragas
Android Fan
Profile
Posts: 32
Reg: May 04, 2011
gosport
320
like
06/05/11 04:12 AM (14 years ago)
I have just noticed something, the bacground behind the scrollable menu has changed color! However i wanted the entire background color to change, for example behind the picture ect. Any ideas? Thanks Craig
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
06/05/11 04:25 AM (14 years ago)
Bummer, something's not adding up, as you figured already. If you've set all the colors in the layout, it's a matter of figuring out what is 'creating' the back color you're seeing. I'm assuming you've figured out how to remove the app from the sim. if you need to make sure it's actually reloading? Remove, re-install is a major pain but Android emulators are, um, a major pain! Always best to use devices to test if you can. Anyway, I'm tyring to figure out the best way to advise, layouts.xml do control all the colors...I just downloaded your Tommy app...changed one thing and loaded it in the simulator...orange background. I changed android:background='#FFFFFF' to android:background='#FFCC66' (double quotes where singles are, damn forum) I did this in: screen_customtext.xml. Near the very top of this file, the background color of the Releative Layout that holds the linear layout, and other things in this layout. Anway, changed one line, re-launched. Now, I select Biography in your app and I see an orange background with black text. I knew the Biorgraphy screen loaded the 'custom text' class so I knew where to change it. What you change depends on the type of screen. Lists for example will probably need lots of changes, the list, the screen it's on, the rows in the list, etc.
 
cragas
Android Fan
Profile
Posts: 32
Reg: May 04, 2011
gosport
320
like
06/05/11 04:43 AM (14 years ago)
Hi David, That's cool, i managed to change the background for custom text, but this doesn't change the background color on the home / main screen when you launch the app. Thanks so much for your help
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
06/05/11 05:43 AM (14 years ago)
Ok, sounds like progress. The home screen is a list on a screen. Not looking so can't remember exactly the layout files. But, I'll bet there is a layout file for the screen, one for the list and one for each row item. Three total. Have a look at those, look for android:background. And, of course, you can always add android:background if it's not being used. Like the list item text, it's white font and the fact that it's white means it must be using #FFFFFF somewhere ;-)
 
cragas
Android Fan
Profile
Posts: 32
Reg: May 04, 2011
gosport
320
like
06/05/11 08:10 AM (14 years ago)
Still no due, i have literally gone through the entire layout folder and changed every single #000000 i have no idea why it's not working. I have also tried running it on my device and it still won't work. I'm close to giving up and putting up with the black background! :)
 
steveh6883
buzztouch Evangelist
Profile
Posts: 383
Reg: May 15, 2011
Gosport, UK
3,830
like
06/05/11 09:26 AM (14 years ago)
I have a feeling that you will probably find the default background colour for ALL screens, apps etc in Android is black with white text, think its somewhere in the Android OS setting, similarly the default background colour for ALL screens, apps etc in iOS is white with black text - don't know if this can be overidden in either OS
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
06/05/11 11:33 PM (14 years ago)
For sure there is a default background color for each device. However, adding views on top of the devices default 'window' allows for creativity, including colors and images. @cragas: I was able to change any screen's background color property. I tinkered a bit with it since the last post. Let's do this. Post a description (color hex values) for what you're trying to do with your homescreen. I'll adjust a layout file here to get it to the color's you want and send you the layout.xml file I adjust. You'll just overwrite the file in your project with the one I send. Should work fine.
 
ianJamesPiano
Code is Art
Profile
Posts: 2661
Reg: Feb 13, 2011
Palm Springs, C...
37,010
like
08/19/11 02:43 AM (14 years ago)
Hi David, wondering of this ever worked out? thanks
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
08/19/11 02:22 PM (14 years ago)
Funny...don't even remember the problem! I think I got it changed by screwing with the list / list item layout files in the .xml Can't remember but my comments appear to suggest that it was easy? Funny.
 
steveh6883
buzztouch Evangelist
Profile
Posts: 383
Reg: May 15, 2011
Gosport, UK
3,830
like
08/19/11 04:45 PM (14 years ago)
Think I found an easy way (courtesy of ritac) res > layouts > [choose particular screen to change] In the GUI of that screen (rather than the xml code screen) select the properties (bottom) slect the graphical part of the screen you want to change then scroll through the properties box for that particular part of the screen Hope that makes sense If not I'll try and find time to do a video (not promising though!)
 
ianJamesPiano
Code is Art
Profile
Posts: 2661
Reg: Feb 13, 2011
Palm Springs, C...
37,010
like
08/20/11 03:28 PM (14 years ago)
Hi @steveh6883 so if I select act_global_list.XML in the res/layout folder I see the actual act_global_list.XML code and I also see next to it Graphical Layout is that the GUI I want? When selected there are no choices for me to make... I am able to change menu list colors by gling imto the .xml files of particular screens..but still not the background of the actual app, no matter what I change it stays black, even after clearing out app from simulator...thanks for any and all help!!
 
steveh6883
buzztouch Evangelist
Profile
Posts: 383
Reg: May 15, 2011
Gosport, UK
3,830
like
08/20/11 04:22 PM (14 years ago)
Yes, thats the GUI. You need to select to view the 'properties' tab via Window > Show View > Other > General > Properties Here is a screenshot to help: http://i54.tinypic.com/108dcbc.jpg Hope that helps Steve
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
08/21/11 02:10 AM (14 years ago)
I've been exploring this and a few other topics while we work out v1.5. a) Add a new .xml file inside the /values folder. Call this new file theme.xml The contents of this file should be: <resources> <color name=custom_background_color>#FFFFFF</color> <style name=Theme.Global parent=android:Theme> <item name=android:windowNoTitle>true</item> <item name=android:windowBackground>@null</item> <item name=android:colorBackground>@color/custom_background_color</item> </style> </resources> b) Open the AndroidManifest.xml file and change the theme in the Applcation node from: @android:style/Theme.NoTitleBar to @style/Theme.Global Should work. Two things to read. One for an overview of how Android Theme's work and another about performance and why @null is used for windowBackground http://brainflush.wordpress.com/2009/03/15/understanding-android-themes-and-styles/ http://android-developers.blogspot.com/2009/03/window-backgrounds-ui-speed.html
 
ianJamesPiano
Code is Art
Profile
Posts: 2661
Reg: Feb 13, 2011
Palm Springs, C...
37,010
like
08/21/11 02:32 AM (14 years ago)
Hi David, just tried a quick implementation with the above code and got these warnings...by the way thanks for the nice comment in another post....cheers!! [2011-08-21 02:14:53 - Act_Home] Warning: AndroidManifest.xml already defines debuggable (in http://schemas.android.com/apk/res/android); using existing value in manifest. [2011-08-21 02:14:53 - Act_Home] /Users/ianjamespiano/Desktop/cabinet android/AndroidManifest.xml:16: error: Error: No resource found that matches the given name (at 'theme' with value '@style/Theme.Global '). edit: in the AndroidManifest.xml file this line had an extra space between the word Global and the quotation mark after it. android:theme=@style/Theme.Global> when i fixed this it compiled in the android simulator...Thought changing the background custom color in the new theme.xml file would show in simulator but not seeing any change? skimmed briefly through the suggested links to read, better go over them again
 
ianJamesPiano
Code is Art
Profile
Posts: 2661
Reg: Feb 13, 2011
Palm Springs, C...
37,010
like
08/21/11 01:22 PM (14 years ago)
Update, So far i've been able to use the Theme.xml to globally change the background color and window color, still trying to figure out Nav Bar color..? edit: for my title bar color i just changed the app_global_title_dark.png to whatever color/image i want and looks great
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
08/22/11 01:43 AM (14 years ago)
The nav bar should also be adjustable in the global_title_dark xml layout file. Have a look at that layout and you'll see all sort of stuff related to the top-bar.
 
ianJamesPiano
Code is Art
Profile
Posts: 2661
Reg: Feb 13, 2011
Palm Springs, C...
37,010
like
08/22/11 01:58 AM (14 years ago)
Ahhh cool, didn't think I could change color of nav bar from that screen. Will look at it further..thanks!
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.