Hướng dẫn tự tạo theme cho android năm 2024

android:layout_height="100dp"

android:layout_margin="5dp" 2

0

2

1

Như bạn có thể thấy trong code ở trên, các thuộc tính chẳng hạn như

2

02 và

2

03 đượ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ừ

2

04.

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

1

2

3

2

2

5

3

2

7

View bây giờ có một thuộc tính

2

05 trỏ đến style

2

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

2

9

2

android:layout_height="100dp"  

3

android:layout_height="100dp"  

4

android:layout_height="100dp"  

5

android:layout_height="100dp"  

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

2

06 vào View thứ hai:

1

android:layout_height="100dp"  

2

3

1

3

2

7

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

2

06 như là style cha:

1

3

5

2

3

7

3

3

9

4

5

android:layout_margin="5dp"  

android:layout_margin="5dp" 5

android:layout_height="100dp" 7

Như bạn có thể thấy,

2

09 và

2

10 có tất cả các thuộc tính của

2

06. Ngoài những thuộc tính đó, chúng còn có thuộc tính

2

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

2

13 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

android:layout_margin="5dp"  

2

3

7

3

android:layout_height="100dp"  

Á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

4

5

2

4

7

3

4

android:background="

5

android:background="

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à

2

14.

2

14 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

2

14 trong styles.xml:

1

android:background="

2

android:background="

3

android:background="

4

5

1

5

5

3

android:layout_height="100dp" 7

2

14 á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

2

14 như là một theme cha. Ngoài ra, bạn có thể trực tiếp sử dụng

2

19 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

5

7

Bây giờ hãy sửa đổi

2

20 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

2

21,

2

22 và

2

Để sửa đổi giá trị của

2

21, 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

2

14.

Làm theo các bước tương tự để sửa đổi các giá trị của

2

22 và

2

23. Theme Editor sẽ tự động sử dụng màu sắc bạn đã chọn cho

2

21 để gợi ý các màu sắc thích hợp cho cả

2

22 và

2

Định nghĩa của

2

20 bây giờ trông giống như thế này:

1

5

9

2

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

3

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

4

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

5

android:layout_height="100dp"  

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

2

32 thông thường, một

2

32 không viền, một

2

32 nhiều màu, một

2

35, một

2

36, một

2

37, một

2

38, một

2

39 và một

2

40.

1

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

2

3

4

5

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

2

0

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

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

2

21 và

2

22. Đối với

2

23, 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

2

20, 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

2

45 vào định nghĩa Activity. Thiết lập giá trị của nó thành

2

46.

1

2

3

4

5

2

01