Как сделать изображение круговым и дать ему белую круговую границу? Нужно ли использовать два изображения - одно для изображения и другое для белой границы? Есть ли другой способ сделать это?
Создание кругового изображения с белой круговой рамкой
Ответ 1
Попробуйте это...
public static Bitmap getCircularBitmapWithWhiteBorder(Bitmap bitmap,
int borderWidth) {
if (bitmap == null || bitmap.isRecycled()) {
return null;
}
final int width = bitmap.getWidth() + borderWidth;
final int height = bitmap.getHeight() + borderWidth;
Bitmap canvasBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
BitmapShader shader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(shader);
Canvas canvas = new Canvas(canvasBitmap);
float radius = width > height ? ((float) height) / 2f : ((float) width) / 2f;
canvas.drawCircle(width / 2, height / 2, radius, paint);
paint.setShader(null);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.BLUE);
paint.setStrokeWidth(borderWidth);
canvas.drawCircle(width / 2, height / 2, radius - borderWidth / 2, paint);
return canvasBitmap;
}
Ответ 2
Сначала получите код Circulat с кодом. Затем примените этот xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<gradient android:startColor="#333440" android:endColor="#333440"
android:angle="270"/>
</shape>
Затем добавьте относительный макет и добавьте изображение в него. Внесите его в центр относительной компоновки. И установите эту форму круга в качестве фона изображения. Затем разместите свое круговое изображение выше ранее добавленного изображения. Отправляйте его также в центр. изменяя круговое изображение, вы получите желаемый эффект границы. Надеюсь, это поможет вам.
Ответ 3
Это может быть не самый лучший способ, и вы не сможете изменить много свойств, но это, безусловно, самый простой способ. Я просто использовал эту библиотеку, и я сделал круговое изображение, которое также имеет границу.
Итак, это мое решение:
Сначала, я помещаю это в свой build.grandle:
`compile 'com.github.siyamed:android-shape-imageview:[email protected]'`
Второй, я помещаю это в файл макета .xml:
<com.github.siyamed.shapeimageview.CircularImageView
android:layout_width="150dp"
android:layout_gravity="center_horizontal"
android:layout_height="150dp"
android:id="@+id/photo"
app:siBorderWidth="5dp"
app:siBorderColor="#ffffff"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
В моем .java файле, это способ, которым я могу взять или установить изображение в CircularImageView:
final com.github.siyamed.shapeimageview.CircularImageView photo = (com.github.siyamed.shapeimageview.CircularImageView) convertView.findViewById(R.id.photo);
photo.setBackgroundResource(R.drawable.female);
Это все, что я сделал для создания кругового изображения с белой рамкой.
Ответ 4
Сначала добавьте строку ниже в файл build.gradle
implementation 'de.hdodenhof:circleimageview:2.2.0'
затем добавьте следующий XML- код в XML- файл:
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
Ответ 5
Нет, нет необходимости, чтобы вы использовали два изображения для одного изображения и другое для белой границы. Вы можете создать один новый XML файл, как показано ниже
border.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<stroke android:width="5dp" android:color="#000000" />
<padding android:left="5dp" android:top="5dp" android:right="5dp"
android:bottom="5dp" />
</shape>
а затем установите его на изображение. Как добавить строку ниже к вашему представлению изображения.
android:background="@drawable/border"
Ответ 6
Вот хороший учебник.
в этом учебнике используется метод: -
/* * Создание изображения в круглой форме */
public Bitmap getRoundedShape(Bitmap scaleBitmapImage) {
// TODO Auto-generated method stub
int targetWidth = 50;
int targetHeight = 50;
Bitmap targetBitmap = Bitmap.createBitmap(targetWidth,
targetHeight,Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(targetBitmap);
Path path = new Path();
path.addCircle(((float) targetWidth - 1) / 2,
((float) targetHeight - 1) / 2,
(Math.min(((float) targetWidth),
((float) targetHeight)) / 2),
Path.Direction.CCW);
canvas.clipPath(path);
Bitmap sourceBitmap = scaleBitmapImage;
canvas.drawBitmap(sourceBitmap,
new Rect(0, 0, sourceBitmap.getWidth(),
sourceBitmap.getHeight()),
new Rect(0, 0, targetWidth,
targetHeight), null);
return targetBitmap;
}
Для обеспечения границы вокруг вашего изображения:
Добавьте этот xml внутри вашей доступной папки:
= > rounded.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="@android:color/white" />
<stroke
android:width="3dip"
android:color="#FF0000" />
<corners android:radius="10dp" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
Надеюсь, это поможет
Ответ 7
Try This
public static Bitmap createRoundImage(Bitmap loadedImage) {
System.out.println("loadbitmap" + loadedImage);
loadedImage = Bitmap.createScaledBitmap(loadedImage, 100, 100, true);
Bitmap circleBitmap = Bitmap.createBitmap(loadedImage.getWidth(),
loadedImage.getHeight(), Bitmap.Config.ARGB_8888);
BitmapShader shader = new BitmapShader(loadedImage,
Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(shader);
Canvas c = new Canvas(circleBitmap);
c.drawCircle(loadedImage.getWidth() / 2, loadedImage.getHeight() / 2,
loadedImage.getWidth() / 2, paint);
return circleBitmap;
}
Ответ 8
XML-код:
<FrameLayout
android:id="@+id/llImageProfile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="40dp"
android:foregroundGravity="center">
<com.pepperpk.frt.mallpk.custom.RoundedImageView
android:id="@+id/circleViewOverlay"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center" />
<com.pepperpk.frt.mallpk.custom.RoundedImageView
android:id="@+id/circleView"
android:layout_width="95dp"
android:layout_height="95dp"
android:layout_gravity="center" />
</FrameLayout>
Код JAVA:
profileWrapper.setImageResource(R.drawable.white_background);
profile.setImageResource(R.drawable.profile);
надеюсь, что это поможет, если у вас возникли какие-либо проблемы, прокомментируйте ниже.
Ответ 9
Я попытался сохранить ImageView внутри CardView и скорректированный радиус CardView соответственно.
NetworkImageView является одним из библиотеки Volley. То же самое должно работать и с ImageView.
<android.support.v7.widget.CardView
android:layout_width="105dp"
android:layout_height="105dp"
android:layout_margin="5dp"
android:elevation="0dp"
android:id="@+id/card_image_view"
app:cardCornerRadius="53dp"
android:innerRadius="0dp"
android:background="@color/reco_widget_search_background"
android:shape="ring"
android:thicknessRatio="1">
<NetworkImageView
android:id="@+id/circle_networkImageViewProduct"
android:layout_width="105dp"
android:layout_height="105dp"
android:backgroundTint="@color/white"
android:tint="@color/white"
android:scaleType="fitXY"
android:layout_gravity="center"
android:visibility="gone"
/>
</android.support.v7.widget.CardView>
Ответ 10
Попробуйте следующее:
<html>
<head>
<style type="text/css">
img {
border: 30px solid #FFFFFF;
border-radius: 130px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
body {
background: #000;
}
</style>
<meta charset="utf-8">
<title>try</title>
</head>
<body>
<img src="http://icons.iconarchive.com/icons/danleech/simple/1024/google-icon.png" width="48" height="48" alt=""/>
</body>
</html>