[英]Imageview not showing rounded corners
I am trying to make my layout like this but i am not able to make my imageview like this with rounded corners.我正在尝试使我的布局像这样,但我无法使我的 imageview 像这样带有圆角。 It shows perfectly in Android studio's layout editors but in real device i am getting flat corners.
它在 Android 工作室的布局编辑器中完美显示,但在真实设备中我得到了平角。 I tired via XML and also with code but none working for me.
我厌倦了 XML 以及代码,但没有一个对我有用。 Please help me to make my layout like this sample image.
请帮我制作像这个示例图像一样的布局。
My layout file我的布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:clickable="true"
android:background="?android:attr/colorBackground"
android:focusable="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="170dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/User_CoverPhoto"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:background="@drawable/round_shape_only"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/User_CoverPhoto"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/User_ProfilePictures"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:layout_width="230dp"
android:layout_height="match_parent"
android:background="@drawable/round_shape_only"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/User_ProfilePictures"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:background="#40000000"
android:backgroundTint="#CC000000"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Profile Picture"
android:textColor="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/User_ProfilePictures"
app:layout_constraintHorizontal_bias="0.01"
app:layout_constraintStart_toStartOf="@+id/User_ProfilePictures" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:background="#40000000"
android:backgroundTint="#CC000000"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Cover Photo"
android:textColor="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/User_CoverPhoto" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingTop="13dp"
android:id="@+id/Grid_Recycler">
</androidx.recyclerview.widget.RecyclerView>
</RelativeLayout>
XML for round shape XML 圆形
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#CCCCCC"/>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"/>
<corners android:radius="15dp"/>
</shape>
Just use the ShapeableImageView
in the Material Components library.只需使用 Material Components 库中的
ShapeableImageView
。
Something like:就像是:
<com.google.android.material.imageview.ShapeableImageView
...
app:shapeAppearanceOverlay="@style/roundedCornersImageView"
app:srcCompat="@drawable/ic_image" />
with:和:
<style name="roundedCornersImageView" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">xxdp</item>
</style>
*Note: it requires at least the version 1.2.0-alpha03
. *注意:它至少需要
1.2.0-alpha03
版本。
You can use Glide您可以使用滑翔
Just write extension function for ImageView:只需为 ImageView 编写扩展名 function:
To make rectangle image with rounded corners制作圆角矩形图像
fun ImageView.loadImageWithCustomCorners(@DrawableRes resId: Int, radius: Int) = Glide.with(this).load(resId).transform(RoundedCorners(radius)).into(this)
To make square image with rounded corners制作带圆角的方形图像
fun ImageView.loadImageWithCustomCorners(@DrawableRes resId: Int, radius: Int) = Glide.with(this).load(resId).transform(CenterCrop(), RoundedCorners(radius)).into(this)
Using in code在代码中使用
iv_service_avatar.loadImageWithCustomCorners(R.drawable.ic_default_avatar, 15)
iv_service_avatar it`s ImageView ID iv_service_avatar 是 ImageView ID
You should call setClipToOutline
to true
when using background
with radius
it only calls programmatically can not set by XML当使用具有
radius
的background
时,您应该调用setClipToOutline
为true
,它只能以编程方式调用,不能由 XML 设置
imageView.setClipToOutline(true);
you can put your ImageView
to a CardView
and use the app:cardCornerRadius
for set image corner您可以将
ImageView
放入CardView
并使用app:cardCornerRadius
设置图像角
For Rounded Corner you can use following Custom Layout:对于圆角,您可以使用以下自定义布局:
Java: RoundedCornerImageLayout.java
Java:圆角图像布局。java
public class RoundedCornerImageLayout extends FrameLayout {
private final static float CORNER_RADIUS = 10.0f;
private float cornerRadius;
public RoundedCornerImageLayout(Context context) {
super(context);
init(context, null, 0);
}
public RoundedCornerImageLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs, 0);
}
public RoundedCornerImageLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context, attrs, defStyle);
}
private void init(Context context, AttributeSet attrs, int defStyle) {
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
cornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CORNER_RADIUS, metrics);
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
@Override
protected void dispatchDraw(Canvas canvas) {
int count = canvas.save();
final Path path = new Path();
path.addRoundRect(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), cornerRadius, cornerRadius, Path.Direction.CW);
canvas.clipPath(path, Region.Op.INTERSECT);
canvas.clipPath(path);
super.dispatchDraw(canvas);
canvas.restoreToCount(count);
}
}
You can change the private final static float CORNER_RADIUS = 10.0f;
您可以更改
private final static float CORNER_RADIUS = 10.0f;
according to your requirement根据您的要求
in XMl file
在 XMl 文件中
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".RoundedImageViewActivity">
<com.example.stackdemo.ui.RoundedCornerImageLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/ocean"
android:scaleType="centerCrop"/>
</com.example.stackdemo.ui.RoundedCornerImageLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Output for above code is:上述代码的 Output 是:
I hope this helps you我希望这可以帮助你
Use androidx.cardview.widget.CardView
in such way:以这种方式使用
androidx.cardview.widget.CardView
:
<androidx.cardview.widget.CardView
android:layout_width="148dp"
android:layout_height="148dp"
card_view:cardCornerRadius="4dp"
>
<ImageView
android:id="@+id/some_id"
android:layout_width="148dp"
android:layout_height="148dp"
android:layout_gravity="center_vertical"
android:radius="10dp"
android:scaleType="fitXY"
tools:background="#EDEDED" />
</androidx.cardview.widget.CardView>
card_view
will be unresolved, so in order to resolve it, add xmlns:card_view="http://schemas.android.com/apk/res-auto"
to the root element. card_view
将无法解析,因此为了解决它,请将xmlns:card_view="http://schemas.android.com/apk/res-auto"
添加到根元素。
Here's the link to docs: https://developer.android.com/guide/topics/ui/layout/cardview#CardView这是文档的链接: https://developer.android.com/guide/topics/ui/layout/cardview#CardView
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.