Phần 1-Project thực tế (Catch the ball-codingwithsara)

Game Catch the ball xây dựng đối tượng đơn giản gồm 3 quả bóng organge, pink, và black.

-Bắt được orange tăng 10 điểm.
-Bắt được pink tăng 30 điểm.
-Bắt trúng black thì game over.

Ok, lets go!

1. Tạo project, đặt tên và chọn nơi save nhé.

2. Chọn chế độ xem sourcecode android, và vào file activity_main.xml để thiết kế giao diện.

3. Chọn decorations cho Layout.

4. Chọn chế độ apptheme là NoActionBar

5. Thêm resource object vào Drawable

6. Copy các object vào thư mục drawable.

-Link tải

7. Thiết kế layout

-Chọn hướng layout theo vertical

android:orientation="vertical"

-Thiết kế label score có chiều rộng match_parent, chiều cao là 50dp, paddingleft là 10dp, text là "Score: 300", size 18sp,:gravity="center_vertical"

      <TextView

        android:id="@+id/scoreLabel"

        android:gravity="center_vertical"

        android:layout_width="match_parent"

        android:layout_height="50dp"

        android:text="Score: 300"

        android:textSize="18sp"

        android:paddingLeft="10dp" />

Tạo 1 dạng viewgroup (FrameLayout-chứa các view con, view đưa vào sau chồng view trước.), với chiều rộng và chiều cao match_parent.

<FrameLayout

        android:id="@+id/frame"

        android:layout_width="match_parent"

        android:layout_height="match_parent">

   </FrameLayout>

Tiếp tục tạo 1 label có tên "Tab to start", với textsize là 30sp, chiều rộng và cao wrap_content, cách view labelscore 180sp, theo hướng center_horizontial

   <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab to start"
            android:textSize="30sp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="180dp" />

Thêm image view 4 đối tượng:

-Box, có width và height=50dp, hướng center_vertial

        <ImageView
            android:id="@+id/box"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/box" />

-Tương tự cho black-60dp, organge-25dp và pink-14dp

 <ImageView
            android:id="@+id/black"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:src="@drawable/black" />

        <ImageView
            android:id="@+id/orange"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:src="@drawable/orange" />

        <ImageView
            android:id="@+id/pink"
            android:layout_width="14dp"
            android:layout_height="14dp"
            android:src="@drawable/pink" />


File layout đã thiết kế xong:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView

        android:id="@+id/scoreLabel"
        android:gravity="center_vertical"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="Score: 300"
        android:textSize="18sp"
        android:paddingLeft="10dp" />

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/startLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab to start"
            android:textSize="30sp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="180dp" />
        <ImageView
            android:id="@+id/box"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/box" />
        <ImageView
            android:id="@+id/black"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:src="@drawable/black" />
        <ImageView
            android:id="@+id/orange"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:src="@drawable/orange" />
        <ImageView
            android:id="@+id/pink"
            android:layout_width="14dp"
            android:layout_height="14dp"
            android:src="@drawable/pink"/>

    </FrameLayout>

</LinearLayout>