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ả

Comments

  1. 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 ạ..?
    Cái ảnh tên frame là ảnh nào sao không thấy hở bạn..?

    ReplyDelete
  2. Không được...
    Không thể được..

    ReplyDelete
    Replies
    1. frame là cái code custom nha Bạn. Viết bài lộn tên :p

      Delete
    2. :) .. 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é..!

      Delete
    3. Khô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á

      Delete
    4. Tiện đây Lê Tú cho mình hỏi cái này với ạ..
      Mì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..

      Delete
    5. Rebuil lai project hoặc clean project lai di Ban.... nếu chưa được thử đọc 2 bài này nhé
      http://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

      Delete
    6. 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 ạ?

      Delete
    7. mình cxung khoog làm dc :(
      mình xin source code với ạ : vantuancfs@gmail.com

      Delete

Post a Comment

Popular posts from this blog

Tối ưu ListView với Viewholder trong lập trình ứng dụng android.

Lập trình android: Hiệu ứng khi xóa một item ra khỏi listview