CardView to make a circle background, show oval background

Question

I followed this post

and tried to make a transparent circle background around my X verctor Image.

  <android.support.design.card.MaterialCardView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:innerRadius="0dp"
      android:shape="ring"
      android:thicknessRatio="0"
      app:cardCornerRadius="24dp"
      card_view:cardElevation="0dp"
      card_view:cardMaxElevation="0dp">
    <ImageView
        android:id="@+id/close_button"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="top|end"
        android:padding="@dimen/account_menu_close_button_padding"
        android:alpha="0"
        android:background="?attr/selectableItemBackground"
        android:contentDescription="@string/og_close_icon_a11y"
        android:focusable="true"
        android:theme="@style/myStyle"
        android:visibility="gone"
        app:srcCompat="@drawable/quantum_gm_ic_close_vd_theme_24"
        />
  </android.support.design.card.MaterialCardView>

However I keep on getting: 1) oval shape 2) thing white border

How can I fix these both?

Why don't you use a floating action button instead? I think what's happening is that you have some padding in the icon that makes the card be pushed on the top/bottom. Try removing the padding on the `ImageView`. — Javier Mendonça, May 30 '19 at 12:52
floating action button can be transparent with no elevation? — Elad Benda, May 30 '19 at 12:56
Well I never tried but you can definitely set elevation to 0 and background to `@android:color/transparent`. But if you want something like a button without elevation or anything why don't you use the ImageView with a circular drawable as background? That would work. — Javier Mendonça, May 30 '19 at 13:06

score 1 · Answer 1 · answered May 30 '19 at 13:00

Try this way

<com.google.android.material.card.MaterialCardView
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_gravity="center"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="0"
    app:cardBackgroundColor="@color/colorAccent"
    app:cardCornerRadius="24dp"
    app:cardElevation="0dp"
    card_view:cardMaxElevation="0dp">

    <ImageView
        android:id="@+id/close_button"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="top|end"
        android:background="?attr/selectableItemBackground"
        android:contentDescription="@string/app_name"
        android:focusable="true"
        android:visibility="visible"
        app:srcCompat="@drawable/ic_close" />

</com.google.android.material.card.MaterialCardView>

OUTPUT

OUTPUT in device

can you explain the diff? and why? – Elad Benda May 30 '19 at 13:02 — Elad Benda, May 30 '19 at 13:02
@EladBenda yes better to use FAB – AskNilesh May 31 '19 at 05:17 — AskNilesh, May 31 '19 at 05:17

CardView to make a circle background, show oval background

1 Answers1