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

Answer 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"

Answer 2

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

Answer 3

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>