Tip Calculator GUI

  1. Create a project with “Empty Layout”
  2. Change the default RelativeLayout to GridLayout (in the Text tab – below the Palette)

2a. In the Properties Window,

columnCount 2

useDefaultMargin

  1. Create from Palette Text Field: Number drop it into row 0 column 0

3a. In the Properties Window,

layout:widthmatch_parent

layout:heightwrap_content

layout:column0

layout:columnSpan2

idamountEditText

textSize[…] Create resource (name: Large, value:40dp)

  1. Create Medium Text TextView (overlaying previous amountEditText)

4a. In the Properties Window,

layout:widthmatch_parent

layout:heightwrap_content

layout:column0

layout:columnSpan2

layout:row0

layout:gravity

fillhorizontal

hint[…] Create resource (name: enter_amount,

value: Enter Amount)

idamountTextView

textSize[…] Create resource (name: Large, value:40dp)

background […] Create color resource (name: amount_background, value:#BBDEFB)

padding

all […] Create resource (name: textview_padding, value:

12dp)

elevation […] Create resource (name: elevation, value: 4dp)

  1. Create Medium Text TextView

5a. In the Properties Window,

layout:widthmatch_parent

layout:heightwrap_content

layout:column0

layout:columnSpan1

layout:row1

layout:gravity

centervertical

idpercentTextView

text[…] Create resource (name: tip_percentage, value: 15%)

  1. Create SeekBar

6a. In the Properties Window,

layout:widthfill_parent

layout:height[…] Select Resource, Project, Large

layout:column1

layout:columnSpan1

layout:row1

layout:gravity

fillhorizontal

idpercentSeekBar

max30

progress15

  1. Create Medium Text TextView

7a. In the Properties Window,

layout:widthwrap_content

layout:heightwrap_content

layout:column0

layout:columnSpan1

layout:row2

idtipLabelTextView

text[…] Create resource (name: tip, value: Tip)

  1. Create Medium Text TextView

8a. In the Properties Window,

layout:widthwrap_content

layout:heightwrap_content

layout:column1

layout:columnSpan1

layout:row2

idtipTextView

  1. Create Medium Text TextView

9a. In the Properties Window,

layout:widthwrap_content

layout:heightwrap_content

layout:column0

layout:columnSpan1

layout:row3

idtotalLabelTextView

text[…] Create resource (name: total, value: Total)

  1. Create Medium Text TextView

10a. In the Properties Window,

layout:widthwrap_content

layout:heightwrap_content

layout:column1

layout:columnSpan1

layout:row3

layout:gravity

fillhorizontal

idtotalTextView

  1. In Component Tree (top right corner), select percentTextView, (holding down Ctrl button), tipLabelTextView and totalLabelTextView. Expand

layout: gravity

right

  1. In Component Tree, select amountEditText

12a. In Properties Window,

digit0123456789

maxLength6

  1. In Component Tree, select tipTextView (holding Ctrl) and totalTextView

13a. In Properties Window,

layout:gravity

fillhorizontal

background[…]Create color resource (name: result_background,

value: #FFE0B2)

elevation […] Select Project, elevation (already created)

gravity

center

padding

all […] Select Project, textview_padding (already created)

textMedium Text

  1. Changing Theme Colors
  1. Open styles.xml in upper right corner click Open Editor
  2. Select colorPrimary in dialog click “Material Blue 500” color swatch and OK.
  3. Select colorPrimaryDark in dialog click “Material Blue 700” color swatch and OK.
  4. Select colorAccent in dialog click “Orange Accent 400” color swatch and OK.