Android Development for Beginners(1A)

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 “l(fā)inear 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

The Extensible Markup Language (XML) is a notation for writing a file containing pieces of information called elements. To indicate where an element begins and ends, we write tags. A tag is easy to recognize because it always begins and ends with the characters < and >. A tag also contains the name of the element (i.e. LinearLayout) whose beginning and end it marks.
An element often consists of a pair of tags, plus all the content between them. In this case, the second tag of the pair begins with the characters </ and we say that the second tag closes the first.
An element that does not need to enclose any content can consist of a single tag. In this case, the tag ends with the characters /> and we say that it is a self-closing tag.

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

How to take a screenshot
Android Studio enables you to capture a screenshot or a short video of the device screen while your app is running. Screenshots and videos are useful as promotional materials for your app, and you can also attach them to bug reports that you send to your development team.

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).

Google Material Design

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(調(diào)色板)

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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末樊诺,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子音同,更是在濱河造成了極大的恐慌词爬,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件权均,死亡現(xiàn)場(chǎng)離奇詭異顿膨,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)叽赊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)恋沃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人必指,你說(shuō)我怎么就攤上這事囊咏。” “怎么了取劫?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵匆笤,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我谱邪,道長(zhǎng)炮捧,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任惦银,我火速辦了婚禮咆课,結(jié)果婚禮上末誓,老公的妹妹穿的比我還像新娘。我一直安慰自己书蚪,他們只是感情好喇澡,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著殊校,像睡著了一般晴玖。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上为流,一...
    開(kāi)封第一講書(shū)人閱讀 52,736評(píng)論 1 312
  • 那天呕屎,我揣著相機(jī)與錄音,去河邊找鬼敬察。 笑死秀睛,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的莲祸。 我是一名探鬼主播蹂安,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼锐帜!你這毒婦竟也來(lái)了田盈?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤抹估,失蹤者是張志新(化名)和其女友劉穎缠黍,沒(méi)想到半個(gè)月后弄兜,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體药蜻,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年替饿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了语泽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡视卢,死狀恐怖踱卵,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情据过,我是刑警寧澤惋砂,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站绳锅,受9級(jí)特大地震影響西饵,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜鳞芙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一眷柔、第九天 我趴在偏房一處隱蔽的房頂上張望期虾。 院中可真熱鬧,春花似錦驯嘱、人聲如沸镶苞。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)茂蚓。三九已至,卻和暖如春剃幌,著一層夾襖步出監(jiān)牢的瞬間煌贴,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工锥忿, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留牛郑,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓敬鬓,卻偏偏與公主長(zhǎng)得像淹朋,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子钉答,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • **2014真題Directions:Read the following text. Choose the be...
    又是夜半驚坐起閱讀 9,586評(píng)論 0 23
  • PLEASE READ THE FOLLOWING APPLE DEVELOPER PROGRAM LICENSE...
    念念不忘的閱讀 13,493評(píng)論 5 6
  • 從很久開(kāi)始数尿,她喜歡上自己一個(gè)人走在路上仑性,看著身邊一棵棵挺拔的樹(shù)歷經(jīng)四季變換,從繁茂到凋零右蹦。一棵接著一棵诊杆,似乎穿越了...
    被蚊子暗戀的傲嬌小仙女閱讀 220評(píng)論 1 1
  • “你說(shuō)什么晨汹?你確定你不是在跟我開(kāi)玩笑?”金姐一連拋出了兩個(gè)問(wèn)題贷盲,其實(shí)此時(shí)此刻她更想做的淘这,是罵人察滑,最好罵醒薛淮轰异。 “...
    老街木閱讀 310評(píng)論 0 5
  • 我給你的愛(ài)你會(huì)煩,你給我的愛(ài)我有時(shí)不太懂恋追,你的壓力太大了佳魔,大到我越想努力靠近你曙聂,你越想把我推開(kāi),我知道是自己不夠強(qiáng)...
    王小榆閱讀 103評(píng)論 0 0