Tools Attributes in Android

Xin chào mọi người 😀

Hôm nay mình muốn chia sẻ với mọi người chút kinh nghiệm trong quá trình xây dựng layout, view, screen … trong Android (Design-Time). Đây không phải là bài viết liên quan đến kiến thức cao siêu gì trong Android mà chỉ là trick, tip giúp mọi người tiết kiệm thời gian check lại view của mình design lên mà không mất thời gian build app nhiều lần và nó chính là một thành phần ngay trong bộ Android’s SDK mà Android’s dev vẫn dùng hàng ngày trong các file XML –> TOOLS ATTRIBUTE :D. Let’s go!

1. Summon tools ở đâu ? 

Trong file layout (XML), bạn muốn sử dụng tools cần add thêm line code này :

1
xmlns:tools="http://schemas.android.com/tools"

Ví dụ:

1
2
3
4
5
6
7
8
9
<android.support.design.widget.CoordinatorLayout
    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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="vn.a3si.myapplication.MainActivity">

2. Tools trong View

  • “tools:” instead of “android:”
    “android:” có cái gì thì “tools:” cũng có cái đó với các attribute liên quan đến view (text, textColor, enable, visibility …). Chỉ khác nhau một điểm chính là:
    – “android:” : sẽ được hiển thị trên App sau khi build + Preview Screen.
    – “tools:” : sẽ chỉ hiển thị trên Preview Screen.
    Ví dụ:


    tools:text

     

  • tools:contextCho biết sự liên kết giữa Layout và activity/fragment liên quan.
    Ví dụ:
    1
    2
    3
    4
    <android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context=".MainActivity" >

    Tạo “onButtonClicked” method trong MainActivity

     

 

  • tools trong RecyclerView
    – tools:listitem/tools:listheader/tools:listfooter
    3 thuộc tính trên giúp cho việc preview trong recyclerView dễ dàng hơn. Mình thường dùng 3 thuộc tính trên để xem khi từng item trong list có được hiển thị khoảng cách có ổn không hay text trong item có bị to hay nhỏ quá không …
    Ví dụ:
    Với item như sau:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/tv_label"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_margin="1dp"
              android:background="@drawable/background"
              android:gravity="center"
              android:padding="10dp"
              tools:text="1"/>

    Ta sẽ dùng RecyclerView hiển thị một list các TextView.

    Không tools:listitem

     
    Có tools:listitem

    – tools:text=”@tools:sample/”
    Ta cũng có thể fake nhiều data khác nhau ứng với mỗi item trong RecylerView

    “@tools:sample/*” resources

    Khi đó, list của chúng ta sẽ được trông như thế này đây:

    List các text với @tools:sample/first_names


    Table “@tools:sample”


    Ngoài ra, các bạn có thể tham khảo bảng sample cho tools:









    Thêm nữa, nếu bạn muốn custom riêng 1 list (Giả sử ta lấy được json từ server trả về), ta có thể preview ngay trong AndroidStudio bằng các steps sau:
    1. Tạo sampledata folder












    Create sample folder with name “sampledata” 

    2. Tạo filedata trong sampledata folder

    1
    2
    3
    4
    5
    6
    7
    8
    {
      "data" :[
        {"idweb": -1, "sourceId" : 1, "name" : "AIRCRAFT ACCIDENT ..."},
        {"idweb": 1, "sourceId" : 1, "name" : "ANNEX 1 ..."},
        {"idweb": 2, "sourceId" : 1, "name" : "ANNEX 11 ..."},
        {"idweb": 3, "sourceId" : 1, "name" : "ANNEX 12 ..."}
      ]
    }

    3. Truy cập data
    Với “subects.json” bên trên, ta add thêm line code này trong item của RecyclerView.

    1
    tools:text="@sample/subjects.json/data/name"

    – tools:itemCount
    Giúp bạn fix cứng số item trong RecyclerView.
    Ví dụ:

    1
    2
    3
    4
    5
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:itemCount="3"/>

    Note:
    Ngoài ra, khi hiển thị list item chúng ta có nhiều cách trick giúp việc preview dễ dàng hơn. Ví dụ như:
    – Muốn show ra 1 list dưới dạng grid, số item mỗi row là 2. Ta có thể sử dụng RecyclerView như sau:


    GridLayout in RecyclerView

  • Các tools khác
    – tools:showIn: Preview View hiện tại trong 1 target view nào đó sau “showIn” (Có thẻ <include> trong target view).
    – tools:layout: Định nghĩa layout muốn hiển thị trong fragment.
    – tools:menu: Giúp preview menu muốn show trên appbar.
    – tools:minValue / tools:maxValue: Định nghĩa min/max number value trong NumberPicker.
    – tools:openDrawer=”end || start || top || bottom”. Preview xem DrawerLayout được đặt ở pane bên nào của container.

3. Tools trong “Error handling attributes” và “Resource shrinking attributes”

Các tool này là các tools hỗ trợ thêm. Mình khá ít dùng các tools này nên trong bài này mình sẽ không đi sâu vào nói chúng. Các bạn có thể tham khảo thêm ở các link sau : https://developer.android.com/studio/write/tool-attributes.html

References:
https://developer.android.com/studio/write/tool-attributes.html

https://android.jlelse.eu/android-tools-attributes-listitem-sample-data-rocks-bbf49aaa9f07


[iOS] Chuyển đổi ngôn ngữ của Ứng dụng