white backgroud for png Image in android studio

Question

I'm trying to show some png images on RecyclerView, the images has transparent background but it show white background when run on device !!. I tried to add

android:background="@android:color/transparent"

to ImageView, but still white

I use Picasso to load the image on ImageView, like that

Picasso.get()
            .load(newpath)
                .into(itemView.imgMCat)

this the fragment which contain the RecyclerView

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
         android:background="@drawable/meskback"


             tools:context=".HomeFragment">

    <!-- TODO: Update blank fragment layout -->

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:weightSum="10">

        <Toolbar
                android:id="@+id/toolbar"
                android:background="@color/meskBlue"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:minHeight="?attr/actionBarSize"
                android:theme="?attr/actionBarTheme"
                android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                tools:targetApi="lollipop">

            <Button
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_gravity="right"
                    android:layout_margin="7dp"
                    android:id="@+id/mapiconbtn"
                    android:background="@drawable/mapicon"
            />

        </Toolbar>

        <LinearLayout
                android:layout_weight="6"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
        android:orientation="vertical">


            <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:weightSum="10"
                    android:orientation="vertical">

                <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:id="@+id/mainActivityRelayout1"
                        android:paddingTop="10dp"
                        android:layout_weight="5">
                    <ImageView
                            android:layout_width="90dp"
                            android:layout_height="90dp"
                            tools:srcCompat="@drawable/logo"
                            android:id="@+id/logoimg"
                            android:contentDescription="@string/logoimgdes"
                            android:src="@drawable/logo"
                            android:layout_centerHorizontal="true"
                            android:layout_marginTop="12dp"
                    />
                </RelativeLayout>

                <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:orientation="vertical"
                        android:layout_weight="5"
                        android:weightSum="2">
                    <TextView
                            android:layout_width="match_parent"
                            android:layout_height="0dp"
                            android:textSize="22sp"
                            android:layout_weight="1"
                            android:textStyle="bold"
                            android:gravity="center"
                            android:textColor="@color/meskBlue"
                            android:text="@string/welcome"
                            android:textAlignment="center"/>
                    <TextView
                            android:layout_width="match_parent"
                            android:layout_height="0dp"
                            android:layout_weight="1"
                            android:textSize="20sp"
                            android:textStyle="bold"
                            android:gravity="center"
                            android:layout_marginTop="20dp"
                            android:text="@string/how_can_we_help_you"
                            android:textAlignment="center"/>

                    />
                </LinearLayout>

            </LinearLayout>
        </LinearLayout>

    <LinearLayout
            android:orientation="vertical"
            android:layout_weight="4"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/McatRecylceView"/>

    </LinearLayout>

    </LinearLayout>


</FrameLayout>

and this is the item_view.xml which contain the ImageView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_margin="10dp">


    <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="140dp">

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

            <ImageView
                    android:id="@+id/imgMCat"
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:background="@android:color/transparent"
                    android:layout_centerInParent="true"
                    android:layout_marginTop="3dp" android:layout_marginStart="3dp"
                    android:layout_marginEnd="3dp" android:layout_marginBottom="3dp"/>
            <TextView
                    android:text="TextView"
                    android:id="@+id/mcategoryTitle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/imgMCat"
                    android:textAlignment="center"/>

        </RelativeLayout>
    </android.support.v7.widget.CardView>

</LinearLayout>

this photo for device

It depends on them you have set for the Activity in the AndroidManifest.xml, too. also check if you don't change background color in codes inside class. — Elias Fazel, Sep 19 '19 at 21:57
This link should help you. [how to add background image to activity?](https://stackoverflow.com/questions/3307090/how-to-add-background-image-to-activity) — Mohammad Sadegh Foroughi, Sep 19 '19 at 22:44
I mean, one of the actual image files, please. Not the `drawable` reference. — Mike M., Sep 19 '19 at 22:52
@MikeM. if you mean png image , this it is http://miskaldar.com/uploadimg/mcategory/1547760850.png — aqeel, Sep 19 '19 at 23:00
Thanks. That is what I meant. I was just checking, 'cause last time I got one of these questions, the OP thought their white background image was transparent because their image editor had a white background. Carry on. — Mike M., Sep 19 '19 at 23:05
It's hard to tell from the image: is there anything else in the `CardView`? The card could be providing the solid/opaque background. — Ben P., Sep 19 '19 at 23:07
a common mistake that would be causing the issue is that the image itself might not be a png and the designer tried to convert it by simply renaming from jpg to png, double check the source image if you are sure that everything else is correct — Mahmoud Omara, Dec 16 '20 at 11:44

score 1 · Answer 1 · answered Sep 20 '19 at 21:18

1

I found the answer here the problem was from CardView https://stackoverflow.com/a/45769769/2209611

I add these attribute and fix the problem

app:cardBackgroundColor="@android:color/transparent"
        app:cardElevation="0dp"

answered Sep 20 '19 at 21:18

aqeel

153
1
2
11

If you want no background and no shadow, why are you using CardView in the first place? Rounded corners might be one reason, but if you don't want or care about rounded corners, then I recommend using a `FrameLayout` instead. – Ben P. Sep 20 '19 at 22:13

score 0 · Answer 2 · answered Sep 20 '19 at 00:29

try this

<android.support.v7.widget.CardView
        android:scaleType="centerInside"
        android:layout_width="34dp"
        android:layout_height="34dp"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:elevation="12dp"
        android:shape="ring"
        app:cardCornerRadius="17dp">

        <ImageView
            android:id="@+id/avatar"
            android:layout_width="49dp"
            android:layout_height="49dp"
            android:layout_marginLeft="-8dp"
            android:layout_marginTop="-5dp"
            android:src="@drawable/blank" />

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

score 0 · Answer 3 · answered Sep 20 '19 at 01:14

the image loads without a problem, what you need to do is set the height and width to wrap content instead of having a fixed width and a match parent height, here's what you should do in the xml

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="80dp">

        <ImageView
                android:id="@+id/imgMCat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:layout_centerInParent="true"
                android:layout_marginTop="3dp" android:layout_marginStart="3dp"
                android:layout_marginEnd="3dp" android:layout_marginBottom="3dp"/>
        <TextView
                android:text="TextView"
                android:id="@+id/mcategoryTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/imgMCat"
                android:textAlignment="center"/>

    </RelativeLayout>

by setting the main layout to the sizes u want and then setting the imageview to wrap the content of the png you will have solved your problem

however, i would suggest that u never use fixed sizes for any UI components ever due to the amount of different devices with different screen sizes, if you use a fixed dimension UI elements then it's bound to be ruined on 1 screen or the other

white backgroud for png Image in android studio

3 Answers3