Android từ đầu: Tạo Style và Theme

Là các nhà phát triển Android, chúng ta có xu hướng tập trung chủ yếu vào các chức năng của ứng dụng của chúng ta. Tuy nhiên, chỉ có chức năng thôi thì chưa đủ. Trên Google Play, có trên một triệu ứng dụng ngày nay, giao diện cũng quan trọng như chức năng, nếu không muốn nói là nhiều hơn. Nếu bạn thấy khó tin, tôi đề nghị bạn hãy xem nhanh các ứng dụng trong phần Top Charts của Google Play.

Hiện có hai cách để thay đổi giao diện của ứng dụng Android. Cách đầu tiên liên quan trực tiếp đến chỉnh sửa các thuộc tính của các View trong các tập tin layout XML. Cách tiếp cận này là khả thi chỉ khi bạn đang làm việc trên một ứng dụng đơn giản có một số View và Activity. Cách thứ hai liên quan đến việc tạo và sử dụng các Style và Theme tuỳ biến. Nếu bạn đã quen với phát triển web, thì cách đầu tiên là khá giống với sử dụng các style CSS trực tiếp, cách thứ hai là giống như sử dụng các style sheet.

Trong hướng dẫn này, bạn sẽ tìm hiểu cách làm thế nào để tạo ra các Style và Theme tùy biến cho ứng dụng Android của bạn. Bạn cũng sẽ tìm hiểu cách sử dụng các công cụ và lối tắt của Android Studio tạo thuận lợi cho việc tạo Style.

1. Tạo Style

Style rõ ràng áp dụng cho các thành phần UI. Vì vậy, hãy bắt đầu bằng việc tạo ra một Activity rỗng mới và thêm hai View vào tập tin layout XML của nó.

1

<View android:layout_width="100dp"

2

    android:layout_height="100dp"

3

    android:layout_margin="5dp"

4

    android:background="#009688"

5

    android:id="@+id/box1" />

6

7

<View android:layout_width="100dp"

8

    android:layout_height="100dp"

9

    android:background="#00BCD4"

10

    android:layout_margin="5dp"

11

    android:id="@+id/box2" />

Như bạn có thể thấy trong code ở trên, các thuộc tính chẳng hạn như layout_width và layout_margin được thêm rõ ràng bên trong định nghĩa của mỗi View.

Để tạo một Style mới cho View đầu tiên, nhấp chuột phải vào nó và chọn Refactor > Extract > Style.

Bây giờ, bạn sẽ thấy một hộp thoại nơi bạn có thể đặt tên cho Style và cũng có thể chọn các thuộc tính sẽ được bao gồm trong nó. Hãy đặt tên là MyBox và chọn tất cả các thuộc tính trừ background.

Khi bạn bấm OK, bạn sẽ thấy code cho View đầu tiên đã thay đổi.

1

<View android:background="#009688"

2

    android:id="@+id/box1"

3

    style="@style/MyBox" />

View bây giờ có một thuộc tính style trỏ đến style MyBox. Bạn có thể tìm thấy một định nghĩa của style bằng cách mở res/values/styles.xml.

1

<style name="MyBox">

2

    <item name="android:layout_width">100dp</item>

3

    <item name="android:layout_height">100dp</item>

4

    <item name="android:layout_margin">5dp</item>

5

</style>

Sau khi một style đã được tạo ra, nó có thể được áp dụng vào bất kỳ View nào. Ví dụ, ở đây là cách bạn áp dụng MyBox vào View thứ hai:

1

<View android:background="#00BCD4"

2

    android:id="@+id/box2"

3

    style="@style/MyBox" />

Với các style đã được áp dụng, thì hai View sẽ trông như thế này trong một Activity:

2. Mở rộng Style

Android cho phép bạn tạo ra các style bằng cách sử dụng các style khác như là một nền tảng. Nói cách khác, nó cho phép bạn mở rộng các style hiện có.

Hiện có hai cú pháp khác nhau để bạn có thể làm theo khi mở rộng một style. Cú pháp đầu tiên được gọi là cú pháp tiềm ẩn và sử dụng một dấu chấm. Ví dụ, ở đây là cách bạn tạo hai style dẫn xuất, được gọi là TEAL và CYAN, bằng cách sử dụng MyBox như là style cha:

1

<style name="MyBox.TEAL">

2

    <item name="android:background">#009688</item>

3

</style>

4

5

<style name="MyBox.CYAN">

6

    <item name="android:background">#00BCD4</item>

7

</style>

Như bạn có thể thấy, MyBox.TEAL và MyBox.CYAN có tất cả các thuộc tính của MyBox. Ngoài những thuộc tính đó, chúng còn có thuộc tính android: background.

Cú pháp thứ hai cho việc tạo ra một style dẫn xuất thường được gọi là cú pháp rõ ràng. Nó liên quan đến việc sử dụng một thuộc tính parent mà có giá trị được thiết lập là tên của style cha. Dưới đây là một đoạn code xác định một style được gọi là TealBox.

1

<style name="TealBox" parent="MyBox">

2

    <item name="android:background">#009688</item>

3

</style>

Áp dụng các style dẫn xuất cũng không khác việc áp dụng những cái bình thường.

1

<View android:id="@+id/box1"

2

    style="@style/TealBox" />

3

4

<View android:id="@+id/box2"

5

    style="@style/MyBox.CYAN" />

Hầu hết các nhà phát triển sử dụng cú pháp tiềm ẩn khi mở rộng các style của riêng mình, và cú pháp rõ ràng khi mở rộng các style của nền tảng.

3. Tạo Theme

Cho đến lúc này, chúng ta chỉ mới áp dụng các style vào các View mà đang ở trong một Activity. Android cũng cho phép bạn áp dụng các style cho toàn bộ các Activity và các Application. Khi một style được áp dụng cho một Activity hoặc Application, nó sẽ trở thành một theme.

Mặc định, tất cả các ứng dụng được tạo ra bằng cách sử dụng phiên bản mới nhất của Android Studio sử dụng một theme được gọi là AppTheme. AppTheme là một con của theme AppCompat nổi tiếng là một theme lớn và rất toàn diện mà có thể ảnh hưởng đến giao diện của hầu như tất cả các View thường được sử dụng.

Bạn có thể tìm định nghĩa của AppTheme trong styles.xml:

1

<!-- Base application theme. -->

2

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

3

    <item name="colorPrimary">@color/colorPrimary</item>

4

    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

5

    <item name="colorAccent">@color/colorAccent</item>

6

</style>

AppTheme áp dụng theo Material Design. Vì vậy, để tạo theme của chính bạn phù hợp với đặc tả Material Design, hãy sử dụng AppTheme như là một theme cha. Ngoài ra, bạn có thể trực tiếp sử dụng Theme.AppCompat như là một theme cha.

Tuy vậy bạn luôn có thể tạo ra theme bằng cách viết code XML—Hãy nhớ rằng, chúng chỉ là các style—trong hướng dẫn này, tôi sẽ cho bạn thấy cách để sử dụng Theme Editor của Android Studio để làm tất cả công việc khó khăn cho bạn.

Để mở Theme Editor, mở menu Tools và chọn Android > Theme Editor.

Trên bên phải của cửa sổ Theme Editor, bạn có các control không chỉ để sửa đổi các theme, mà con để tạo ra những cái mới. Ở phía bên trái chỉ ra một bản xem trước của kết quả của các thay đổi mà bạn thực hiện với các theme.

Để tạo một theme mới, nhấp vào menu thả xuống Theme và chọn tuỳ chọn Create New Theme.

Trong hộp thoại bật lên, thiết lập tên của theme mới là MyTheme và nhấn OK.

Tại thời điểm này, styles.xml sẽ có một dòng mới trông giống như thế này:

1

<style name="MyTheme" parent="AppTheme" />

Bây giờ hãy sửa đổi MyTheme bằng cách sử dụng Theme Editor. Để đơn giản, trong hướng dẫn này chúng ta sẽ chỉ sửa đổi các giá trị của các thuộc tính colorPrimary, colorPrimaryDark và colorAccent.

Để sửa đổi giá trị của colorPrimary, bấm vào nút colorPrimary. Theme Editor bây giờ sẽ hiển thị cho bạn một hộp thoại có chứa một bảng chọn màu sắc. Chọn bất kỳ màu nào mà bạn muốn, nhưng hãy chắc chắn rằng bạn cung cấp cho nó một cái tên mới. Nếu bạn quên làm như vậy, thì Theme Editor sẽ ghi đè lên màu sắc được sử dụng bởi AppTheme.

Làm theo các bước tương tự để sửa đổi các giá trị của colorPrimaryDark và colorAccent. Theme Editor sẽ tự động sử dụng màu sắc bạn đã chọn cho colorPrimary để gợi ý các màu sắc thích hợp cho cả colorPrimaryDark và colorAccent.

Định nghĩa của MyTheme bây giờ trông giống như thế này:

1

<style name="MyTheme" parent="AppTheme" >

2

    <item name="colorPrimary">@color/colorPrimaryMyTheme</item>

3

    <item name="colorPrimaryDark">@color/colorPrimaryDarkMyTheme</item>

4

    <item name="colorAccent">@color/colorAccentMyTheme</item>

5

</style>

4. Áp dụng Theme

Trước khi chúng ta áp dụng theme mà chúng ta đã tạo ra, hãy thêm một vài View thường dùng vào Activity. Làm như vậy sẽ giúp dễ dàng hơn cho chúng ta để lưu ý những hiệu ứng của theme.

Các code sau đây tạo ra một Button thông thường, một Button không viền, một Button nhiều màu, một Checkbox, một RadioButton, một Switch, một Seekbar, một TextView và một EditText.

1

<Button android:layout_width="match_parent"

2

    android:layout_height="wrap_content"

3

    android:text="normal"

4

    android:id="@+id/normal_button" />

5

6

<Button android:layout_width="match_parent"

7

    android:layout_height="wrap_content"

8

    android:text="borderless"

9

    android:id="@+id/borderless_button"

10

    style="@style/Widget.AppCompat.Button.Borderless" />

11

12

<Button android:layout_width="match_parent"

13

    android:layout_height="wrap_content"

14

    android:text="colored"

15

    android:id="@+id/colored_button"

16

    style="@style/Widget.AppCompat.Button.Colored" />

17

18

<CheckBox android:layout_width="match_parent"

19

    android:layout_height="wrap_content"

20

    android:text="New CheckBox"

21

    android:id="@+id/checkBox" />

22

23

<RadioButton android:layout_width="match_parent"

24

    android:layout_height="wrap_content"

25

    android:text="New RadioButton"

26

    android:id="@+id/radioButton" />

27

28

<Switch android:layout_width="match_parent"

29

    android:layout_height="wrap_content"

30

    android:text="New Switch"

31

    android:id="@+id/switchButton" />

32

33

<SeekBar android:layout_width="match_parent"

34

    android:layout_height="wrap_content"

35

    android:id="@+id/seekBar" />

36

37

<TextView android:layout_width="match_parent"

38

    android:layout_height="wrap_content"

39

    android:text="New Text"

40

    android:id="@+id/textView" />

41

42

<EditText android:layout_width="match_parent"

43

    android:layout_height="wrap_content"

44

    android:id="@+id/editText"

45

    android:hint="Input" />

Với tất cả các View mới được thêm vào, layout sẽ trông giống như thế này:

Nếu bạn đã đọc đặc tả Material Design, tôi chắc chắn bạn có thể nói rằng Activity hiện tại sử dụng các sắc thái của màu chàm cho colorPrimary và colorPrimaryDark. Đối với colorAccent, nó sử dụng một sắc hồng. Đó là những màu mặc định được chỉ định bởi Android Studio. Bạn có thể tìm thấy mã hex tương ứng trong res/values/colors.xml trong dự án của bạn.

Để áp dụng MyTheme, theme mà chúng ta đã tạo ở bước trước, vào Activity của bạn, hãy mở tập tin manifest của dự án và thêm một thuộc tính android:theme vào định nghĩa Activity. Thiết lập giá trị của nó thành @style/MyTheme.

1

<activity android:name=".MainActivity"

2

    android:theme="@style/MyTheme">

3

    <intent-filter>

4

        <action android:name="android.intent.action.MAIN" />

5

        <category android:name="android.intent.category.LAUNCHER" />

6

    </intent-filter>

7

</activity>

Tương tự, bạn có thể áp dụng theme vào toàn bộ ứng dụng của bạn bằng cách thiết lập giá trị của thuộc tính android:theme của định nghĩa ứng dụng vào @style/MyTheme.

Nếu bạn nhìn vào Activity của bạn bây giờ, nó sẽ trông rất khác.

Tổng kết

Trong hướng dẫn này, bạn đã biết cách làm thế nào để tạo và áp dụng các Style và Theme tuỳ biến cho Android. Hãy sử dụng kiến thức này để tạo cho ứng dụng của bạn giao diện mới và tốt hơn. Tuy nhiên, cố gắng không đi quá đà—hầu hết người dùng Android ngày nay rất quen với Material Design mà nếu đi lệch so với nguyên tắc của nó có thể làm cho họ phiền lòng.

Để tìm hiểu thêm về style và theme, tôi đề nghị bạn hãy xem qua Hướng dẫn về Style và Theme.