Cách custom bo tròn cạnh imageView trong android
Xin chào các Bạn. Hiện nay trong quá trình thiết kế giao diện ứng dụng cho Android mình thấy có rất nhiều Bạn gặp vấn đề trong việc bo tròn hình ảnh khi hiển thì. Nay mình mạo muội làm hẳn một bài để hướng dẫn các Bạn custom imageview theo kiểu bo tròn bằng XML.
Và thực ra hiện nay mình thấy rất nhiều người hay hỏi làm sao bo tròn ở 4 góc cảu một hình ảnh trong quá trình thiết kế giao diện. Mà thực chất imageview không thể chỉnh sửa 4 góc được, Và cũng có nhiều cách để chính sửa như chỉnh sửa bitmap gốc, ghi đè hoặc cho ảnh gốc vào khung nhưng những cách đó thì luôn có một vấn đề sảy ra đó là "Automagically."
Nhưng sau khi xem bài viết này của mình Bạn có thể bo tròn hình ảnh trong android trực tiếp bằng XML. Nào các bạn hãy cùng thức hiện với mình nhé. Hoặc có thể download soure code ở đây.
1. Đầu tiên bạn hãy tạo một dự án mới Khuyến khích tạo trên Android Sutdio nhé.
2. Trong thư mục / res / drawable các Bạn tạo cho mình một file XML tên tùy ý. Ở đây mình đặt là "frame.xml ".
<?xml version="1.0" encoding="utf-8"?> <shape xmlns: android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#00ffffff" /> <padding android:left="6dp" android:top="6dp" android:right="6dp" android:bottom="6dp" /> <corners android:radius="12dp" /> <stroke android:width="6dp" android:color="#000" /> </shape>Chú ý : 1. Dòng code này sẽ quyết định độ bo tròn của hình ảnh
<corners android:radius="12dp" />2. Dòng này quyết định độ rộng đường bo tròn cái hình và màu cho đường đó
<stroke android:width="6dp" android:color="#000" />3. Padding các Bạn có thể sét hoặc không nhé 4. Để có được demo thì mình cũng cần phải có 1 file ảnh demo. ở đây các Bạn coppy thẩy nó vào drawable-xhdpi luôn đi cho khỏe nhá. Ở đây mình sử dụng hình này làm demo.
4. Tại main_activity.xml mình sẽ có code như sau. Lưu ý, hình ảnh mình đưa vào hình gốc là vuông nha các Bạn.
5. Kết quả
Sau khi viết code bên custom_image rồi thì mình thêm ảnh nào cũng bo tròn phải không ạ..?
ReplyDeleteCái ảnh tên frame là ảnh nào sao không thấy hở bạn..?
Không được...
ReplyDeleteKhông thể được..
frame là cái code custom nha Bạn. Viết bài lộn tên :p
Delete:) .. Mình thấy thắc mắc nên thử thử tùm lum rồi thay tên .XML vô.. Nó ra thật... :D Cảm ơn Lê Tú Blogger nhé..!
DeleteKhông có gì đâu Bạn, tại dạo này không ol thường xuyên nên ít thăm blog còn vài cái hay ho mà lười viết quá
DeleteTiện đây Lê Tú cho mình hỏi cái này với ạ..
DeleteMình bị lỗi như sau giờ vẫn chưa sửa được:
Process 'command '/Library/Java/JavaVirtualMachines/jdk1.8.0_60.jdk/Contents/Home/bin/java'' finished with non-zero exit value 1
Bạn giúp mình sửa lỗi này với..
Rebuil lai project hoặc clean project lai di Ban.... nếu chưa được thử đọc 2 bài này nhé
Deletehttp://stackoverflow.com/questions/32164882/spring-boot-app-fails-to-bootrun
http://stackoverflow.com/questions/33596377/errorexecution-failed-for-task-appdexdebug-after-dependency-is-placed-corre
Sao mình làm như bạn nhưng vẫn bị hiển thị khung vuông nhỉ? Bạn có thể cho mình xin source code k ạ?
Deletemình cxung khoog làm dc :(
Deletemình xin source code với ạ : vantuancfs@gmail.com