ImageView in circular through xml

前端 未结 27 1001
死守一世寂寞
死守一世寂寞 2020-11-22 10:35

I\'d Like to make any image from my ImageView to be circular with a border.

I searched but couldn\'t find any useful information (anything that I tried

相关标签:
27条回答
  • 2020-11-22 10:41

    This will do the trick:

    rectangle.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <solid android:color="@android:color/transparent" />
        <padding android:bottom="-14dp" android:left="-14dp" android:right="-14dp" android:top="-14dp" />
    
    </shape>
    

    circle.xml

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:innerRadius="0dp"
        android:shape="oval"
    
        android:useLevel="false" >
        <solid android:color="@android:color/transparent" />
    
        <stroke
            android:width="15dp"
            android:color="@color/verification_contact_background" />
    
    </shape>
    

    profile_image.xml ( The layerlist )

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    
        <item android:drawable="@drawable/rectangle" />
        <item android:drawable="@drawable/circle"/>
    
    </layer-list>
    

    Your layout

     <ImageView
            android:id="@+id/profile_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/default_org"
            android:src="@drawable/profile_image"/>
    
    0 讨论(0)
  • 2020-11-22 10:41

    You can simply use CardView without any external Library

      <androidx.cardview.widget.CardView
                        android:id="@+id/roundCardView"
                        android:layout_width="40dp"
                        android:layout_height="40dp"
                        android:layout_centerHorizontal="true"
                        android:elevation="0dp"
                        app:cardCornerRadius="20dp">
    
                        <ImageView
                            android:layout_width="40dp"
                            android:layout_height="40dp"
                            android:src="@drawable/profile" />
    </androidx.cardview.widget.CardView>
    
    0 讨论(0)
  • 2020-11-22 10:42

    Create a CustomImageview then simply override its onDraw() method follows:

    @Override
    protected void onDraw(Canvas canvas) {
    
        float radius = this.getHeight()/2;
        Path path = new Path();
        RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
        path.addRoundRect(rect, radius, radius, Path.Direction.CW);
        canvas.clipPath(path);
        super.onDraw(canvas);
    
    }
    

    In case you want the code for the custom widget as well:-

    CircularImageView.java

    import android.content.Context;
    import android.content.res.TypedArray;
    import android.graphics.Canvas;
    import android.graphics.Path;
    import android.graphics.RectF;
    import android.graphics.drawable.Drawable;
    import android.util.AttributeSet;
    import android.widget.ImageView;
    
    import androidx.annotation.Nullable;
    
    public class CircularImageView extends ImageView {
    
        private Drawable image;
    
        public CircularImageView(Context context) {
            super(context);
    
            init(null, 0);
        }
    
        public CircularImageView(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
    
            init(attrs, 0);
        }
    
        public CircularImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
    
            init(attrs, defStyleAttr);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
    
            float radius = this.getHeight()/2;
            Path path = new Path();
            RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
            path.addRoundRect(rect, radius, radius, Path.Direction.CW);
            canvas.clipPath(path);
            super.onDraw(canvas);
    
        }
    
        private void init(AttributeSet attrs, int defStyle) {
            TypedArray a = Utils.CONTEXT.getTheme().obtainStyledAttributes(attrs, R.styleable.CircularImageView, 0, 0);
            try {
                image = a.getDrawable(R.styleable.CircularImageView_src);
            } finally {
                a.recycle();
            }
    
            this.setImageDrawable(image);
        }
    }
    

    Also, add the following code to your res/attrs.xml to create the required attribute:-

    <declare-styleable name="CircularImageView">
            <attr name="src" format="reference" />
    </declare-styleable>
    
    0 讨论(0)
  • 2020-11-22 10:42

    This is a relatively old question, but you can just make a circle border in the drawable folder (let's assume the xml file will be called circle_border)

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns="http://schemas.android.com/apk/res/android"
        android:shape="oval">
    
        <solid android:color="@android:color/transparent" />
    
        <!-- If you want a padding -->
        <padding android:top="4dp" android:left="4dp" android:right="4dp" android:bottom="4dp" />
    
        <!-- If you want the circle border to have a color -->
        <strong android:width="1dp" android:color="#FFFFFF" />
    
    </shape>
    

    Then you can use it as the background of the ImageView

    <ImageView
        android:background="@drawable/circle_border"
        <!-- other attributes here -->
    />
    
    0 讨论(0)
  • 2020-11-22 10:43

    As was described in Orhan Obut's answer but with the changes:

    <ImageView
        android:layout_width="0dp"  //or use your own value
        android:layout_height="match_parent"
        android:src="@drawable/img"
        android:layout_weight="75" />// in case of use of weight
    

    to avoid stretches of the image. And img.xml:

    <?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/profile" />
    <item android:drawable="@drawable/circle" /></layer-list>
    

    (without changes), and circle.xml:

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="2"
    android:shape="ring"
    android:thickness="300dp"
    android:useLevel="false">
    <solid android:color="@android:color/white"/>
    <stroke
        android:width="2dp"
        android:color="@android:color/black"/>
    </shape>
     
    

    here the thickness of the ring gotten maximal - 1000dp
    and radiusRatio is a half of image width(max ring width, yes?) - 2
    and the stroke is for required border if needed.
    I used square png image ( profile.png ), btw. With same width and height. This is correct for arbitrary ImageView dimentions.

    0 讨论(0)
  • 2020-11-22 10:45

    Just use the ShapeableImageView provided by the Material Components Library.
    Somethig like:

    <com.google.android.material.imageview.ShapeableImageView
        app:shapeAppearanceOverlay="@style/roundedImageViewRounded"
        app:strokeColor="@color/....."
        app:strokeWidth="1dp"
        ...
        />
    

    with:

      <style name="roundedImageViewRounded">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
      </style>
    

    Note: it requires at least the version 1.2.0-alpha03.

    0 讨论(0)
提交回复
热议问题