Sử Dụng Drawable – Ảnh Bitmap

https://yellowcodebooks.com/2017/06/06/android-bai-20-su-dung-drawable-anh-bitmap/

Bài học hôm nay chúng ta sẽ bắt đầu nói về cách thức sử dụng một dạng resource có tên drawable. Drawable là một khái niệm mà Android dùng đến để nói về các resource liên quan đến ảnh, bao gồm cả các ảnh bitmap như PNG/JPG, các ảnh vector, hay các ảnh được dựng bằng XML,… Và do có nhiều dạng drawable cần nói đến, nên mình tách chúng riêng ra từng phần, bài hôm nay mình sẽ nói về ảnh bitmap trước, với mình thì nó khá thú vị, hi vọng bạn cũng thích bài học hôm nay.

Bài học sẽ cần nhiều đến hình minh họa, do đó tốt nhất bạn nên chọn một nơi có wifi rồi đọc bài viết hôm nay của mình nhé. Mình không chê tốc độ 3G hay 4G của bạn đâu, nhưng mình biết một số nhà mạng chặn các trang web từ nguồn wordpress.com như mình mà không hiểu nguyên nhân. Điều này làm cho trải nghiệm truy cập từ các thiết bị di động không dùng wifi đến trang blog rất tệ, nhất là những bài viết có nhiều hình ảnh. Mình mong các bạn thông cảm cho, hic.

Resource Ảnh Và Widget Hiển Thị Ảnh

Đầu tiên mình xin nói đến sự khác biệt giữa Resource là Ảnh của bài hôm nay và Các widget giúp hiển thị Ảnh. Ồ nếu bạn phân biệt được rồi thì tốt, nhưng mình nghĩ sẽ có nhiều bạn hơi hơi nhập nhằng phần này tí.

Bạn nên biết là các bài học như bài số 9, hay bài về các widget cơ bản, đều nói đến các widget chuyên về hiển thị ảnh, như ImageView, hay ImageButton. Ngoài ra thì các widget còn lại bên trong Android hay các layout cũng đều có khả năng hiển thị ảnh, chỉ có điều không chuyên bằng mấy thằng ImageView và ImageButton thôi. Thì đây chỉ là những nơi giúp bạn hiển thị ảnh ra ngoài màn hình. Còn ảnh được tổ chức như thế nào, được gọi đến ra sao, thì đó là trách nhiệm của resource về ảnh mà bài hôm nay sẽ nói đến.

Ảnh Bitmap

Chúng ta cùng đến với một dạng drawable đầu tiên, đó là bitmap drawable.

Bitmap, chắc bạn cũng biết rồi, là các dạng ảnh được tổ chức theo ma trận các điểm ảnh, như các ảnh PNG, JPEG, JPG, TIFF, PSD,… mà bạn biết.

Có nhiều các thể loại bitmap drawable là vậy nhưng Android chỉ hỗ trợ chúng ta sử dụng ba định dạng sau thôi, đó là PNG, JPG và GIF. Trong đó PNG được khuyến khích sử dụng, JPG thì chấp nhận được, và GIF thì bạn nên hạn chế. Ba định dạng ảnh này là gì thì chúng quá phổ biến rồi, bạn nên tự tìm hiểu bản chất của chúng nhé.

Nếu bạn nào thích thiết kế vẽ vời, bạn có thể xem hướng dẫn chi tiết của Google ở link này để có thể tự mình thiết kế các ảnh cho các icon trong app, bảo đảm đúng chuẩn material. Mình cũng thích thiết kế, cơ mà Google viết dài quá nên hơi lười đọc. Nhưng nếu bạn vừa lười đọc vừa không thích thiết kế, vậy thì hãy đọc các công cụ có sẵn của Google mà mình sắp trình bày ở bên dưới đây, để xem Google cung cấp cho chúng ta những phương tiện gì để phát triển một sản phẩm mà không cần designer nhé.

Tổ Chức Ảnh Bitmap Trong res/

 Có hai loại thư mục con của res/ mà bạn có thể dùng để tổ chức các ảnh bitmap này, đó chính là drawable-xxx/ và mipmap-xxx/. Chính là các thư mục được mình tô sáng như dưới đây.

Việc để các ảnh vào trong các cấu trúc alternaive resource thì bạn đã biết rồi, nhưng cớ vì sao mà lại có tới hai loại thư mục drawable và mipmap thì đó mới là chuyện đáng nói. Trước kia Android chỉ cung cấp cho chúng ta drawable là thư mục duy nhất để bạn có thể triển khai các ảnh bitmap vào đây. Nhưng một bữa nọ, khi tạo mới project, bạn có thêm một thư mục nữa đó chính là mipmap, thư mục này chủ yếu chỉ chứa các ảnh dùng làm icon cho ứng dụng. Lát nữa chúng ta sẽ cùng thực hành tạo icon chính thức cho TourNote, và icon đó (cũng là một ảnh bitmap) sẽ được để trong thư mục mipmap này.

Truy Xuất Đến Ảnh Bitmap

Cũng giống như các resource mà chúng ta đã từng làm quen, có hai hướng để các bạn truy xuất đến một ảnh bitmap, đó là từ bất kỳ file XML nào, hoặc là từ Java code, mình sẽ nói rất cụ thể từng hướng.

Truy Xuất Từ File XML

Từ bất kỳ file XML nào, như là các file layout hay file Manifest, bạn truy cập đến ảnh bitmap bằng cách gọi @drawable/tên_file hoặc @mipmap/tên_file tùy theo ảnh đó được để trong drawable hay mipmap. Chúng ta cùng xem lại cách ImageView trong activity_main.xml của TourNote đã sử dụng đến ảnh bitmap mà chúng ta đã code ở những bài học trước.

1 2 3 4 5 6 7 8

<ImageView     android:layout_width="@dimen/empty_icon_width"     android:layout_height="@dimen/empty_icon_height"     android:layout_below="@id/activity_main_tv_empty"     android:layout_centerHorizontal="true"     android:layout_marginTop="@dimen/padding_medium"     android:scaleType="fitCenter"     android:src="@drawable/empty_note" />

Với code trên, bạn có thể thấy rằng, khi truy xuất đến ảnh bitmap, sẽ không có thông tin về định dạng ảnh, như .png hay .jpg hay .gif gì cả. Tức là không có chuyện bạn khai báo như này @drawable/empty_note.png, bạn chỉ cần truy xuất đến tên của file mà thôi, kiểu viết đúng luôn luôn là @drawable/empty_note. Và như vậy thì có nghĩa là, bạn sẽ không thể để hai ảnh có cùng tên nhưng khác định dạng, như empty_note.png và empty_note.jpg, vào trong cùng một project, vì khi gọi đến chúng ở file XML, hệ thống sẽ không biết bạn đang ám chỉ loại ảnh nào.

Truy Xuất Từ Java Code

Chắc bạn cũng có thể đoán được, là từ Java code, để gọi đến ảnh bitmap này, bạn có thể truyền vào tham số R.drawable.tên_file hoặc R.mipmap.tên_file – Tùy theo ảnh đó được để trong drawable hay mipmap – Vào trong các hàm cần một resource ID.

Như ví dụ sau mình có set lại ảnh cho ImageView ở màn hình chính của TourNote, mình set lại cho nó là ảnh ic_launcher trong thư mục mipmap. Bạn nên nhớ hàm set ảnh tương tự thuộc tính android:src bên XML là hàm setImageResource() bên Java code (như ví dụ dưới đây). Còn hàm tương tự thuộc tính android:background bên XML là hàm setBackgroundResource() bên Java code nhé. Bạn nên thử cả hai hàm xem chuyện gì xảy ra.

1 2	ImageView imageView = (ImageView) findViewById(R.id.activity_main_imv_empty); imageView.setImageResource(R.mipmap.ic_launcher);

Công Cụ Image Asset

Chúng ta vẫn còn đang nói đến các ảnh bitmap, và mục này mình xin nói đến một công cụ đắc lực của Google, công cụ được tích hợp sẵn vào Android Studio, giúp bạn dễ dàng import một icon (được Google tạo sẵn theo đúng tiêu chí mà mình có để link cho các bạn tham khảo trên kia, hoặc các ảnh mà bạn tự thiết kế nhưng không biết kích cỡ sao cho phù hợp), vào trong ứng dụng của bạn, để làm cho ứng dụng được chuyên nghiệp hơn.

Thực tế thì các icon bên trong ứng dụng TourNote mà mình cho các bạn xem, đều được lấy ra từ thư viện icon có sẵn của Google cả, bằng cách này hay cách khác. Với mục này thì mình hướng dẫn các bạn dùng cách sử dụng công cụ Image Asset.

Dưới đây không phải là một bài thực hành, do đó resource của mục này sẽ không được mình đưa lên GitHub. Tuy nhiên bạn cũng nên thực hành chơi cho biết. Để mở công cụ Image Asset thì từ Android Studio, bạn click chuột phải vào res/ rồi chọn New > Image Asset. Như hình.

Popup xuất hiện sau đó sẽ trông như thế này.

Giao diện của popup khá là dễ hiểu. Nhưng mình cũng nói sơ qua một chút các thành phần.

– Icon Type – Giúp bạn chọn lựa các bộ icon theo các chủ đề, các chủ đề này bao gồm. Launcher Icons, với tùy chọn này bạn sẽ tạo ra được cho mình bộ các icon cho app, với các kích cỡ icon ưng ý, và để sẵn vào trong thư mục res/mipmap-xxx/ cho chúng ta luôn, nếu bạn nào đang dùng Android Studio 3.0 trở lên sẽ thấy công cụ này còn hỗ trợ bạn tạo ra bộ icon tròn nữa, bộ icon tròn này sẽ được dùng từ Android 7.1. Action Bar and Tab Icons, tùy chọn này giúp bạn tạo một bộ icon dùng cho action bar và tab, dĩ nhiên bạn cũng có thể tận dụng tùy chọn này để tạo các icon cho các thành phần khác, kết quả của tùy chọn này chính là bộ ảnh được sắp xếp “ưng ý” trong các thư mục res/drawable-xxx/ tương ứng. Notification Icons, tùy chọn này giúp bạn tạo một bộ icon dùng cho notification, với bạn nào mới làm quen Android thì quả thật các quy luật về hiển thị notification icon với từng hệ điều hành Android khác nhau là một cơn ác mộng, mình đã từng mất khá nhiều thời gian để giải thích cho các bạn designer khi thiết kế các bộ icon này, “hiểu” được điều đó, công cụ Image Asset với tùy chọn Notification Icons này giúp bạn tạo các bộ icon cho từng đời Android đó.

– Name – Chỉ là đặt tên cho icon thôi.

– Asset Type – Cho phép bạn chọn nguồn ảnh giữa: Image, chọn ảnh của bạn. Clip Art, chọn các ảnh có sẵn trong thư viện ảnh của Google, đừng xem thường, mình rất thích vào trong bộ Clip Art này lắm đấy. Và Text, dùng text để làm icon. Với từng chọn lựa của Asset Type này thì chọn lựa tiếp theo ở bên dưới mục đó sẽ tương ứng.

– Trim – Bạn có thể chỉ định kêu công cụ cắt bỏ các khoảng transparent (trong suốt) hay không.

– Padding – Tùy chỉnh padding cho các icon.

Công Cụ Android Asset Studio

Nếu như bạn không thích công cụ có sẵn Image Asset trên đây, bạn có thể tìm đến một công cụ online thú vị hơn nhiều, đó là Android Asset Studio.

Nơi đây cung cấp khá nhiều tùy chọn cho bạn tạo các icon theo các mục đích khác nhau cho ứng dụng. Do là công cụ online và có nhiều tùy chọn quá nên mình không nói đến chi tiết nhé, bài thực hành bên dưới nói một chút đến công cụ này, và mình cũng sẽ áp dụng công cụ này cho việc down các icon về để sử dụng trong các bài học của mình sắp tới.

Tuy công cụ này khá tốt, nhưng nó cũng có một số khuyết điểm hơi bị ghét, chẳng hạn như các icon của nó không được nhóm lại theo từng chủ đề, bạn sẽ mất nhiều thời gian hơn mỗi lần tìm icon Clipart có sẵn. Hay sau khi chọn được icon ưng ý, bạn phải down về gói zip, tuy gói zip này có để sẵn các icon vào từng thư mục, nhưng cũng khiến bạn mất một ích thời gian để copy/paste chúng vào project, không được tự động như Image Asset trên kia.

Thực Hành Thay Đổi Icon Launcher Cho TourNote

Bài thực hành hôm nay mình sẽ sử dụng công cụ Android Asset Studio trên đây để chính thức tạo một icon đẹp lung linh cho TourNote.

Đầu tiên, bạn hãy click vào link này đây để download ảnh chất lượng cao của mình về để làm icon app.

Tạo Bộ Icon Vuông

Tất nhiên rồi, icon phải vuông chứ, bạn mở công cụ Android Asset Studio theo đường dẫn mà mình có nói trên kia. Bạn chọn vào mục Launcher icon generator.

Tiếp theo bạn nên chọn vào nút Image (ở view bên trái) để upload ảnh mà bạn mới down về. Và đây là các thiết lập của mình, trong đó màu vàng cho background color có mã là #F2CE3C, đây là màu vàng chuẩn của Yellow Code Books, bạn có thể thay đổi màu tùy thích 

Thật không gì tuyệt vời hơn, giờ mình đã có thể nhấn vào nút download bên phải ở trên màn hình này để download icon về được rồi, bạn down về đi nhé, rồi giải nén file zip vừa down, rồi chúng ta cùng qua bước sau.

Tạo Bộ Icon Tròn

Tại sao lại icon vuông rồi tròn? Bởi vì bạn nên biết, là Google có nói Android 7.1 trở lên sẽ sử dụng icon tròn thay cho vuông ở một số thiết bị, việc của chúng ta là phải tạo một bộ icon khác có tên là ic_launcher_round (nếu bạn nào có tạo mới project dạo gần đây thì Android Studio cũng đã mặc định tạo cho các bạn bộ icon tròn này trong mipmap rồi đấy, bên cạnh bộ icon vuông).

Với bộ icon tròn này, Android sẽ quyết định máy nào được phép dùng đến. Với Android Asset Studio đang mở như bước trên, bạn chỉ cần chọn lại giá trị Padding là 20%, Shape là Circle, và Name là ic_launcher_round. Bạn tự làm nhé, rồi cũng down file zip về và giải nén tương tự như icon vuông, rồi cùng mình đến bước kế tiếp. Hình minh họa cho icon tròn sẽ trông như thế này.

Copy Icon Vào Từng Thư Mục Tương Ứng

Bước này bạn thay thế bộ icon cũ trong thư mục res/mipmap-xxx/ thành các icon mới tương ứng, bạn nhớ là thay đổi cả icon_launcher và icon_launcher_round nếu project của bạn đang có cả hai loại icon này.

Nếu trong thư mục bạn vừa giải nén có chứa một icon có tên là web_hi_res_512.png, thì bạn chưa dùng đến nó đâu, bạn có thể cất file này ở đâu đó, bạn chỉ chú trọng đến các file trong các thư mục mipmap-xxx/ mà thôi.

Kết quả của của việc copy/paste các icon vào trong project như sau.

Kiểm Tra Lại Manifest

Có những bạn không cần làm gì cả ở bước này, bởi vì bạn chỉ vừa thay đổi icon thôi, không đổi tên chúng nó, project sẽ tự cập nhật lại icon mới. Nhưng cũng có nhiều bạn giống mình, khi tạo project với Android Studio xưa kia sẽ không có sẵn loại icon ic_launcher_round, những bạn bị như vậy thì cùng mình mở file AndroidManifest.xmllên và bổ sung vào như thế này.

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

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android"     package="com.yellowcode.tournote">     <supports-screens         android:largeScreens="true"         android:normalScreens="true"         android:smallScreens="false"         android:xlargeScreens="true" />     <application         android:allowBackup="true"         android:icon="@mipmap/ic_launcher"         android:label="@string/app_name"         android:roundIcon="@mipmap/ic_launcher_round"         android:supportsRtl="true"         android:theme="@style/AppTheme">         <activity android:name=".MainActivity">             <intent-filter>                 <action android:name="android.intent.action.MAIN" />                 <category android:name="android.intent.category.LAUNCHER" />             </intent-filter>         </activity>     </application> </manifest>

Giờ đây nếu bạn run ứng dụng lên, rồi vào lại danh sách các ứng dụng trong hệ thống, để xem icon của bạn là tròn hay vuông nhé. Với mình thì trông như thế này đây.

Download Source Code Mẫu

Bạn có thể download source code mẫu của bài này ở đây.