CardView: углы изображения не закруглены в Android 4.3?

Версия Android Studio: 2.3.3, Android 4.3

Я использую CardView и хочу закруглить углы изображения.

Макет:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="@dimen/card_width"
    android:layout_height="@dimen/card_width"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">
    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        card_view:cardCornerRadius="15dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/img_lights" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

Как вы можете, я установил

card_view:cardCornerRadius="15dp

Вот результат:

Не круглое изображение

Но углы изображения не закруглены. Почему?


person user8542613    schedule 04.10.2017    source источник
comment
Возможный дубликат Как сделать ImageView с закругленными углами?   -  person Pavneet_Singh    schedule 04.10.2017


Ответы (5)


Попробуйте этот класс для изображения с круглым углом

public class RoundedCornerImageLayout extends FrameLayout {
private final static float CORNER_RADIUS = 30.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);
 }
}

В XML

<com.utils.RoundedCornerImageLayout 
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:layout_margin="@dimen/dimen_5">

                    <ImageView
                        android:id="@+id/img1"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@color/scout_report_color"
                        android:scaleType="fitXY" />
                </com.utils.RoundedCornerImageLayout>
person Android Geek    schedule 19.08.2019

Как указано в документах. атрибута cardUseCompatPadding:

CardView добавляет дополнительные отступы для отрисовки теней на платформах перед Lollipop.

Это может привести к тому, что карты будут иметь разные размеры между Lollipop и до Lollipop. Если вам нужно согласовать CardView с другими представлениями, вам могут понадобиться ресурсы измерений для конкретной версии API для учета изменений. В качестве альтернативы вы можете установить для этого флага значение true, и CardView добавит те же значения заполнения на платформах Lollipop и более поздних версиях.

Примените app:cardUseCompatPadding="true" к своему CardView.

person azizbekian    schedule 04.10.2017
comment
Обновленный ответ. - person azizbekian; 05.10.2017
comment
Я ответил тем же здесь ниже. Но я удивлен, что он сказал, что это не работает, и проголосовал против! Как это у него не работает? @азизбекян - person Xenolion; 14.10.2017

Добавить в app

To be

app:cardCornerRadius="15dp"
app:cardUseCompatPadding="true"

Затем импортируйте необходимые значения!

person Xenolion    schedule 04.10.2017
comment
Не поможет: xmlns:app="http://schemas.android.com/apk/res-auto" app:cardCornerRadius="15dp - person user8542613; 04.10.2017
comment
Я нашел проблему. Это потому, что я запускаю Android 4.3. Если запускаю на Android 6.0 - то все ок. - person user8542613; 04.10.2017
comment
Я нашел вашу вещь, добавьте это на макет. Я отредактировал ответ. Также подумайте о том, чтобы проголосовать, если это сработает! - person Xenolion; 04.10.2017
comment
К сожалению не поможет. Работает только на Android 5.0+ - person user8542613; 05.10.2017

Отступы, которые вы видите, являются результатом поддержки более ранней версии, чем API 20. Чтобы ваши макеты выглядели одинаково как в виджете pre-Lollipop (и виджете pre-CardView), так и Lollipop и новее< /strong>, Android представил некоторые дополнительные атрибуты.

Поскольку перекрытие содержимого — закругление углов — было затруднено для более старых версий Android, файл cardPreventCornerOverlap добавлен и по умолчанию имеет значение true. Вот почему вокруг вашего изображения белые полосы.

Чтобы удалить этот отступ, отключите cardPreventCornerOverlap. Ты можешь это сделать:

  • через xml от card_view:cardPreventCornerOverlap="false"

  • или программно с помощью yourCardView.setPreventCornerOverlap(false).

Имейте в виду, что это дает вам эффект, который вы хотите, только для API 20+. На устройствах со старыми версиями системы ваши закругленные углы будут невидимы (спрятаны под незакругленным изображением).

Чтобы узнать больше, ознакомьтесь с документом CardView. В первом абзаце вы можете найти официальную заметку о вашей проблеме.

person paulina_glab    schedule 06.10.2017

Попробуйте добавить следующий рисунок в качестве фона вашего изображения.

<ImageView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:scaleType="centerCrop"
     android:background="drawable/rounded"
     android:src="@drawable/img_lights" />

drawable/rounded.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

  <solid android:color="#FFFFFF" />
  <corners android:radius="15dp" />

</shape>
person Pehlaj - Mobile Apps Developer    schedule 05.10.2017
comment
Я знал, что по форме я могу это сделать. Но я хочу сделать это только с помощью элемента CardView. - person user8542613; 05.10.2017