Faire une image circulaire avec une bordure circulaire blanche
Comment faire une image circulaire et lui donner une bordure circulaire blanche? Est-il nécessaire d'utiliser deux vues d'image, une pour l'image et l'autre pour la bordure blanche? Y a-t-un autre moyen de faire ça?
Essaye ça...
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;
}
Commencez par obtenir l’image Circulat avec votre code. Appliquez ensuite le code 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>
Ajoutez ensuite une mise en page relative et ajoutez-y une image view.Arrangez-la au centre de la mise en page relative.Et définissez cette forme de cercle comme arrière-plan Imageview. imageview margin vous obtiendrez l'effet de bordure souhaité. J'espère que cela vous aidera.
Ce n'est peut-être pas le meilleur moyen et vous ne pourrez peut-être pas modifier beaucoup de propriétés, mais c'est sûrement le moyen le plus simple. Je viens d'utiliser this library et j'ai créé une image circulaire comportant également une bordure.
Donc, voici ma solution:
First , je mets ceci dans mon build.grandle:
`compile 'com.github.siyamed:Android-shape-imageview:0.9.+@aar'`
Second , je mets ceci dans mon fichier de mise en page .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" />
Dans mon fichier .Java, voici comment je peux prendre ou définir l'image sur CircularImageView:
final com.github.siyamed.shapeimageview.CircularImageView photo = (com.github.siyamed.shapeimageview.CircularImageView) convertView.findViewById(R.id.photo);
photo.setBackgroundResource(R.drawable.female);
C'est tout ce que j'ai fait pour faire une image circulaire avec une bordure blanche.
Commencez par ajouter la ligne ci-dessous à build.gradle file
implementation 'de.hdodenhof:circleimageview:2.2.0'
puis ajoutez le code suivantXMLà 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"/>
Non, il n'est pas nécessaire que vous utilisiez deux vues d'image, une pour l'image et l'autre pour la bordure blanche. Vous pouvez créer un nouveau fichier XML comme ci-dessous
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>
puis réglez-le sur votre vue d'image. Comme ajouter ligne ci-dessous à votre image-vue.
Android:background="@drawable/border"
Voici un Nice tutorial for it.
dans ce tutoriel, ils utilisent une méthode: -
/* * Création d’une image en forme circulaire * /
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;
}
Pour créer une bordure autour de votre imageView:
Ajoutez ce XML dans votre dossier pouvant être dessiné:
=> arrondi.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>
Espérons que cela aidera
En utilisant ce link i, j'ai réussi à le créer, en utilisant FrameLayout et two RoundedImageView. La logique derrière ce que j'ai fait est que l'un est une vue wrapper et l'autre est la vue avec l'image de profil. Voici mon code
code 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>
Code Java:
profileWrapper.setImageResource(R.drawable.white_background);
profile.setImageResource(R.drawable.profile);
espérons que cela aide, si vous avez une confusion s'il vous plaît commenter ci-dessous.
J'ai essayé de conserver ImageView dans CardView et ai ajusté le rayon de CardView en conséquence.
NetworkImageView est celui de Volley Library. Idem Devrait également fonctionner avec 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>
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;
}