Let's make our calculator look nice! By the end of this lab we will create and apply styles to all of our buttons. We'll also create a style for the display.
First, create a file called
res/values/. This is where all of our styles and themes live in the application.
If you analyze the design, you'll notice that the buttons are basically variations on a theme. The only variants in the style are different colors and some buttons are wider than others. Since these buttons are so similar, it makes sense to create a basic style that each button type will inherit.
Let's add this base button style to
<style name="BaseButton"> <item name="android:layout_width">@dimen/button_dimensions</item> <item name="android:layout_height">@dimen/button_dimensions</item> <item name="android:layout_margin">@dimen/button_margin</item> <item name="android:textSize">@dimen/key_text_size</item> <item name="android:textColor">@android:color/white</item> </style>
Here we've specified the height and widths of the view, the margin between the buttons, the color of the text, and the size of the font. All but the last use abstracted
dimen's. We'll add these in the next section. For the final item (text color), we use an Android supplied color instead of creating our own.
Now it's time to start using dimensions!
Start by creating the
dimens.xml file in
res/values/. Then add the base line values for the view. We'll add different versions of this file in a later lab to scale to different screen sizes.
<resources> <dimen name="button_margin">5dp</dimen> <dimen name="button_dimensions">60dp</dimen> <dimen name="key_text_size">30sp</dimen> </resources>
Now that we have
BaseButton and all the dimensions needed to make it a reality, let's use it to create our
You can inherit attributes from parent styles and add your own configurations for the newly derived style.
<!--Number--> <style name="Number" parent="BaseButton"> <item name="android:background">@color/brown</item> </style>
For now we'll set the background to a flat color. In a later lab we'll extend this style to provide visual feedback upon user interaction.
Note: You can also inherit from multiple styles: http://developer.android.com/guide/topics/ui/themes.html#Inheritance
Let's add colors to
colors.xml for the new buttons. The
brown is shown below:
Another benefit of creating styles is that it will clean up our XML files. Remove any attribute that is covered by the style. Here's the updated 1 key:
<!--1--> <Button android:id="@+id/key1" android:text="@string/key1" style="@style/Number"/>
Much cleaner! I move as much as possible to styles to keep my XML files lean. I generally leave attributes the source XML file that relate to positioning in the view (e.g.
RelativeLayout positioning), text for a button or text view, and the id.
Using the information above, create and use styles for each of these key types. When you finish, the view should look like the screenshot.
Finally, clean up the display view in
display.xml using a style.