I know similar questions asked a lot of times but this one is different. I've got a background image and I am supposed to use this for ImageViews. Picture is not rectangular and not transparent, you can view it from here or see below
This is what I've tried:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#999999"
android:padding="10dp"
android:gravity="center">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="170dp">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rounded_background"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/random_pic"
android:scaleType="fitXY"/>
</FrameLayout>
</LinearLayout>
and result looks like this:
When I remove the ImageView result is this:
As you can see, ImageView doesn't have the same shape as background. I've tried several different methods as well, like
putting background directly to the ImageView, or
changing the View to ImageView and use the rounded image as background, or source image of it
they had no effect. I've also tried to change the order, I've put the View after the ImageView, but then since the rounded background is not transparent, I couldn't see the ImageView, all I saw was the white background image.
It is not possible to achieve without changing the rounded_background.png file itself, right? Cause I know that if the background was transparent it would've worked.
Thanks
EDIT: There is no way to achieve this without changing the image. If one wants to learn the only way to achieve that, he/she should see the accepted answer.
Here is your problem solution.
make your background image transparent like this.
set your main image as FrameLayout background image.
and this background is ImageView background image.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="#drawable/randominage">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rounded_background"
android:scaleType="fitXY" />
</FrameLayout>
Related
I'm using Glide library for downloading images and displaying them in my adapter, the problem is, after it sets the images, they get a background that is not in the downloaded image, the ImageView added this color to them
this is an example:
as you can see it has a very light green background color, the image it self has white background.
things I've tried so far:
set white background color in my xml layout
set transparent background color
used View.setBackgroundColor(Color.TRANSPARENT) in my adapter
used View.setBackgroundColor(0x00000000) in adapter
nothing worked...
how can I get rid of it?
::EDit
the layout file attached :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/flag"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:backgroundTint="#fff"
android:background="#fff" />
</RelativeLayout>
Look at the image, which has a white background. Try to add a transparent image and your problem will be solved. I removed the background of that image. Look at the difference between these two images.
The idea is to have a screen that's mostly translucent (the image behind is darkened) with a small square in the middle that allows you to see the image in full brightness. I can't just make two layouts with the transparent one on top, that would just make it invisible with the whole screen being translucent.
You can use a view that has as a background a bitmap that is mostly translucent except for a transparent hole. To see how to create such a bitmap in code, take a look at this thread or this one.
Alternatively, you can create a 9-patch that does the same thing. You can decide what part of the 9-patch should be stretchable (i.e., whether the transparent center is a fixed size or whether the translucent surrounding is a fixed width).
You could use an XML drawable or a nine patch. I'm curious if something like this would work:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:background="#dd999999"
android:layout_toLeftOf="#+id/center_point"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:background="#dd999999"
android:layout_above="#+id/center_point"/>
<View
android:id="#+id/center_point"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_centerInParent="true"
/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#dd999999"
android:layout_below="#+id/center_point"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:background="#dd999999"
android:layout_toRightOf="#+id/center_point"/>
</RelativeLayout>
It's super caveman with overdraw and expensive layouts and the backgrounds will probably blend and darken, but I think it fits what you describe.
I've got a problem with my application. I've a image which goes across the whole screen (ImageView) with this code in xml:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:src="#drawable/achtergrond"
android:scaleType="fitCenter" />
My problem is that the image is centered in the imageview itself. It needs to be centered up as you can see in the next picture:
The left image is what I have, with the image in the middle. The right is what I want, the image should be up in the whole layout, I need to set my image to match_parent to have it fill as background (I didn't set it as background because it would be stretched then).
I hope I'm missing something obvious! Thanks for helping me in advance!
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/achtergrond"
android:scaleType="fitStart" />
I have a FrameLayout that has a background, and contains a ViewPager that I can slide through Views. I also have a PNG image that I want to use as a mask on the ViewPager, so that I can retain my background, but only show a portion of the ViewPager element. In essence, I want to create a custom masking effect as shown here but instead of applying that to an image, I want to apply that to a View. How can I do this?
I started out with:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:padding="4dip"
android:gravity="center_horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/mask"/>
</FrameLayout>
The image I'm using basically has a cutout in the PNG file so there's a transparent portion. The problem with using this technique is there's a portion of the image that has a gradient. By doing a proper mask, I was hoping that characters would "fade" in but instead, it's now just starkly appearing as in you can see the edge of where it appears, so it's not pretty. If anyone has better ideas how to mask it cleanly, I'm open to them...
This is my Android list_item layout XML:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:paddingRight="?android:attr/scrollbarSize"
android:background="#drawable/list_bg">
<TextView
android:id="#+id/tv_displayname"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:ellipsize="end"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
This is the list_bg image:
and yet here is what it looks like when shown in Android emulator:
I can see that the background is being applied because there is a slight gradient effect to it, but I have no idea where this black overlay is coming from!
have you tried a different image to see if that one does the same thing? to me it looks like it is creating the image behind the list in your RelativeLayout and your textview background is on top. since you are setting it to fill the width of the row, i bet if you just set to wrap_content you would see it behind there
try putting the image as your TextView background instead