Được chỉnh sửa ngày 23/07/2019.

Chào mừng các bạn đã đến với bài học Android thứ 20, bài học về cách sử dụng ảnh bitmap. Đây là bài học trong chuỗi bài viết về lập trình ứng dụng Android bằng Java của Yellow Code Books.

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.

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. Bạn phân biệt được chưa nào. Nào chúng ta cùng bắt đầu.

Ả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.

Sử Dụng Ả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.

Sử Dụng Ảnh Bitmap Từ File XML

Từ bất kỳ file XML nào, như là các file layout hay file Manifest, nếu bạn đang ở tab Design, thì ở các field liên quan đến hình ảnh, như field background ở hình dưới, bạn có thể nhấn vào nơi được khoanh tròn trong hình để mở ra một cửa sổ liệt kê tất cả các hình ảnh, bạn chỉ việc chọn lựa hình ảnh đã khai báo sẵn mà thôi.

Còn nếu bạn đang ở tab Text, 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. Bạn có thể 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.

<ImageView
    android:id="@+id/imageView"
    android:layout_width="@dimen/empty_icon_width"
    android:layout_height="@dimen/empty_icon_height"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:scaleType="fitCenter"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/activity_main_tv_empty"
    app:srcCompat="@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.

Sử Dụng Ảnh Bitmap 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.

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.

Để 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 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. Từ khi Android O ra đời (hay còn được gọi là Android 8.0), thì Launcher Icons được chia ra làm 2 tùy chọn nhỏ hơn. Tùy chọn thứ nhất Launcher Icons (Adaptive and Legacy) hỗ trợ cả Adaptive icon và icon truyền thống ngày xưa trước Android 0. Tùy chọn thứ hai Launcher Icons (Legacy only) thì chỉ hỗ trợ bộ icon trước Android O mà thôi. Tất nhiên là chúng ta sẽ chọn Launcher Icons (Adaptive and Legacy) rồi. Còn khái niệm Adaptive icon là gì thì bạn có thể xem thêm link này nhé.
  • 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.
• Nếu ở Icon Type mà bạn chọn Launcher Icons (Adaptive and Legacy) thì dưới mục Name sẽ có 3 tab tương ứng với 3 cài đặt cho các lớp của Adaptive icon.
  • Tab Foregaround Layer cho phép bạn chọn ảnh làm foreground. Đó có thể là một ảnh bitmap của bạn, hay ảnh từ thư viện Clip Art của Google, thậm chí là text.
  • Tab Background Layer cho phép bạn chọn ảnh làm background. Với 2 tùy chọn là màu sắc hoặc ảnh.
  • Tab Legacy cho phép bạn thiết lập các tùy chọn icon cho các hệ điều hàn Android khác nhau, thường thì mình để mặc định thông tin ở tab này.

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é.

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ụ Image Asset để chính thức tạo một icon đẹp lung linh và tương thích với mọi phiên bản hệ điều hành Android cho TourNote. Trước hết bạn hãy click vào link này đây để download ảnh chất lượng cao của mình về trước nhé.

Dùng Công Cụ Image Asset Để Tạo Bộ Icon Cho App

Đầu tiên, như hướng dẫn trên kia, bạn hãy mở cửa sổ Configure Image Asset rồi làm theo các thiết lập như dưới đây của mình.

Ở mục Icon Type, hãy đảm bảo chọn Launcher Icons (Adaptive and Legacy).

Ở mục Name, hãy để như mặc định.

Ở tab Foreground Layer. Bạn để mặc định mục Layer Name. Mục Asset Type thì check chọn Image. Sau đó trỏ Path đến nơi bạn vừa download ảnh chất lượng cao trên kia về. Rồi điều chỉnh lại mục Resize sao cho ảnh nằm cân đối bên trong các khung bao. Tất cả các thiết lập đến bước này sẽ trông như sau.

Qua tab Background Layer. Cũng để mặc định mục Layer Name. Mục Asset Type thì check chọn Color. Click vào mục Color sẽ xuất hiện một popup nữa có tên Select Color. Khi này bạn hãy điền vào mã màu #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.

Đến bước này thì công cuộc thiết lập sẽ trông như sau.

Bạn có thể thấy rất nhiều định dạng icon mẫu trưng ra cho bạn xem ở poup trên đúng không. Khi thấy ưng ý rồi bạn hãy nhấn Next. Bước sau cho bạn thấy các icon nào sẽ được thêm vào project để tạo thành bộ icon hoàn chỉnh cho ứng dụng của bạn.

Thực ra bước cuối cùng này cũng chẳng có gì quan trọng lắm, bạn hãy nhấn Finish để xem thành quả cuối cùng nhé.

Kiểm Tra Lại Manifest

Chắc chắn chúng ta 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 bạn hãy cứ mở file AndroidManifest.xml lên và xem cách khai báo và sử dụng icon (cũng chính là ảnh bitmap) cho ứng dụng. Còn nếu bạn không biết file AndroidManifest nằm ở đâu thì có thể xem lại bài 12 nhé.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yellowcode.tournote">

    <supports-screens
        android:smallScreens="false"
        android:normalScreens="true"
        android:largeScreens="true"
        android:xlargeScreens="true"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <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.

Bài học tuy không dài lắm, nhưng hi vọng mang đến cho các bạn một kiến thức về cách sử dụng các ảnh bitmap trong Android. Như mình có nói, PNG vẫn là ảnh được Google khuyến cáo dùng, nên bài hôm nay mình chỉ làm việc với ảnh PNG thôi, bạn vẫn có thể thử nghiệm cách sử dụng với các ảnh còn lại được Google hỗ trợ, nếu có thắc mắc gì thì để lại comment cho mình nhé.

Bài Kế Tiếp

Chúng ta lại nói tiếp về các resource drawable tiếp theo, cụ thể là cách sử dụng ảnh 9-patch và ảnh vector.