Toggle Theme Editor
Slate Blueberry Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Charcoal

Custom Toast trong Android

Discussion in 'Hướng dẫn lập trình Android' started by kim, 13/10/12.

  1. kim

    kim Thành viên VIP Staff Member

    [​IMG]

    Ý tưởng thì mình lấy từ tấm hình trên, chẳng biết có phải ăn cắp bản quyền không nữa, thôi cứ credit lại cho chắc (http://codecanyon.net/item/android-custom-toast/926057)

    Khi làm việc với Androi chắc hẳn ai cũng tiếp xúc với một lớp có tên là Toast. Lớp này cho phép hiển thị một thông báo dạng popup trong một khoảng thời gian nhất định nào đó!
    Chi tiết tại đây: More info...
    Nhưng nếu hiển thị như mặc định thì có vẻ còn hơi đơn điệu, vì thế chúng ta sẽ tự tạo Toast mang một phong cách riêng (còn gọi là Custom Toast).

    Thực hiện
    Bước 1: Tạo một Project mới.
    Bước 2: Trên Layout của Project, mình tạo một Button.
    Bước 3: Mình viết sự kiện click cho Button dùng để hiện thị Toast trong MainActivity.
    Bước 4: Mình sẽ tạo Resource cho Layout Toast. (chi tiết như bên dưới)
    Tại thư mục res mình tạo thêm một thư mục khác có tên là Drawable, sau đó mình tạo một file *.xml dạng shape. (mục đích dùng để thiết lập mã màu background và border cho Layout Toast sau này). Sau đó mình cũng bỏ một tấm hình thư mục đó (Link hình)

    [​IMG]
    Nội dung file mborder_green.xml:
    PHP:
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
        <padding
            android:left="5dp"
            android:top="5dp"
            android:right="5dp"
            android:bottom="5dp" />
        <solid android:color="#E3FFDB"/>
        <stroke android:color="#7FFF00" android:width="1dp"/>
        <corners android:radius="5dp" />
    </shape>
    Trong nội dung của file *.xml mình có chú đánh số các thuộc tính mà mình thêm vào, ý nghĩa của chúng như sau:
    1. Xác định khoảng cách nội dung thành phần bên trong so với biên.
    2. Xác định màu nền.
    3. Xác định màu và độ rộng đường biên.
    4. Xác định độ tròn khi bo góc.

    Bước 5: Mình tạo Layout cho Toast bằng cách thêm một Layout nữa vào thư mục /layout và xác định tài nguyên mà mình đã định nghĩa từ trước.
    [​IMG]

    Nội dung toàn bộ file mcustom_toast_green.xml:
    PHP:
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/mborder_green"
        android:orientation="horizontal" >
    <ImageView
        android:layout_width="37dp"
        android:layout_height="37dp"
        android:layout_gravity="center"
        android:src="@drawable/tick" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="Login successful message" />

    </LinearLayout>
    Bước 6: Quay trở lại MainActivity, mình sẽ dùng lớp LayoutInflater để định nghĩa giao diện cho đối tượng View, và sử dụng chính đối tượng view này để xây dựng Custom Toast, minh họa đoạn code dưới:
    PHP:
    public class CustomToast extends Activity {

        private 
    View mButton;
        private 
    Toast mToast;

        @
    Override
        
    public void onCreate(Bundle savedInstanceState) {
            
    super.onCreate(savedInstanceState);
            
    setContentView(R.layout.activity_custom_toast);
            
    mButton = (findViewById(R.id.button1));
            
    mButton.setOnClickListener(new OnClickListener() {

                @
    Override
                
    public void onClick(View v) {
                    
    // TODO Auto-generated method stub
                    
    mToast.show();
                }
            });

            
    LayoutInflater inflater getLayoutInflater();
            
    View mToastView inflater.inflate(R.layout.mcustom_toast_greennull);

            
    mToast = new Toast(this);
            
    mToast.setView(mToastView);
        }
    }
    Kết quả:
    [​IMG]

    Mình còn bổ sung thêm 3 Custom Toast như hình dưới, bạn có thể tham khảo cuối bài viết:
    [​IMG]

    Download ProJect

    Special thanks [​IMG]
     
    gorkiit and rfabbc like this.
  2. rfabbc

    rfabbc New Member

    tks bạn về bài viết rất hữu ích.

    nhờ bạn hướng dẫn cách chạy project này:

    có cần phải copy nó vào thư mục \workspace hay để nó ở đâu cung đc rồi mở bằng Eclipse hay ntnao vậy bạn?
     
  3. vtcNew

    vtcNew Active Member

    - Bạn để đâu cũng được
    - Nhìn lên thanh công cụ của Eclispe . Chọn File / Import / Existing project into workspace / ....
     
    rfabbc likes this.
  4. rfabbc

    rfabbc New Member

    Tks bạn. MÌnh hỏi vậy vì cái Eclipse này rất khó chịu, hôm bữa mình edit 1 project, trc khi edit thì mình cẩn thận copy toàn bộ thư mục để lưu lại, sau khi edit tùm lum thì mình muốn khôi phục lại cái ban đầu bằng cách copy cái đã backup ghi đè lên cái đã edit. Tưởng đơn giản vậy mà nó báo lỗi mất đồng bộ gì đấy, hoảng luôn.
     
  5. h28192

    h28192 New Member

    thank! b ai viet rat hay :D
     

Chia sẻ trang này

Loading...