Comment ajouter une image circulaire autour d'une image circulaire
Je veux ajouter une ombre autour de circulaire imageView . Voici mon code . Je veux faire comme cette image 
Ceci est mon fichier .xml Cochez cette image. 
activity_main.xml
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent" >
<RelativeLayout
Android:id="@+id/layoutTop"
Android:layout_width="match_parent"
Android:layout_height="200dp"
Android:background="#355482" >
</RelativeLayout>
<RelativeLayout
Android:id="@+id/layoutBottom"
Android:layout_width="match_parent"
Android:layout_height="0dp"
Android:layout_alignParentBottom="true"
Android:layout_below="@+id/layoutTop"
Android:background="@drawable/loading" >
<TextView
Android:id="@+id/textView1"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_alignParentTop="true"
Android:layout_centerHorizontal="true"
Android:layout_marginTop="113dp"
Android:text="Profile"
Android:textColor="#355482"
Android:textSize="20dp"
Android:textStyle="bold" />
</RelativeLayout>
<ImageView
Android:id="@+id/overlapImage"
Android:layout_width="150dp"
Android:layout_height="150dp"
Android:layout_alignParentTop="true"
Android:layout_centerHorizontal="true"
Android:layout_marginTop="132dp"
Android:adjustViewBounds="true"
Android:background="@drawable/round_image"
Android:src="@drawable/ic_launcher" />
c'est round_image.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="oval">
<solid Android:color="#ffffff" />
<corners Android:radius="2dp"/>
<size
Android:height="80dp"
Android:width="80dp" />
<padding
Android:bottom="0dp"
Android:left="0dp"
Android:right="0dp"
Android:top="0dp" />
</shape>
J'essaie du code pour l'effet d'ombre mais cela ne fonctionne pas.
J'espère que ceci vous aidera:)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item>
<shape Android:shape="oval">
<solid Android:color="@color/gray"/>
<!--shadow Color-->
</shape>
</item>
<item
Android:left="0dp"
Android:right="0dp"
Android:top="0dp"
Android:bottom="3dp">
<shape Android:shape="oval">
<solid Android:color="@color/lightgrey"/>//Background Color
</shape>
</item>
</layer-list>
Changez la couleur d'arrière-plan et la couleur d'ombre comme vous le souhaitez.
Créez un fichier circle_shadow.xml et utilisez ce code, ça marche bien pour moi. Modifiez le rayon en fonction de vos besoins.
circle_shadow.xml
<!-- Drop Shadow -->
<item>
<shape Android:shape="oval">
<padding
Android:bottom="1dp"
Android:left="1dp"
Android:right="1dp"
Android:top="1dp" />
<solid Android:color="#00CCCCCC" />
<corners Android:radius="3dp" />
</shape>
</item>
<item>
<shape Android:shape="oval">
<padding
Android:bottom="1dp"
Android:left="1dp"
Android:right="1dp"
Android:top="1dp" />
<solid Android:color="#10CCCCCC" />
<corners Android:radius="3dp" />
</shape>
</item>
<item>
<shape Android:shape="oval">
<padding
Android:bottom="1dp"
Android:left="1dp"
Android:right="1dp"
Android:top="1dp" />
<solid Android:color="#20CCCCCC" />
<corners Android:radius="3dp" />
</shape>
</item>
<item>
<shape Android:shape="oval">
<padding
Android:bottom="1dp"
Android:left="1dp"
Android:right="1dp"
Android:top="1dp" />
<solid Android:color="#30CCCCCC" />
<corners Android:radius="3dp" />
</shape>
</item>
<item>
<shape Android:shape="oval">
<padding
Android:bottom="1dp"
Android:left="1dp"
Android:right="1dp"
Android:top="1dp" />
<solid Android:color="#50CCCCCC" />
<corners Android:radius="3dp" />
</shape>
</item>
<!-- Background Color (white) -->
<item>
<shape Android:shape="oval">
<solid Android:color="@Android:color/white" />
<corners Android:radius="3dp" />
</shape>
</item>
Avant de répondre, je veux donner quelques conseils. Il vous suffit de mettre le titre de votre question dans Google. J'ai essayé de chercher comme imageview circulaire avec shadow Android :
Sans utilisation de la bibliothèque:
Changez Android:color="#BDBDBD" dans la balise shape . Votre round_image.xml sera comme:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="oval">
<solid Android:color="#BDBDBD" />
<corners Android:radius="2dp"/>
<size
Android:height="80dp"
Android:width="80dp" />
<padding
Android:bottom="0dp"
Android:left="0dp"
Android:right="0dp"
Android:top="0dp" />
</shape>
Utiliser la bibliothèque:
Avez-vous essayé ceci CircularImageView
Vous pouvez utiliser cette bibliothèque ou, si vous ne voulez pas l’utiliser, récupérez du code dans le dossier inner res de cette bibliothèque.
Je vous remercie.
Cette classe est une image circulaire personnalisée avec ombre, trait, saturation et en utilisant cette image circulaire personnalisée, vous pouvez créer votre image en forme circulaire avec rayon. Les gars pour Shadow Circular ImageView Pas besoin Github cette classe est assez. Ajout de CircularImageView à votre mise en page racine dynamiquement.
*Adding Circular ImageView to your layout dynamically*
RelativeLayout rootLayout= (RelativeLayout) findViewById(R.id.rootLayout);
rootLayout.addView(new CircularImageView(this,200,200,imageBitmap));
public CircularImageView(Context context, int width, int height, Bitmap bitmap) {
super(context);
this.context = context;
this.width = width;
this.height = height;
------> here "bitmap" is the square shape(width* width) scaled bitmap ..
this.bitmap = bitmap;
Paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Paint.setAntiAlias(true);
Paint.setFilterBitmap(true);
Paint.setDither(true);
Paint3=new Paint();
Paint3.setStyle(Paint.Style.STROKE);
Paint3.setColor(Color.WHITE);
Paint3.setAntiAlias(true);
paintBorder = new Paint();
imagePaint= new Paint();
paintBorder.setColor(Color.WHITE);
paintBorder.setAntiAlias(true);
this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
this.bitmap2 = Bitmap.createScaledBitmap(bitmap, (bitmap.getWidth() - 40), (bitmap.getHeight() - 40), true);
imagePaint.setAntiAlias(true);
invalidate();
}
@Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Shader b;
if (bitmap3 != null)
b = new BitmapShader(bitmap3, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
else
b = new BitmapShader(bitmap2, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
imagePaint.setShader(b);
canvas.drawBitmap(maskedBitmap(), 20, 20, null);
}
private Bitmap maskedBitmap()
{
Bitmap l1 = Bitmap.createBitmap(width,width, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(l1);
paintBorder.setShadowLayer(radius, x, y, Color.parseColor("#454645"));
Paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
final RectF rect = new RectF();
rect.set(20, 20, bitmap2.getWidth(), bitmap2.getHeight());
canvas.drawRoundRect(rect, corner_radius, corner_radius, paintBorder);
canvas.drawRoundRect(rect, corner_radius, corner_radius, imagePaint);
if (strokeWidth!=0.0f)
{
Paint3.setStrokeWidth(strokeWidth);
canvas.drawRoundRect(rect, corner_radius, corner_radius, Paint3);
}
Paint.setXfermode(null);
return l1;
}
------> use seekbar here, here you have to pass "0 -- 250" here corner radius will change ..
public void setCornerRadius(int corner_radius)
{
this.corner_radius = corner_radius;
invalidate();
}
-------->use seekbar here, here you have to pass "0 -- 10.0f" here shadow radius will change
public void setShadow(float radius)
{
this.radius = radius;
invalidate();
}
----> use seekbar here, here you have to pass "0 -- 10.0f" here stroke size will change
public void setStroke(float stroke)
{
this.strokeWidth = stroke;
invalidate();
}
private Bitmap updateSat(Bitmap src, float settingSat)
{
int w = src.getWidth();
int h = src.getHeight();
Bitmap bitmapResult =
Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvasResult = new Canvas(bitmapResult);
Paint paint = new Paint();
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.setSaturation(settingSat);
ColorMatrixColorFilter filter = new ColorMatrixColorFilter(colorMatrix);
Paint.setColorFilter(filter);
canvasResult.drawBitmap(src, 0, 0, Paint);
return bitmapResult;
}
--------> use seekbar here, here you have to pass "0 -- 2.0f" here saturation will change
public void setSaturation(float sat)
{
System.out.println("qqqqqqqqqq "+sat);
bitmap3=updateSat(bitmap2, sat);
invalidate();
}
}
--------> Seekbar to change radius
radius_seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
{
text_radius.setText(""+progress);
circularImageView.setCornerRadius(progress);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
// Seekbar to change shadow
shadow_seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
{
float f= 4+progress/10.0f;
text_shadow.setText(""+progress);
circularImageView.setShadow(f);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
// Seekbar to change saturation
saturation_seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
{
int progressSat = saturation_seekbar.getProgress();
float sat = (float) ((progressSat*4 / 100.0f)-1.0f);
circularImageView.setSaturation(sat);
text_saturation.setText(""+progressSat);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
// Seekbar to change stroke
stroke_seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
{
if (progress==0)
{
float f=(progress*10.0f/100.0f);
circularImageView.setStroke(f);
}
else
{
float f=(progress*10.0f/100.0f);
circularImageView.setStroke(f);
}
text_stroke.setText(""+progress);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
//radius seekbar in xml file
<SeekBar
Android:layout_width="match_parent"
Android:layout_gravity="center"
Android:progress="50"
Android:max="250"
Android:id="@+id/radius_seekbar"
Android:layout_height="wrap_content" />
//saturation seekbar in xml file
<SeekBar
Android:layout_width="match_parent"
Android:layout_gravity="center"
Android:progress="50"
Android:max="100"
Android:id="@+id/saturation_seekbar"
Android:layout_height="wrap_content" />
//shadow seekbar in xml file
<SeekBar
Android:layout_width="match_parent"
Android:layout_gravity="center"
Android:progress="0"
Android:max="100"
Android:id="@+id/shadow_seekbar"
Android:layout_height="wrap_content" />
//stroke seekbar in xml file
<SeekBar
Android:layout_width="match_parent"
Android:layout_gravity="center"
Android:progress="0"
Android:max="100"
Android:id="@+id/stroke _seekbar"
Android:layout_height="wrap_content" />