Changing the background colour in iOS (Xcode), Windows Store apps (Visual Studio) and Android (Eclipse)
There is very little code involved in doing something as simple as changing the background colour of the initial view in iOS, Windows or Android, but there is work involved in knowing the correct classes to use and how to address the view elements.
While it is enlightening to work across three operating systems at once, you must also wrestle with three similar but different sets of logic. And inevitably at times you will miss easier ways of doing things and go the long route.
Displayed here are the shortest routes that I currently know to change the background colour of an initial view in each OS. If you know better, please post a comment.
iOS (Xcode)
When you begin a project in Xcode an initial view controller is created. It has a header file and an accompanying .m file (used for the code itself). In addition, if you have chosen to build a universal file, there will be an iPad and iPhone storyboard containing a visual representation of your initial view controller. The view controller will contain a UIView that can be referenced in code using self.view.If we want to change the background colour of the view then we'd write in our .m file:
-(void)viewDidLoad {
self.view.backgroundColour = [UIColor blueColor];
}
self.view.backgroundColour = [UIColor blueColor];
}
Windows 8 (Visual Studio)
In Windows Store apps, the app opens to a Page. It should be noted first that there is no physical division between public and private elements of the Page as there is with Xcode's .h and .m files. The division exists only between the activity of the app in the App.xaml.cs file (equivalent of the Xcode AppDelegate file) and the Page files.So whereas an iOS view controller often has three files, when we include the visual representation in the Storyboard, a Page is created across two files: a XAML file and a C# file. The XAML provides the static visual layout and the C# provides the accompanying dynamic code.
What we have when we view the XAML is something akin to a single view controller in an Xcode storyboard. We can drag items out from the Toolbox just as we can drag out objects in Xcode and arrange things how we like. But unlike Xcode, the underlying XAML code is by default always visible and we can switch easily between editing the code directly and doing it visually.
The default Page of a basic Windows Store app begins with a Grid (rather than in Xcode a UIView), and we could replicate our simple Xcode example by altering the XAML directly but equally we could've set the background property in the storyboard editor of Xcode.
Instead of the static alternative, therefore, we'll first name the Grid with an x:Name property of x:Name="grid" in the XMAL and then work with the C# code here:
OnNavigatedTo {
grid.Background = new SolidColorBrush(Windows.UI.Colors.Blue);
}
grid.Background = new SolidColorBrush(Windows.UI.Colors.Blue);
}
Android (Eclipse)
Android is slightly different once again in its organisation. There is a single Activity file performing the task of what in iOS would be handled by the AppDelegate and the two files that compose the class files of the initial view controller (or in Windows be handled by App.xmal.cs and MainPage.xaml.cs files).In Android, the Activity file interacts with the XML layout file to be found in the res>layout folder of the app, and a basic Android application is typically born with a RelativeLayout along with a TextView nested inside that reads "Hello World!".
As with Visual Studio we can easily switch between a code and visual layout (or Graphical) view, and in order to first identify the RelativeLayout we build a pointer to it, so that we can manipulate it in the Activity file. This is done by opening the Graphical representation of the res>layout>activity_main.xml file and then clicking on the id value of the Property box that should be visible on the right side of the project window.
In the id box we write @+id/relativeLayout and in the MainActivity.java file (found in src>com.<your_company_name>
RelativeLayout rl = (RelativeLayout) findViewById(R.id.relativeLayout);
rl.setBackgroundColor(Color.BLUE);
So that the onCreate looks like this:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RelativeLayout rl = (RelativeLayout) findViewById(R.id.resourceFrame); rl.setBackgroundColor(Color.BLUE);
}
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RelativeLayout rl = (RelativeLayout) findViewById(R.id.resourceFrame); rl.setBackgroundColor(Color.BLUE);
}
Unlike Windows and iOS, you'll see when you run the app that there is a lag between the app opening and the background turning blue. If you were to require something like this in a real app then Android has Themes that can be chosen and altered. These are applied first and should appear when the app loads.
For example, if you were to take the sample code for the custom theme provided on the Android developer site:
<color name="custom_theme_color">#0000ff</color>
<style name="CustomTheme" parent="android:Theme.Light">
<item name="android:windowBackground">@color/custom_theme_color</item>
<item name="android:colorBackground">@color/custom_theme_color</item> </style>
<style name="CustomTheme" parent="android:Theme.Light">
<item name="android:windowBackground">@color/custom_theme_color</item>
<item name="android:colorBackground">@color/custom_theme_color</item> </style>
and place it within the resources tag of the res>values>styles.xml file, you could then navigate to AndroidManifest.xml, click the Application tab and browse the Theme names to find @style/CustomTheme. Selecting this would set the background colour to whichever one you have defined in the theme.
Note: A list of Theme attributes that can be defined can be found here.
Comments
Post a Comment