Building an Android App

Building Layout Part 1

UI (User Interface) : the whole layout of the app

1. VIEWS

- rectangle on an app

ex) picture, button...etc.

- it always has to be in camel case, meaning no spaces and the  first letter always capitalized

Parts consisting views are;

1. TextView : text

2. ImageView : pictures

3. Button

2. IDE(Integrated Design Environment) - Android Studio in our case!

- XML(eXtensible Markup Language) : 

way to describe how your android app's gonna look 

- XML Syntax:

syntax means rules that make valid/invalid xml

example of XML; 

<TextView
android:text = "Hello world"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

*wrap_content: adjusts the width of the text view to perfectly fit the contents inside it!

- Attributes:
width/height/background/text
-> describes how the 'textview' is gonna look
-> should be put in quotation("")

- <TextView> has default values
-> if you are okay with default values, you don't have to set attributes
-> you have to use precise names/symbols or not there will be errors!
     ex)TextView CANNOT BE TxtView, Textview, text view... etc.

3. Density-independent pixels(DP)

medium resolution device < high resolution device < extra-high resolution device
same physical device for 2 dp by 2dp but different no. of pixels are used in different resolution device!
*dp: density independent pixels

*TIP:
Make touch targets 48dp at least! Otherwise it's gonna be really small.

4. Typography/ Color

- SP(screen pixels) to declare font size
ex) android:textSie = "45sp"

* Useful URL to typography:
https://material.google.com/style/typography.html#
* color: https://material.google.com/style/color.html#

- XML: How to change the color of the background & the content
<TextView
    android:text="wait wait today is your birthday?"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#B71C1C"
    android:background="#FFCDD2"
    android:textSize="45sp"
/>

ImageView
<ImageView
    android:src="@drawable/rocks"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
/>

android:scaleType="centerCrop"
-> gets the image to fully fill the screen
-> good tool to make the immersive looking screen

URL to Android Developers:
https://developer.android.com/index.html