Lesson 1A Building Layouts

05 - Views

layout

The layout of an app is the design or arrangement of what the user sees on the screen. This user interface is composed of rectangular areas called Views. Big Views can contain smaller Views, and there is always a biggest View that contains all the others.

Paste_Image.png

User Interface

The user interface of an app is what we see on the screen of the Android device. It consists of one or more rectangular areas called Views, which display information. Some of the Views — the buttons, for example — also respond to a touch.

TextView

A View is a rectangular area on the screen. One type of View is a TextView, which displays one or more lines of text.
A TextView on the screen is drawn by a Java object inside the Android device. In fact, the Java object is the real TextView. But when talking about what the user sees, it’s convenient to refer to the rectangular area on the screen as the “TextView”.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:textSize="24sp"
    android:text="Hello"/>

Paste_Image.png

ImageView

• DESCRIPTION:A View is a rectangular area on the screen. One type of View is anImageView, which displays an image such as an icon or a photograph.
  An ImageView on the screen is drawn by a Java object inside the Android device. In fact, the Java object is the real ImageView. But when talking about what the user sees, it’s convenient to refer to the rectangular area on the screen as the “ImageView”.

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/cake"
    android:scaleType="centerCrop"/>

Paste_Image.png

• center vs centerCrop

  
  
  match_parent centerCrop.PNG
  
  
  match_parent center.PNG
  
  
  wrap_content centerCrop.PNG
  
  
  wrap_content center.PNG

Button

A View is a rectangular area on the screen. One type of View is a Button, which displays a piece of text. When touched, a properly configured Button tells the Android device to execute a method — a list of instructions, like a little program.
A Button on the screen is drawn by a Java object inside the Android device. In fact, the Java object is the real Button. But when talking about what the user sees, it’s convenient to refer to the rectangular area on the screen as the “Button”.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:background="#00FF00"
    android:text="Force stop"
    android:onClick="forceStop"/>

![Upload Paste_Image.png failed. Please try again.]

Camel case

A computer is a machine that follows a list of instructions called a program. An Android device is a computer and an app is a program.
We often name the things inside the device with a two-word phrase such as “linear layout” or “main activity”. But our language Java does not permit a space between the two words of a name. When eliminating the space, we capitalize the second word so we can see where one word ends and the next one begins. This typographic convention is called camel case, and it yields many of the words that give Android programming its distinctive flavor: LinearLayout, MainActivity, onClick.

Paste_Image.png

XML

XML stands for “Extensible Markup Language”. It is a notation for writing information structured as a hierarchy or family tree. Examples include a Roman numeral outline of topics; a corporate organizational chart of divisions and subdivisions; or a listing of states, counties, and cities.
A state can contain many counties, and a county can contain many cities. But each city can be contained in only one county, and each county can be contained in only one state. In XML, we say that each item of data can contain many children, but can be contained in only one parent.
This family-tree structure makes XML ideal for describing the layout of the screen of an Android app, which is composed of rectangular areas calledViews. The layout always consists of one big View which may contain smaller ones, which may in turn contain even smaller ones.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:padding="8dp"
        android:text="Hello"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/mountains"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:background="#3A3A3A"
        android:text="Press me"
        android:onClick="doSomething"/>
</LinearLayout>

Paste_Image.png

12 - XML Syntax

XML Tag

Paste_Image.png

Attributes

The Extensible Markup Language (XML) is a notation for writing a file containing pieces of information called elements. For example, a file describing the layout of the screen might contain elements representing buttons and images. The start of each element is marked with a tag surrounded by the characters < and >. A small element might consist of nothing but this tag.
An element can have smaller pieces of information called attributes written inside of its initial tag. Each attribute consists of a name and a value. For example, a TextView element might have an attribute whose name is “text” and whose value is “Hello”. We write the name of the attribute on the left, the value on the right, and join them with an equal sign. The value is always enclosed in double quotes.

Paste_Image.png

13 - Change the TextView

dp (Density-Independent Pixel)

The screen of an Android device is made of rows and columns of glowing dots called pixels. Devices can range in screen density, which means how many pixels per inch (or dots per inch) are on the screen. For example, an mdpi (or medium density device) has 160 dots per inch, while an xxhdpi (extra extra high density device) has 480 dots per inch.
If we specify the size of views in pixel values, then views would appear very small on the higher density devices, where there are many pixels packed into a small area. If a button is too small, then it would be hard for the user to touch it.
To achieve a consistent physical size of Views, across devices of different screen densities, we use a unit of measure called a density-independent pixel (dp or dip, pronounced “dee pee” or “dip”). 1 dp is equal to 1 pixel on an mdpi device. 1 dp is equal to 3 pixels on an xxhdpi device, and so on for other devices. Per Material design guidelines, any touch target on the screen should be at least 48 dp wide by 48 dp tall. That way, a button in an app on one device will be approximately the same physical size as that button in the same app running on a device with a different screen density.
Android devices will automatically handle the conversion from dp to pixel values, so developers just have to use dp values when specifying measurements in their layouts. For example, dp’s can be used to specify the width and height of a View, shown in the illustration.

Paste_Image.png

14 - Getting Past Errors

Link to the Common Views Cheatsheet

Paste_Image.png

15 - Setting Wrap Content

Hard coding
A computer is a machine that follows a list of instructions called aprogram. An Android device is a computer and an app is a program.
One way to get information into an app is to write it in the instructions of the app:
add 10 + 20
or make the TextView 100dp wideThis is called hardcoding the information into the app.
The TextView in the above instruction is an example of a View, which is a rectangular area on the screen that can display information. A View can be contained in a larger View, called its parent. Assuming that the TextView is contained in a parent whose width is 100dp, we might write the above instruction if we wanted the TextView to occupy the entire width of its parent. One disadvantage of hardcoding the value 100dp into this instruction is that we would have to remember to rewrite it if we ever changed the width of the TextView’s parent.
This is one reason why we avoid writing hardcoded values. There would be less for us to remember to do if we could write an instruction that would tell the TextView to get its width automatically from its parent. Less maintenance means fewer bugs.

Paste_Image.png

<!-- This TextView has its width hardcoded into it. -->
<LinearLayout
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <TextView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Hello"/>
</LinearLayout>

<!-- This TextView gets its width from the parent that contains it. -->
<LinearLayout
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello World"/>
</LinearLayout>

wrap_content

A View is a rectangular area on the screen, usually containing some content. For example, a TextView contains text, an ImageView contains an image, and a special type of View called a ViewGroup contains smaller Views inside of it.
We can specify the width or height of a View as a given distance. Alternatively, we can specify it as the special value wrap_content to shrink-wrap the View around its content. To prevent the View from wrapping itself too tightly, we can also specify a certain amount of padding.

Paste_Image.png

Paste_Image.png

<TextView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="#C0C0C0"
    android:text="Hello"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#C0C0C0"
    android:text="Hello"/>

16 - TextView Text Size

scale-independent pixel(sp)

DESCRIPTION: A scale-independent pixel(sp) is a unit of length for specifying the size of a font of type. Its length depends on the user’s preference for font size, set in the Settings app of the Android device.To respect the user’s preferences, you should specify all font sizes in scale-independent pixels. All other measurements should be given in device-independent pixels(dp’s).

• Material Design typography guidelines
  

Google Material Design

• Android5.0新特性-Material Design
• Material Design for Developers
  Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. To use material design in your Android apps, follow the guidelines described in the material design specification and use the new components and functionality available in Android 5.0 (API level 21).
• Optional challenge: Learn about text appearance from this G+ #AndroidDev #Protip

17 - TextView Text Color

Hexadecimal Colors

Hexadecimal color values are supported in all major browsers.
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF.
For example, the #0000FF value is rendered as blue, because the blue component is set to its highest value (FF) and the others are set to the lowest value (00).

Color palette(调色板)

This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.
The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS. Google suggests using the 500 colors as the primary colors in your app and the other colors as accents colors.

<ImageView
    android:src="@drawable/cake"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="center"/>

18 - Simple ImageView

<ImageView
    <!-- This is saying that the source for this image should be found in this file here.The file name is called cake. We use the at symbol to say that we're referencinga resource in the Android app, and drawable is the resource type.A drawable is like a graphic that will be shown on screen in Android.And again, cake is the file image name. -->
    android:src="@drawable/cake" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    <!-- Now we have the width and height, which are set to be wrapped content. So that the image view is only as big as the cake image inside of it. -->
    <!-- Lastly, we have this attribute called Android:scaledType and it's set to be center. Scale type tells the device how to scale up or scale down, based on the bound of the ImageView. When we say scaleType,it doesn't change the size of the image, it just centers it.So we see that the cake image is actually really big,but this is the center of the cake image.-->
    <!--We can set other values for scaleType, such as centerCrop. This scales down the image to fit the height and width of the view. In this case, we're constrained by the sides of the screen. We also maintain the aspect ratio of the original image so it doesn't get distorted.-->
    android:scaleType="center"/>

When displaying photographs, I like to use center crop. This is because it's typically okay to crop off the edges of the photograph in order to achieve this edge to edge look. When images go edge to edge without any white border or anything, this is what we call a full bleed image.

Paste_Image.png