Menu

Showing posts with label ANDROID. Show all posts
Showing posts with label ANDROID. Show all posts

3/22/19

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.






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>













2/17/19

Demo04-Tinh tuổi của bạn.




File String.xml

<resources>
    <string name="app_name">TinhTuoi</string>
    <string name="txttem">TinhTuoi</string>
    <string name="txthoten">Nhap Vao Ho Ten</string>
    <string name="ten">Name</string>
    <string name="namsinh">Nam Sinh</string>
    <string name="year">Year</string>
    <string name="btn">Tinh</string>
</resources>


File design layout:


<?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/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:textSize="30sp"
        android:text="@string/txthoten" />

    <EditText
        android:id="@+id/edtten"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        tools:ignore ="Autofill"
        android:hint="@string/ten"
        android:ems="10"
        android:inputType="textPersonName" />
    <TextView
        android:id="@+id/txtnamsinh"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:textSize="30sp"
        android:text="@string/namsinh" />
    <EditText
        android:id="@+id/edtnamsinh"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        tools:ignore ="Autofill"
        android:hint="@string/year"
        android:ems="10"
        android:inputType="textPersonName" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:textAllCaps="false"
        android:text="@string/btn" />
    <TextView
        android:id="@+id/txtkq"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:textSize="30sp" />

</LinearLayout>

File sourcecode java.



package com.example.demo04;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

import org.w3c.dom.Text;

public class MainActivity extends AppCompatActivity {
    private Button btn;
    private EditText nam;
    private TextView ten,kq;
    private int namsinh;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        ten=(TextView)findViewById(R.id.edtten);
        nam=(EditText)findViewById(R.id.edtnamsinh);
        btn=(Button)findViewById(R.id.button);
        kq=(TextView)findViewById(R.id.txtkq);

        btn.setOnClickListener(new View.OnClickListener(){

            @Override
            public void onClick(View v) {
                namsinh =Integer.parseInt(nam.getText().toString());
                kq.setText(ten.getText().toString()+" "+ String.valueOf(2019-namsinh)+" tuoi");
            }
        });
    }
}

Demo03- Phép tính đơn giản.


Yêu cầu bài toán:
-Nhập vào 2 số nguyên a, và b. Xuất kết quả khi thực hiện phép toán cộng-trừ.


Xây dựng text trong file string.xml.

<resources>
    <string name="app_name">PhepToanDonGian</string>
    <string name="txt1">Nhap So Thu 1</string>
    <string name="txt2">Nhap So Thu 2</string>
    <string name="ex1">ex: 6</string>
    <string name="ex2">ex: 8</string>
    <string name="btn1">Tong</string>
    <string name="btn2">Hieu</string>
    <string name="txtkq">Ket Qua:</string>
</resources>

Thiết kế giao diện file layout.xml

<?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/txtnhapso1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:layout_margin="10dp"
        android:text="@string/txt1" />

    <EditText
        android:id="@+id/editnhapso1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        tools:ignore="Autofill"
        android:hint="@string/ex1"
        android:ems="5"
        android:inputType="number" />
    <TextView
        android:id="@+id/txtnhapso2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:textSize="30sp"
        android:text="@string/txt2" />

    <EditText
        android:id="@+id/editnhapso2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        tools:ignore="Autofill"
        android:hint="@string/ex2"
        android:ems="5"
        android:inputType="number" />

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:layout_margin="10dp"
        android:text="@string/btn1" />
    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:layout_margin="10dp"
        android:text="@string/btn2" />

    <TextView
        android:id="@+id/txtkq"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:layout_margin="10dp"
        android:text="@string/txtkq" />

</LinearLayout>

Code mã nguồn tính toán: source.java


package com.example.demo03;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private Button btn1,btn2;
    EditText so1,so2;
    TextView kq;
    int tong,hieu;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //binding doi tuong
        so1=(EditText)findViewById(R.id.editnhapso1);
        so2=(EditText)findViewById(R.id.editnhapso2);
        kq=(TextView)findViewById(R.id.txtkq);
        btn1=(Button)findViewById(R.id.btn1);
        btn2=(Button)findViewById(R.id.btn2);

        btn1.setOnClickListener(new View.OnClickListener(){

            @Override
            public void onClick(View v) {
                String s1=so1.getText().toString();
                String s2=so2.getText().toString();
                tong=Integer.parseInt(s1)+Integer.parseInt(s2);
                kq.setText("Ket Qua "+tong);

            }
        });
        btn2.setOnClickListener(new View.OnClickListener(){

            @Override
            public void onClick(View v) {
                String s1=so1.getText().toString();
                String s2=so2.getText().toString();
                hieu=Integer.parseInt(s1)-Integer.parseInt(s2);
                kq.setText("Ket Qua "+hieu);

            }
        });

    }
}




































2/14/19

Demo02-Nhập vào tên, nhấn nút xuất câu xin chào.


Yêu cầu Demo02 này,

Ta thiết kế giao diện gồm 1 button, 1 textview hiển thị kết quả, 1 edittext cho người dùng nhập tên.
Khi nhập tên vào và nhấn button, kết quả xin chào bạn ABC.

Viết source cho file string.xml,

File này cho phép ta extract 1 chuỗi dùng cho các view trong layout.



<resources>
    <string name="app_name">Demo2</string>
    <string name="Name">Nhao ten vao day</string>
    <string name="Button">NutNhan</string>
    <string name="TextView">Xuatra</string>
    <string name="Goiy">vd: Hoa</string>

</resources>

Source file Activity_main.xml



<?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">

    <EditText  
        android:id="@+id/edit_ten"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:ignore="Autofill"
        android:hint="@string/Goiy"
        android:layout_margin="50dp"
        android:inputType="textPersonName"
        android:text="@string/Name"/>

    <Button
        android:id="@+id/btn_nutnhan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="50dp"
        android:text="@string/Button"/>

    <TextView
        android:id="@+id/txt_hienthi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="60dp"
        android:text="@string/TextView" />


</LinearLayout>


Source file mã nguồn java MainActivity.java


package com.example.demo2;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity {

 private Button btn;
 private EditText ten;
 private TextView hienthi;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn = (Button) findViewById(R.id.btn_nutnhan);
        ten = (EditText) findViewById(R.id.edit_ten);
        hienthi = (TextView) findViewById(R.id.txt_hienthi);
        btn.setOnClickListener(new View.OnClickListener()
        {

            @Override
            public void onClick(View view) {
                String s = ten.getText().toString();
                hienthi.setText("Xin chao ban " +s);
            }
        });
    } 

Kết quả,


View và ViewGroup trong Layout.

 

 

-View

Các thành phần giao diện thường là một lớp kế thừa từ lớp View (android.view.View) của Android, các thành phần này cung cấp sẵn khá đa dạng như Button, TextView, CheckBox ... tất cả chúng ta gọi nó là View
Trong Android có một loại view có tên là ViewGroup (android.view.ViewGroup) nó có chứa các ViewViewGroup khác bên trong.

Các controls thuộc vào 1 nhóm view.


-ViewGroup

Chứa các ViewViewGroup khác bên trong.

Ví dụ, Linear LayoutViewGroup chứa các controls khác như button, textview, etc. các layouts.

Các controls thuộc dạng ViewGroup trong layout android. 


Hình bên trên,

Ta thấy LinearLayout là viewgroup, còn View là các Textview và Button

Các layout

Các layout chính là các View, được thiết kế với mục đích chứa các View con , sắp xếp vị trí các View con đó trên màn hình.Có một số layout mà bạn tham khảo trước tiên như:

FrameLayout đơn giản chỉ cung cấp một vùng màn hình, thường dùng nó để hiện thị một View con duy nhất. Nếu đặt vào nó nhiều view con, thì mặc định các view con này sẽ xếp chồng lên nhau. Tuy vậy, vị trí các view con trong nó cũng có thể điều chỉnh thông qua giá trị tham số gravity, ví dụ trong view con thiết lập android:layout_gravity="bottom|right" thì view con nằm về phía trái, dưới của FrameLayout

ConstraintLayout (giới thiệu trong Android 7), sử dụng layout này được khuyến khích cho hầu hết trường hợp. ConstraintLayout cho phép điều khiển vị trí và ứng sử của các view con trong layout bằng cách gán dàng buộc đơn giản vảo mỗi view con. Từ đó mà một bố cục phức tạp có thể dễ dàng được tạo ra mà sử dụng ít nhất sự lồng nhau trong layout (layout này nằm trong layout khác) giúp cho cải thiện tốc độ. ConstraintLayout cũng tích hợp sẵn vào Android Studio Layout Editor nên bạn có thể điều chỉnh một cách trực quan các View con trong layout này.

LinearLayout với layout này thì các view con được xếp nối tiếp nhau (linear) thành một hàng hay một cột (tùy vào lúc thiết kế thiết lập hướng xếp). Có một giá trị weight có thể gán vào mỗi View con để cho biết View con đó chiếm bao nhiêu không gian trong một tỷ lệ tương quan với các View con khác.

RelativeLayout chô phép các view con định vị căn vào liên hệ với các view con khác đồng thời liên hệ với view cha thông qua các tham số align và margin. Ví dụ một View con thiết lập nằm ở giữa RelateiveLayout (android:layout_centerInParent="true"), một View con khác có thể thiết lập nằm căn trùng lề phải với View này (android:layout_alignRight="@+id/other")

GridLayout chia ra thành lưới gồm một số hàng và một số cột để chứa các view con.

TableLayout cung cấp khả năng bố trí các view con thành một lưới dạng bảng (gồm có hàng và cột). Một dòng của bảng biểu diễn bàng đối tượng view con TableRow, trong nó chứa có phần tử View con hiểu như các ô bảng.

CoordinatorLayout nó được thiết kế nhằm mục đích có sự tương tác của các View con trong nó, đặc biệt sử dụng với ActionBar, FloatingActionButton, Snackbar ...