Một trong những điều khó khăn nhiều nhà phát triển Android mới là làm thế nào để hỗ trợ nhiều kích cỡ màn hình trong ứng dụng của họ. Khi một ứng dụng Android  được thiết kế, nhà phát triển ứng dụng phải tạo ra một trải nghiệm dành cho người dùng nhất quán trên tất cả các thiết bị. Do đó, ứng dụng phải hỗ trợ để chạy được trên nhiều thiết bị với kích thước màn hình, độ phân giải màn hình, và mật độ điểm ảnh khác nhau .

Trong Android,  giải pháp điển hình cho vấn đề này là tạo ra nhiều phiên bản của hình ảnh của bạn với các giá trị dpi khác nhau (dots per inch) để hỗ trợ các kích thước màn hình và mật độ điểm ảnh chạy trên các thiết bị khác nhau (VD: Samsung Galaxy S5 LTE-A 5.1 inch độ phân giải 1440x2560px, mật độ điểm ảnh 576ppi còn Samsung Galaxy S3 720x1280px, mật độ điểm ảnh 306ppi).

Thật không may, cách tiếp cận này dẫn đến tốn thêm khá nhiều thời gian và công sức để tạo ra các phiên bản ảnh khác nhau và hơn nữa còn chiếm dụng thêm tài nguyên khi build tập tin apk của ứng dụng (và các thiết bị) để lưu trữ chúng. Trong Android Lollipop (API 21), Google cuối cùng cũng hỗ trợ cho Vector Images Asset, cho phép hình ảnh được biểu diễn hình học như là một tập hợp các điểm, đường, và đường cong, cũng như thông tin liên quan đến màu sắc trên duy nhât một file XML và tận dụng khả năng mở rộng, tùy biến của nó hỗ trợ cho tất cả các mật độ điểm ảnh cho các thiết bị khác nhau.

No SVG for you

    SVG (viết tắt của Scalable Vector Graphics) đã được phát triển bởi World Wide Web Consortium (W3C) kể từ năm 1999, là loại định dạng hình ảnh mở, được dùng miêu tả các hình ảnh đồ họa véc tơ hai chiều, tĩnh và hoạt hình, thường dành cho ứng dụng trên các trang mạng. SVG có thể phóng to thu nhỏ mọi kích cỡ mà không giảm chất lượng hình ảnh, một đặc tính ưu điểm hơn nhiều các tập tin định dạng nhị phân khác (GIF, PNG, …). Trước phiên bản Android  API 21 (Lollipop), măc dù việc hỗ trợ cho SVG không xuất hiện trên Android nhưng có nhiều thư viện mở cho phép các nhà phát triển để làm việc với các tập tin SVG trên Android, như  AndroidSVG  thư viện. Giải pháp của Android để vectorizing hình ảnh trong Android Lollipop và các phiên bản mới hơn (gần đây nhất là Android  N ) là VectorDrawable và AnimatedVectorDrawable lớp. Tôi khuyên bạn không sử dụng các định dạng SVG với các ứng dụng Android của bạn, thay vào đó, hãy xem xét chuyển đổi các tập tin SVG của bạn về VectorDrawables và Vector Asset Studio phát hành trong Android Studio 1.4.

VectorDrawables

Lớp VectorDrawable được giới thiệu ở  Android API 21 cho phép bạn vẽ một đối tượng dưới dạng tĩnh trong một tập tin XML. Là một subclass của Drawable , bạn có thể dễ dàng tích hợp VectorDrawables vào bất kỳ đoạn code nào có sử dụng Drawables, nhưng lưu ý rằng khi VectorDrawable chỉ được sử dụng trong các phiên bản SDK kể từ Lollipop trở lên, hay cho các thiết bị chạy Android 5.0 trở lên. VectorDrawables chia sẻ một số điểm tương đồng với các định dạng SVG như việc sử dụng thuộc tính <path> phục vụ cho các tác vụ “moveto, line, curve, arc và closepath”. Các thuộc tính “android: pathData” sử dụng định dạng giống như thuộc tính “d” trong tạo dữ liệu đường dẫn của SVG. Để tạo một VectorDrawable , các thành phần của nó được định nghĩa bên trong một phần tử <vector> và lưu trong file XML.

Các điểm cần chú ý khi sử dụng class VectorDrawable đó là :

• VectorDrawable không chạy được trong các thư viện (phiên bản SDK) mà Android không hỗ trợ, do đó nó sẽ chỉ làm việc trong Android 5.0 trở lên (Lolipop); các phiên bản API cũ hơn sẽ phải chờ support.
• VectorDrawable không đọc hoặc hỗ trợ các định dạng SVG
• VectorDrawable không hỗ trợ gradients và các pattern.

Các định dang SVG không được hỗ trợ nhưng Vector Drawable sử dụng cấu trúc và định dạng gần giống như các đặc tính của SVG. Do đó, chúng ta có thể convert một file định dạng SVG sang VectorDrawable dưới định dạng file xml bằng Tool riêng.

Cấu trúc của VectorDrawable trong file XML

AnimatedVectorDrawables

Một lớp mới cũng được giới thiệu trong Android Lollipop hỗ trợ việc tạo đồ họa cho vector là  AnimatedVectorDrawable. Cũng giống như lớp VectorDrawable , AnimatedVectorDrawable được extend từ Drawable nhưng không phải là một lớp con của VectorDrawable như tên gọi dễ nhầm lẫn của nó. AnimatedVectorDrawable cho phép bạn tạo animation cho một VectorDrawable để tạo ra một “Animated Drawable”.

Không giống như VectorDrawables chỉ cần một file XML, AnimatedVectorDrawable được tạo ra dưới một hoặc thậm chí là hai file XML, một choVectorDrawable sử dụng cho Animated  và một cho Animator (ObjectAnimator hoặc AnimatorSet ). Cũng giống Như lớp VectorDrawable , hiện nay Android không thực hiện việc hỗ trợ thư viện đầy đủ cho lớp AnimatedVectorDrawable (Từ Android Lolipop trở lên).

Performance

Để sử dụng hiệu quả VectorDrawables và AnimatedVectorDrawable chúng ta cần lưu ý những điểm sau:

• Simplity the path
• Limit the image size
• Use the internal cache

Tool convert SVG to VectorDrawable

Ta có thể dễ dàng tạo một file XML VectorDrawable từ file SVG có sẵn như sau:

• File ảnh ban đầu
  
  
• File SVG của hình ảnh này

•  Drop file SVG vào tool 
  
  

• Và nhận lại file XML VectorDrawable
  
  Youtube.xml

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  <?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android"     android:viewportWidth="455.731"     android:viewportHeight="455.731"     android:width="455.731dp"     android:height="455.731dp">     <path         android:pathData="M0 0l455.73099 0 0 455.73099 -455.73099 0z"         android:fillColor="#dc472e" />     <path         android:pathData="M263.259 291.734c-0.01 -1.7 -0.51 -3.47 -1.14 -5.06 -0.84 -2.09 -2.64 -3.13 -4.9 -3.35 -2.65 -0.26 -4.77 0.81 -6.69 2.51 -0.77 0.67 -1.12 1.67 -1.12 1.67l0.04 53.97 0 1.33c0 0 0.46 0.62 0.53 0.7 1.56 1.69 3.38 3.03 5.71 3.51 3.84 0.79 6.55 -0.81 7.3 -4.37 0.19 -0.89 0.3 -1.81 0.3 -2.72 0.02 -16.07 0.05 -32.13 -0.03 -48.19zm0 0c-0.01 -1.7 -0.51 -3.47 -1.14 -5.06 -0.84 -2.09 -2.64 -3.13 -4.9 -3.35 -2.65 -0.26 -4.77 0.81 -6.69 2.51 -0.77 0.67 -1.12 1.67 -1.12 1.67l0.04 53.97 0 1.33c0 0 0.46 0.62 0.53 0.7 1.56 1.69 3.38 3.03 5.71 3.51 3.84 0.79 6.55 -0.81 7.3 -4.37 0.19 -0.89 0.3 -1.81 0.3 -2.72 0.02 -16.07 0.05 -32.13 -0.03 -48.19zm60.43 -81.39c-63.87 -1.37 -127.77 -1.37 -191.65 0 -22.16 0.47 -39.88 18.59 -39.88 40.76l0 99.76c0 22.18 17.72 40.3 39.88 40.77 63.88 1.37 127.78 1.37 191.65 0 22.17 -0.47 39.89 -18.59 39.89 -40.77l0 -99.76c0 -22.169 -17.72 -40.29 -39.89 -40.76zm-172.89 149.611l-18.42 0 0 -104.13 -19.07 0 0 -17.42 56.6 0 0 17.38 -19.11 0 0 104.17zm65.92 -43.221l0 43.23 -16.31 0 0 -9.88c-0.59 0.63 -0.92 0.97 -1.23 1.32 -3.51 3.96 -7.49 7.26 -12.57 9.01 -2.48 0.85 -5.03 1.14 -7.64 0.69 -3.56 -0.59 -5.95 -2.64 -7.39 -5.88 -1.34 -2.99 -1.68 -6.19 -1.69 -9.41 -0.04 -11.9 -0.02 -74.88 -0.02 -75.49l16.27 0c0.03 0.55 0.09 45.76 0.1 67.81 0 1.2 0.01 2.43 0.25 3.6 0.6 2.96 2.87 4.23 5.72 3.19 3.28 -1.2 5.78 -3.46 7.88 -6.17 0.31 -0.39 0.31 -1.09 0.31 -1.65l0 -66.88 16.32 -0.04c0 10e-4 0 31.57 0 46.55zm62.05 34.59c-2.18 6.56 -6.98 9.9 -13.88 9.83 -5.61 -0.05 -10.16 -2.28 -13.91 -6.35 -0.42 -0.45 -1.58 -1.68 -1.58 -1.68l0 6.82 -16.34 0 0 -121.55 16.34 0c0 12.94 0 40.01 0 40.01 0 0 0.92 -1.84 1.76 -2.79 2.53 -2.83 5.61 -5.02 9.41 -5.98 6.27 -1.57 13.5 0.37 16.94 7.7 2.03 4.33 2.6 8.95 2.6 13.65 0.03 16.99 0.03 33.98 0.01 50.97 -0.01 3.18 -0.34 6.321 -1.35 9.37zm60.35 -3.419c-2.83 8.29 -8.68 12.89 -17.26 14.15 -5.32 0.78 -10.59 0.67 -15.58 -1.59 -6.83 -3.08 -10.7 -8.65 -12.36 -15.74 -0.77 -3.3 -1.15 -6.76 -1.19 -10.15 -0.13 -13.31 -0.07 -26.63 -0.04 -39.94 0.01 -6.96 1.67 -13.38 6.44 -18.71 5.44 -6.09 12.4 -8.36 20.35 -7.85 2.39 0.15 4.83 0.54 7.1 1.29 7.73 2.54 11.86 8.33 13.48 16.01 0.62 2.96 0.85 6.03 0.9 9.06 0.13 7.1 -0.05 22.75 -0.05 22.75l-31.29 0 0 22.43c0 4.03 3.26 7.29 7.29 7.29 4.02 0 7.28 -3.26 7.28 -7.29l0 -11.53 16.81 0c0 -10e-4 0.25 13.61 -1.88 19.82zm-14.93 -57.22c0 -4.02 -3.26 -7.29 -7.28 -7.29 -4.03 0 -7.29 3.27 -7.29 7.29l0 12.59 14.57 0 0 -12.59zm-62.07 -4.01c-0.84 -2.09 -2.64 -3.13 -4.9 -3.35 -2.65 -0.26 -4.77 0.81 -6.69 2.51 -0.77 0.67 -1.12 1.67 -1.12 1.67l0.04 53.97 0 1.33c0 0 0.46 0.62 0.53 0.7 1.56 1.69 3.38 3.03 5.71 3.51 3.84 0.79 6.55 -0.81 7.3 -4.37 0.19 -0.89 0.3 -1.81 0.3 -2.72 0.02 -16.07 0.05 -32.13 -0.03 -48.19 -0.01 -1.701 -0.51 -3.471 -1.14 -5.06z"         android:fillColor="#ffffff" />     <path         android:pathData="M303.887 94.99l-0.005 90.244 -16.722 0 0.02 -9.695c-1.849 1.821 -3.427 3.522 -5.161 5.05 -3.074 2.708 -6.556 4.727 -10.629 5.524 -6.253 1.223 -11.579 -0.754 -13.573 -7.23 -0.664 -2.157 -1.065 -4.482 -1.082 -6.734l0 -77.159 16.596 0 0 68.821c0 0.912 0.073 1.834 0.233 2.728 0.504 2.836 2.6 4.171 5.331 3.224 3.329 -1.152 5.869 -3.457 8.024 -6.173 0.306 -0.388 0.251 -1.112 0.251 -1.681l0 -66.919 16.717 0z"         android:fillColor="#ffffff" />     <path         android:pathData="M165.578 110.672C161.948 95.371 154.343 63.07 154.343 63.07l-19.029 0c0 0 14.62 48.487 21.158 70.111 0.235 0.782 0.343 1.631 0.343 2.45l-0.007 49.584 17.547 0 -0.007 -49.584c0 -0.819 0.108 -1.668 0.343 -2.45 6.538 -21.624 21.158 -70.111 21.158 -70.111l-19.029 0c0 0 -7.606 32.301 -11.235 47.602l-0.007 0z"         android:fillColor="#ffffff" />     <path         android:pathData="M218.752 92.731l0 0c-13.224 0 -23.944 10.72 -23.944 23.944l0 46.859c0 13.224 10.72 23.944 23.944 23.944l0 0c13.224 0 23.944 -10.72 23.944 -23.944l0 -46.859c0.001 -13.224 -10.72 -23.944 -23.944 -23.944zm6.91 71.749c0 3.81 -3.1 6.909 -6.909 6.909 -3.809 0 -6.909 -3.099 -6.909 -6.909l0 -48.752c0 -3.81 3.1 -6.909 6.909 -6.909 3.809 0 6.909 3.1 6.909 6.909l0 48.752z"         android:fillColor="#ffffff" /> </vector>

• Thử preview trong Android Studio

Ngoài ra , chúng ta có thể sử dụng AniamtedVectorDrawable và VectorDrawable để tạo những bức ảnh động ngay tronng app của mình như ví dụ sau :

Lời kết

Theo tôi, sự tiện dụng và hữu ích của VectorDrawable và AniamtedVectorDrawable là rất tuyệt vời và không phải bàn cãi, rất có thể nó sẽ thay thế cho việc sử dụng các file ảnh PNG, JPG, GIF … bên trong các ứng dụng Android trong tương lai không xa nhưng “không phải bây giờ”. Hiện tại , PNG – đại điện cho các file ảnh phổ biến nói chung vẫn còn rất xa với “cái chết” trong Android. “Vector Image” tốt nhưng chưa đủ phổ biến (support cho tất cả các phiên bản Android), chưa đủ tiện lợi (vẫn cần tool  ) và điều quan trọng nhất đó là nó còn phụ thuộc quá nhiều vào chất lượng của OS. Khi chạy một file XML “Vector Image”, hệ điều hành (OS) sẽ render trong thời gian thực để cho chất lượng ảnh tốt nhất phù hợp với thông số kỹ thuật của máy, tức là bạn trao toàn quyền điều khiển việc tạo ảnh cho OS và câu chuyện tối ưu hóa hiệu năng hay chất lượng của OS có đủ tốt tại thời điểm đó không lại trở thành bài toán mới đặt ra cho những nhà phát triển ứng dụng. Hãy sử dụng chúng “đúng chỗ và đúng thời điểm” bạn nhé !
Good luck have fun   

GLHF