Use colors in Android Studio In this exercise, you’ll modify the Tip Calculator
ID: 3591765 • Letter: U
Question
Use colors in Android Studio
In this exercise, you’ll modify the Tip Calculator app presented so it uses
custom colors.
3. Open the layout for the app in the graphical editor. This layout should use the colors
from Android’s built-in themes.
4. Modify the styles.xml file so the theme named AppTheme sets the windowBackground
attribute of the theme to the custom color named background.
5. View the layout in the graphical editor. The background color for the window should
now be light green.
6. Modify the styles.xml file so the theme named AppTheme sets the attributes named
textColorPrimary and textColorSecondary to the custom color named white.
7. View the layout in the graphical editor. The text color for the TextView and TextEdit
widgets should now be white, but the text color for the Buttons should still be black.
8. Modify the styles.xml file so the style named TextView.Label sets the textColor
attribute to the color named black.
9. View the layout in the Graphical Layout editor. The text color for the labels should
now be black
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp" >
<!-- The bill amount -->
<TextView
android:id="@+id/billAmountLabel"
style="@style/TextView.Label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/bill_amount_label" />
<EditText
android:id="@+id/billAmountEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/billAmountLabel"
android:layout_marginLeft="5dp"
android:layout_toRightOf="@+id/billAmountLabel"
android:ems="8"
android:inputType="numberDecimal"
android:text="@string/bill_amount" >
<requestFocus />
</EditText>
<!-- The tip percent -->
<TextView
android:id="@+id/percentLabel"
style="@style/TextView.Label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/billAmountLabel"
android:layout_below="@+id/billAmountLabel"
android:text="@string/tip_percent_label" />
<TextView
android:id="@+id/percentTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/percentLabel"
android:layout_alignLeft="@+id/billAmountEditText"
android:padding="5dp"
android:text="@string/tip_percent" />
<Button
android:id="@+id/percentDownButton"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignBaseline="@+id/percentTextView"
android:layout_marginLeft="25dp"
android:layout_toRightOf="@+id/percentTextView"
android:text="@string/decrease" />
<Button
android:id="@+id/percentUpButton"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignBaseline="@+id/percentDownButton"
android:layout_toRightOf="@+id/percentDownButton"
android:text="@string/increase" />
<!-- the tip amount -->
<TextView
android:id="@+id/tipLabel"
style="@style/TextView.Label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/percentLabel"
android:layout_below="@+id/percentLabel"
android:text="@string/tip_amount_label" />
<TextView
android:id="@+id/tipTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/tipLabel"
android:layout_alignLeft="@id/billAmountEditText"
android:padding="5dp"
android:text="@string/tip_amount" />
<!-- the total -->
<TextView
android:id="@+id/totalLabel"
style="@style/TextView.Label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/tipLabel"
android:layout_below="@+id/tipLabel"
android:text="@string/total_amount_label" />
<TextView
android:id="@+id/totalTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/totalLabel"
android:layout_alignLeft="@+id/tipTextView"
android:padding="5dp"
android:text="@string/total_amount" />
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary">#141315</color>
<color name="secondary">#736C6B</color>
<color name="tertiary">#DDE0CE</color>
<color name="background">#A6D39D</color>
<color name="dark">#000000</color>
<color name="light">#FFFFFF</color>
</resources>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- Theme customizations NOT specific to a particular API -->
<!-- Set new styles for three widgets in the theme -->
<item name="android:textViewStyle">@style/TextView</item>
<item name="android:editTextStyle">@style/EditText</item>
<item name="android:buttonStyle">@style/Button</item>
</style>
<!-- These styles are applied automatically -->
<style name="TextView"
parent="@android:style/Widget.TextView">
<item name="android:textSize">20sp</item>
</style>
<style name="EditText" parent="@android:style/Widget.EditText">
<item name="android:textSize">20sp</item>
</style>
<style name="Button" parent="@android:style/Widget.Button">
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
</style>
<!-- This style needs to be applied manually -->
<style name="TextView.Label">
<item name="android:textStyle">bold</item>
<item name="android:padding">10dp</item>
</style>
</resources>
Java code is
package com.murach.tipcalculator;
import java.text.NumberFormat;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.inputmethod.EditorInfo;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.TextView.OnEditorActionListener;
import android.app.Activity;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
public class TipCalculatorActivity extends Activity
implements OnEditorActionListener, OnClickListener {
// define variables for the widgets
private EditText billAmountEditText;
private TextView percentTextView;
private Button percentUpButton;
private Button percentDownButton;
private TextView tipTextView;
private TextView totalTextView;
// define the SharedPreferences object
private SharedPreferences savedValues;
// define instance variables that should be saved
private String billAmountString = "";
private float tipPercent = .15f;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tip_calculator);
// get references to the widgets
billAmountEditText = (EditText) findViewById(R.id.billAmountEditText);
percentTextView = (TextView) findViewById(R.id.percentTextView);
percentUpButton = (Button) findViewById(R.id.percentUpButton);
percentDownButton = (Button) findViewById(R.id.percentDownButton);
tipTextView = (TextView) findViewById(R.id.tipTextView);
totalTextView = (TextView) findViewById(R.id.totalTextView);
// set the listeners
billAmountEditText.setOnEditorActionListener(this);
percentUpButton.setOnClickListener(this);
percentDownButton.setOnClickListener(this);
// get SharedPreferences object
savedValues = getSharedPreferences("SavedValues", MODE_PRIVATE);
}
@Override
public void onPause() {
// save the instance variables
Editor editor = savedValues.edit();
editor.putString("billAmountString", billAmountString);
editor.putFloat("tipPercent", tipPercent);
editor.commit();
super.onPause();
}
@Override
public void onResume() {
super.onResume();
// get the instance variables
billAmountString = savedValues.getString("billAmountString", "");
tipPercent = savedValues.getFloat("tipPercent", 0.15f);
// set the bill amount on its widget
billAmountEditText.setText(billAmountString);
// calculate and display
calculateAndDisplay();
}
public void calculateAndDisplay() {
// get the bill amount
billAmountString = billAmountEditText.getText().toString();
float billAmount;
if (billAmountString.equals("")) {
billAmount = 0;
}
else {
billAmount = Float.parseFloat(billAmountString);
}
// calculate tip and total
float tipAmount = billAmount * tipPercent;
float totalAmount = billAmount + tipAmount;
// display the other results with formatting
NumberFormat currency = NumberFormat.getCurrencyInstance();
tipTextView.setText(currency.format(tipAmount));
totalTextView.setText(currency.format(totalAmount));
NumberFormat percent = NumberFormat.getPercentInstance();
percentTextView.setText(percent.format(tipPercent));
}
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
if (actionId == EditorInfo.IME_ACTION_DONE ||
actionId == EditorInfo.IME_ACTION_UNSPECIFIED) {
calculateAndDisplay();
}
return false;
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.percentDownButton:
tipPercent = tipPercent - .01f;
calculateAndDisplay();
break;
case R.id.percentUpButton:
tipPercent = tipPercent + .01f;
calculateAndDisplay();
break;
}
}
}
Explanation / Answer
-> Custom colors black and white were mentioned in the question but were not present in colors.xml , both the colors have been added in the colors.xml file. (light and dark can be removed) :
-> All the other changes done in the styles.xml :
For sub-part 4 :
<item name="android:windowBackground">@color/background</item>
For sub-part 6 :
For sub-part 8 :
-> File colors.xml :
-> File styles.xml :
<resources xmlns:android="http://schemas.android.com/apk/res/android">
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.