【Android Development for Beginners】Lesson 2B : Nested ViewGroups

This Notes is according to the udacity free course :

Android Development for Beginners

Lesson 2B :   

Plan Quantity Picker Layout

Nested ViewGroups (part1, 2)

Choosing the Right XML Layout

Build the Quantity Picker Layout

In this Part, We finished the Lesson 2A and go on to the 2B

We want to rearrange the layouts to a better Views.

We want the view change from left pics to right pics ( below )

And Now We Give you some examples and try to think about how to describe the layouts arrangement.

So In the application layout, there is not only one ViewGroup, it can combine with lots of ViewGroups and build up a Nested ViewGroups.

Now, try your best to do some hierarchy diagrams of these three XML codes with your imagination but not to copy them to your Android studio.

	<LinearLayout 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:orientation="vertical"
	android:paddingBottom="@dimen/activity_vertical_margin"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin"
	tools:context=".MainActivity">
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginBottom="16dp"
	android:text="Quantity"
	android:textAllCaps="true" />
	<LinearLayout
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:orientation="horizontal">
	<Button
	android:layout_width="48dp"
	android:layout_height="48dp"
	android:onClick="decrement"
	android:text="-" />
	<TextView
	android:id="@+id/quantity_text_view"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginLeft="8dp"
	android:layout_marginRight="8dp"
	android:text="2"
	android:textColor="@android:color/black"
	android:textSize="16sp" />
	<Button
	android:layout_width="48dp"
	android:layout_height="48dp"
	android:onClick="increment"
	android:text="+" />
	</LinearLayout>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="16dp"
	android:text="Price"
	android:textAllCaps="true" />
	<TextView
	android:id="@+id/price_text_view"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="16dp"
	android:text="$10"
	android:textColor="@android:color/black"
	android:textSize="16sp" />
	<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="16dp"
	android:onClick="submitOrder"
	android:text="Order" />
	</LinearLayout>

view raw Option A hosted with ❤ by GitHub

	<LinearLayout 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:orientation="horizontal"
	android:paddingBottom="@dimen/activity_vertical_margin"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin"
	tools:context=".MainActivity">
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginBottom="16dp"
	android:text="Quantity"
	android:textAllCaps="true" />
	<LinearLayout
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:orientation="vertical">
	<Button
	android:layout_width="48dp"
	android:layout_height="48dp"
	android:onClick="decrement"
	android:text="-" />
	<TextView
	android:id="@+id/quantity_text_view"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginLeft="8dp"
	android:layout_marginRight="8dp"
	android:text="2"
	android:textColor="@android:color/black"
	android:textSize="16sp" />
	<Button
	android:layout_width="48dp"
	android:layout_height="48dp"
	android:onClick="increment"
	android:text="+" />
	</LinearLayout>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="16dp"
	android:text="Price"
	android:textAllCaps="true" />
	<TextView
	android:id="@+id/price_text_view"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="16dp"
	android:text="$10"
	android:textColor="@android:color/black"
	android:textSize="16sp" />
	<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="16dp"
	android:onClick="submitOrder"
	android:text="Order" />
	</LinearLayout>

view raw Option B hosted with ❤ by GitHub

	<LinearLayout 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:orientation="vertical"
	android:paddingBottom="@dimen/activity_vertical_margin"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin"
	tools:context=".MainActivity">
	<LinearLayout
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:orientation="horizontal">
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginBottom="16dp"
	android:text="Quantity"
	android:textAllCaps="true" />
	<Button
	android:layout_width="48dp"
	android:layout_height="48dp"
	android:onClick="decrement"
	android:text="-" />
	<TextView
	android:id="@+id/quantity_text_view"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginLeft="8dp"
	android:layout_marginRight="8dp"
	android:text="2"
	android:textColor="@android:color/black"
	android:textSize="16sp" />
	<Button
	android:layout_width="48dp"
	android:layout_height="48dp"
	android:onClick="increment"
	android:text="+" />
	</LinearLayout>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="16dp"
	android:text="Price"
	android:textAllCaps="true" />
	<TextView
	android:id="@+id/price_text_view"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="16dp"
	android:text="$10"
	android:textColor="@android:color/black"
	android:textSize="16sp" />
	<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="16dp"
	android:onClick="submitOrder"
	android:text="Order" />
	</LinearLayout>

view raw Option C hosted with ❤ by GitHub

For our layout out plan, which is the best choice for us to build new JustJava app layout.
Ans: A

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout 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:orientation="vertical"
	android:paddingBottom="@dimen/activity_vertical_margin"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin"
	tools:context="com.example.android.justjava.MainActivity">
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginBottom="16dp"
	android:text="Quantity"
	android:textAllCaps="true" />
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="horizontal"
	android:layout_marginBottom="16dp">
	<Button
	android:layout_width="48dp"
	android:layout_height="48dp"
	android:onClick="decrement"
	android:text="-" />
	<TextView
	android:id="@+id/quantity_text_view"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:paddingLeft="8dp"
	android:paddingRight="8dp"
	android:text="1"
	android:textColor="@android:color/black"
	android:textSize="16sp" />
	<Button
	android:layout_width="48dp"
	android:layout_height="48dp"
	android:onClick="increment"
	android:text="+" />
	</LinearLayout>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginBottom="16dp"
	android:text="Price"
	android:textAllCaps="true" />
	<TextView
	android:id="@+id/price_text_view"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginBottom="16dp"
	android:text="$5 "
	android:textColor="@android:color/black"
	android:textSize="16sp" />
	<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:onClick="submitOrder"
	android:text="order" />
	</LinearLayout>

view raw Nested ViewGroups.xml hosted with ❤ by GitHub