CODEWITHSUNDEEP
androidxmlandroid-studioandroid-layout
Kobaiashi
Kobaiashi

Reputation: 31

Semi transparent background in CardView Does not work properly

I have problem with CardView background opacity. I want to make my background semi transparent, but I have a weir bug that happens all the time. The best explanation will be a screenshot from my program.

Scr from displayed layout

I want this Layout to be all in the same semi transparent color. Instead what appears is this semi transparent color with more transparent rectangle inside. I don't know how to remove this rectangle from my layout. Code:

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginBottom="5dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="15dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        app:cardBackgroundColor="#66000000">


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_gravity="center">



                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:cardCornerRadius="15dp">


                <ImageView
                    android:id="@+id/flagImageView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:adjustViewBounds="true"
                    android:fontFamily="@font/changa_light"
                    android:scaleType="fitXY"
                    app:srcCompat="@mipmap/ic_launcher" />
                </androidx.cardview.widget.CardView>

                <TextView
                    android:id="@+id/flagTextView"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="TEST"
                    android:textColor="#ffffff"
                    android:gravity="center"
                    android:fontFamily="@font/changa_light"/>

            </LinearLayout>



    </androidx.cardview.widget.CardView>
    </LinearLayout>
</RelativeLayout>

Upvotes: 1

Views: 254

Answers (3)

Kobaiashi
Kobaiashi

Reputation: 31

SOLVED! I had to add app:cardElevation="0dp to the first CardView

Upvotes: 2

theoyuncu8
theoyuncu8

Reputation: 73

enclose the first cardView object in a frame layout, then give it elevation and keep it at the top (remember! elevation> = API 21) 

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/transparentColor"
            android:elevation="3dp"
            android:stateListAnimator="@null">
           <!-- into-->

        </FrameLayout>

Upvotes: 0

theoyuncu8
theoyuncu8

Reputation: 73

Is this what you want?

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="312dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="24dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="4dp"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:foreground="?attr/selectableItemBackground"
    app:cardBackgroundColor="@color/sisman2"
    app:cardCornerRadius="20dp"
    app:cardElevation="2dp">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="8dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:ellipsize="end"
                android:gravity="center"
                android:singleLine="true"
                android:text="HELLO"
                android:textSize="24sp" />


        </RelativeLayout>


        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="248dp"
            android:elevation="0dp"
            app:cardCornerRadius="20dp"
            app:cardElevation="0dp">


        </androidx.cardview.widget.CardView>

    </RelativeLayout>

</androidx.cardview.widget.CardView>

Upvotes: 0

Related Questions