PNG transparent backgrounds appearing black when using Android Studio

Question

The social icons below (for fb, twitter, mail and share) are circular PNGs with transparent backgrounds. When I use the code and exact same images in Eclipse, I get transparent background but when build and run with Android Studio, I get black backgrounds. See details below.

Images are the same. Code used in layout xml files:

 <LinearLayout
                android:id="@+id/ll_shareBtns"
                android:layout_width="@dimen/sharesection_width"
                android:layout_height="@dimen/sharesection_height"
                android:layout_gravity="center"
                android:background="@drawable/bg_sharebox"
                android:gravity="center"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/btn_facebook"
                    android:layout_width="@dimen/dimens_sharebtns"
                    android:layout_height="@dimen/dimens_sharebtns"
                    android:layout_marginLeft="@dimen/sharebtns_leftmargin"
                    android:layout_marginRight="@dimen/sharebtns_rightmargin"
                    android:background="@drawable/bg_facebookbtn"
                    android:gravity="center" />

                <Button
                    android:id="@+id/btn_twitter"
                    android:layout_width="@dimen/dimens_sharebtns"
                    android:layout_height="@dimen/dimens_sharebtns"
                    android:layout_marginLeft="@dimen/sharebtns_leftmargin"
                    android:layout_marginRight="@dimen/sharebtns_rightmargin"
                    android:background="@drawable/bg_twitterbtn"
                    android:gravity="center" />

                <Button
                    android:id="@+id/btn_email"
                    android:layout_width="@dimen/dimens_sharebtns"
                    android:layout_height="@dimen/dimens_sharebtns"
                    android:layout_marginLeft="@dimen/sharebtns_leftmargin"
                    android:layout_marginRight="@dimen/sharebtns_rightmargin"
                    android:background="@drawable/bg_emailbtn"
                    android:gravity="center" />

                <Button
                    android:id="@+id/btn_share"
                    android:layout_width="@dimen/dimens_sharebtns"
                    android:layout_height="@dimen/dimens_sharebtns"
                    android:layout_marginLeft="@dimen/sharebtns_leftmargin"
                    android:layout_marginRight="@dimen/sharebtns_rightmargin"
                    android:background="@drawable/bg_sharebtn"
                    android:gravity="center" />
            </LinearLayout>

When code compiled and run with Android Studio, I see this:

When code is compiled and run with Eclipse, I see this:

Quite Strange. Could difference in build tools version cause this problem too?

Answer 1

Its seems to be problem in Theme used in xml file .

-check it once if the theme is different in eclipse and Android Studio then you can correct it.

by changing the Theme on file style.xml

Hope this will helpful .thanks

Answer 2

Did you try testing your app in a device? This is a known bug with Android Studio where icon PNGs show a black box despite being transparent. I faced the same issue where I saw a black box background in Android Studio layout design preview but the image rendered correctly in the device. This link can give you more confidence - ic_stop_white_*dp.png background is black, not transparent