CODEWITHSUNDEEP
androidandroid-layoutandroid-fragments
Vikram Gehlot
Vikram Gehlot

Reputation: 31

Set Cardview Shape & Background Semi transparent

I have added a background Image in a linear layout and a Card View. Under CardView I added another background image of gradient and set alpha .5. When I add TextView and added Text, the text also got semi-transparent as shown in the image. I tried using Bold appearance but it didn't work. I have uploaded the Image

   <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout 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="com.vikramgehlot.QuotesandStatus.Apj"
     android:background="@drawable/materialbackground" >
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="215dp"
         android:orientation="vertical">
         <ImageView
             android:layout_marginTop="0dp"
             android:layout_width="match_parent"
             android:layout_height="215dp"
             android:src="@drawable/ic_format_quote_black_24dp" />
 <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <android.support.v7.widget.CardView
       android:layout_margin="10dp"
         android:layout_width="350dp"
         android:layout_height="70dp"
         app:cardCornerRadius="40dp"
         android:alpha=".5">
         <LinearLayout
             android:layout_margin="6dp"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:background="@drawable/rectangle"
             android:alpha=".5">
             <TextView
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:gravity="fill"
                 android:text="Don’t let a mad world tell you that success is anything other than a successful present moment. "
                 android:textColor="@color/black"
                 android:textStyle="bold"
                 android:textSize="13dp"
               />
         </LinearLayout>
     </android.support.v7.widget.CardView>
 </LinearLayout>
     </LinearLayout>
    </ScrollView>
     </LinearLayout>

Upvotes: 3

Views: 10712

Answers (5)

Chintan Parmar
Chintan Parmar

Reputation: 2535

After setting the cardBackgroudColor as said in other answers, if you are getting some shady border around the cardview, then make sure to set the elevation to 0dp.

    app:cardBackgroundColor="@color/blue60"
    app:cardCornerRadius="20dp"
    app:cardElevation="0dp"

Upvotes: 0

Moses Ejim
Moses Ejim

Reputation: 37

You can give transparency to the hexadecimal color. Each percentage of transparency has a unique code, as mentioned with more details here.

You can just create a color with transparency in your color file and set it as the card background. For example:

<color name="semiTransparentColor">#40FFFFFF</color>

means 25% opacity on a white color.

Upvotes: 4

Arjunraj kokkadan
Arjunraj kokkadan

Reputation: 488

Just Define a color in the colors.xml with a color with low opacity, And make it as the background of your cardview.

Edit for Example code

colors.xml

<color name="semiTransparentColor">#20ffffff</color>

and on the CardView set this attribute

card_view:cardBackgroundColor="@color/semiTransparentColor"

This will give you a glass like card.

note : the percentage of opacity you give to the color will be the opacity of the card

Upvotes: 0

Daniel Szabo
Daniel Szabo

Reputation: 31

The TextView's opacity changed because it is a child of your CardView. Place it above the CardView by placing the TextView and CardView separately in a Layout that enables overlapping and then centering them. This way you can set different alphas for your views. Try the XML below.

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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="com.vikramgehlot.QuotesandStatus.Apj"
        android:background="@drawable/materialbackground" >
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="215dp"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="215dp"
                    android:layout_marginTop="0dp"
                    android:src="@drawable/ic_format_quote_black_24dp" />

                <RelativeLayout
                    android:layout_width="350dp"
                    android:layout_height="70dp"
                    android:alpha="1">

                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">

                        <android.support.v7.widget.CardView
                            android:layout_width="350dp"
                            android:layout_height="70dp"
                            android:alpha="1"
                            android:visibility="visible"
                            app:cardCornerRadius="40dp">

                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_margin="6dp"
                                android:alpha=".5"
                                android:background="@drawable/rectangle">

                            </LinearLayout>
                        </android.support.v7.widget.CardView>
                    </FrameLayout>

                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:alpha="1"
                            android:gravity="fill"
                            android:text="Don’t let a mad world tell you that success is anything other than a successful present moment. "
                            android:textAllCaps="false"
                            android:textColor="@color/black"
                            android:textSize="13dp"
                            android:textStyle="bold" />
                    </FrameLayout>

                </RelativeLayout>

            </LinearLayout>
        </ScrollView>
    </LinearLayout>

Upvotes: 0

Abhijeet Kumar
Abhijeet Kumar

Reputation: 361

By setting alpha of cardview to 0.5 you are making all its descendent views also have an alpha of 0.5. You should make the background of linearlayout i.e. @drawable/rectangle have a color with alpha(ARGB eg #98000000) instead of setting alpha of 0.5 to linearlayout and cardview.

Upvotes: 3

Related Questions