Tạo giao diện người dùng bằng tệp đính kèm hình ảnh
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Gemini trong Android Studio được trang bị các tính năng đặc biệt để giúp bạn hiện thực hoá ý tưởng về giao diện người dùng của ứng dụng Android, bằng cách sử dụng Jetpack Compose và tuân theo các phương pháp hay nhất của Android.
Trang này mô tả các bước chung để tạo giao diện người dùng ứng dụng bằng Gemini. Để biết thêm thông tin về tệp đính kèm hình ảnh và những ý tưởng khác về cách sử dụng tính năng này, hãy xem phần Đính kèm hình ảnh vào câu hỏi.
Để tạo giao diện người dùng bằng Gemini, hãy làm theo các bước chung sau:
Tạo bản mô phỏng giao diện người dùng của ứng dụng mà bạn muốn. Khung dạng đường viền hoặc thiết kế cơ bản là phù hợp nhất. Bạn có thể xuất tệp PNG từ một công cụ thiết kế hoặc thậm chí sử dụng hình ảnh vẽ tay.
Đính kèm hình ảnh vào câu hỏi của bạn bằng cách nhấp vào Đính kèm tệp hình ảnh.
Trong trường trò chuyện, hãy yêu cầu Gemini tạo mã giao diện người dùng, ví dụ: "Tạo mã Jetpack Compose cho hình ảnh được cung cấp". Khi bạn gửi câu hỏi và hình ảnh, Gemini sẽ đề xuất mã để tạo giao diện người dùng được đề xuất. Gemini thường cung cấp mã cho bản xem trước Compose, vì vậy, bạn có thể nhanh chóng hình dung giao diện người dùng sau khi nhập vào dự án của mình. Nếu không, hãy yêu cầu Gemini tạo bản xem trước Compose.
Sau khi nhập mã và có thể xem trước Compose trong bảng xem trước, bạn có thể lặp lại giao diện người dùng bằng cách nhấp trực tiếp vào bản xem trước và yêu cầu Gemini chuyển đổi giao diện người dùng đó.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-07-31 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-07-31 UTC."],[],[],null,["# Generate UI with image attachments\n\n| **Preview:** Enable image attachment through [Studio Labs](/studio/gemini/attach-image).\n| **Note:** Image attachment is currently available in Gemini's no-cost tier.\n\nGemini in Android Studio is uniquely equipped to help you make your Android app\nUI vision a reality, using Jetpack Compose and following Android best practices.\nThis page describes the general steps to creating an app UI with Gemini. For\nmore information about image attachment and other ideas for how to use the\nfeature, see [Attach an image to your query](/studio/gemini/attach-image).\n\nTo generate a UI with Gemini, follow these general steps:\n\n1. Create a mockup of the app UI that you want. A wireframe or basic design\n works best. You can export a PNG from a design tool or even use a hand drawn\n image.\n\n2. Attach the image to your query by clicking **Attach image file**\n .\n\n3. In the chat field, ask Gemini to generate the UI code, for example \"Generate\n Jetpack Compose code for the image provided.\" When you submit the query and\n image, Gemini suggests code to create the proposed UI. Gemini usually\n provides the code for the\n [Compose preview](/develop/ui/compose/tooling/previews) too, so you can\n quickly visualize the UI once you import the into your project---if it doesn't,\n ask it to\n [generate Compose the previews](/studio/gemini/generate-compose-previews).\n\n4. Once you import the code and can see the Compose preview in the preview\n panel, you can iterate on the UI by clicking directly on the preview and\n [asking Gemini to transform it](/studio/gemini/transform-ui)."]]