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...
Related
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>
I have a layout with a KenBurnsView and an ImageView over it (just a toggle button). When I click on the button a Ripple is generated but is drawn below the KenBurnsView.
Previously, when I had an Image view in replacement to the KenBurnsView the Ripple was drawn above the ImageView on the top.
Here is my layout:
<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:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background"
android:clickable="true"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="#dimen/nav_drawer_header_height">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.flaviofaria.kenburnsview.KenBurnsView
android:id="#+id/header_cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/cover_1" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/header_toggle"
android:layout_width="50dp"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:padding="10dp"
android:src="#drawable/toggle_down" />
</RelativeLayout>
</FrameLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/nav_toggle_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></RelativeLayout>
</LinearLayout>
This is my ripple drawable XML:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/white"
android:drawSelectorOnTop="true"> <!-- ripple color -->
</ripple>
This is how I am adding the ripple:
toggle.setBackground(getResources().getDrawable(R.drawable.ripple));
What is the problem because of which the Ripple gets drwan below the KenBurnsView? It used to work perfectly when there was an ImageView in place of the KenBurnsView?
Unbounded ripples are projected on to the first available background of an ancestor view. Trace up the view hierarchy from the ImageView that's hosting the ripple and you will find that the first available background is on the LinearLayout with identifier drawer.
If you set a transparent background on the RelativeLayout containing your ImageView, the first available background will be one that's rendered above the sibling view and you will get the desired effect.
Side note, that RelativeLayout should be replaced with a FrameLayout, which will provide the same effect with a less expensive layout pass.
as you can see from your own code ('setBackground') , you're setting the ripple as a BACKGROUND that's why it's being drawn on the background.
ImageView on android API 21 added this "hack" for the ripple android:drawSelectorOnTop="true". But the library you're using didn't add the same hack to it.
There's nothing wrong itself on your code. But this type of behavior cannot be guaranteed by the Android team for 3rd party libraries.
You have a few of options here that will vary on cleanliness, effort and performance:
check ImageView source code, clone the library, add the same hack that imageview used on it for the ripple. After it's working fine, make sure to pull request back to the library.
wrap your KenBurnsView with a FrameLayout and set the ripple using setForeground on the FrameLayout.
clone the library, add option to foreground drawable to it (similar to this How to set foreground attribute to other non FrameLayout view). Also make sure to pull request this valueable code back to the library.
I have a problem to make a proper layout for a special case. I experimented on that already for a while both in the designer and in code, but I couldn't find a solution, that's why I need your help.
I have to create a layout which should have a structure like pictured in the images below. It is mainly a combination of several linearLayouts. The problem I have is, that the picture can only be added within the code, because this layout is a detail view that displays information about items from a list.
On the top is the layout without an image place holder (no loaded picture - indicated in black), here the width of "linearLayout_BigLeft" is given by the width of the two buttons and the textView (which all have content) in the "linearLayout_BelowImage".
In the middle you see the layout after the picture has been loaded (image indictated in orange) in code. Depending on the aspect ratio of the android device the black colored gaps differ. I can't get the image to resize to the whole available height and adjusting its width accordingly. The "linearLayout_BelowImage" adjusts itself to the image size (the textView in it is getting wider).
On the bottom is the layout which shows the ideal state. The image always should use the whole available space in height and resize accordingly in width. The "linearLayout_BelowImage" adjusts itself to the image size (the textView in it is getting wider).
Question:
How can I get a layout (after the image is loaded in code) that looks like the bottom picture? The image, after loaded in code, has to resize itself, so it uses the whole available height and resizes its width accordingly. The "relativeLayout_Top" and the "linearLayout_BelowImage" have both fixed heights. The "scrollView_BigRight" adjusts itself based on the space that the "imageView_OrangeImage" doesn't need for itself.
I can deal with solutions that adjust the layout in code, after the image has been added, or solutions that makes the layout.xml itself flexilbe enough to deal with this situation.
Any help is highly appreciated. If you need any more information please let me know.
Below is the main content of my layout.xml, that is needed for this problem.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#color/white">
<RelativeLayout
android:id="#+id/relativeLayout_Top"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/blue" >
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout_Big"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#color/transparent" >
<LinearLayout
android:id="#+id/LinearLayout_BigLeft"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/transparent" >
<ImageView
android:id="#+id/imageView_OrangeImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/black" />
<LinearLayout
android:id="#+id/linearLayout_BelowImage"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/blue_white_blue" >
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/blue" />
<TextView
android:id="#+id/textView_BelowImageMiddle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/white" />
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/blue" />
</LinearLayout>
</LinearLayout>
<ScrollView
android:id="#+id/scrollView_BigRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/grey" >
</ScrollView>
</LinearLayout>
</LinearLayout>
android:adjustViewBounds="true"
This one’s a manual fix for “optimized” code in scaleType="fitCenter". Basically when Android adds an image resource to the ImageView it tends to get the width & height from the resource instead of the layout. This can cause layouts to reposition around the full size of the image instead of the actual viewable size.
AdjustViewBounds forces Android to resize the ImageView to match the resized image prior to laying everything else out. There are times where this calculation won’t work, such as when the ImageView is set to layout_width="0dip". If it’s not working, wrap the ImageView in a RelativeLayout or FrameLayout which handles the 0dip flexible size instead
get it from this site
OR
Mode android:scaleType="centerCrop" uniformly stretches the image to fill the entire container and trims unnecessary.
You can change the way it default scales images using the android:scaleType parameter. By the way, the easiest way to discover how this works would simply have been to experiment a bit yourself!
get it here
I'd like to display an image larger, in size, than a device's screen without resizing the image. It has to be centered on the screen. How can I do this?
use scrollview with image view and set height of that scroll view
Example
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/accountIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</ScrollView>
I noticed that I need to use normal (vertical) and horizontal ScrollView in order to scroll both directions. Let me know please if there is another way.
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scrollView" >
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/horizontalScrollView">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView3"
android:src="#drawable/big_map"/>
</HorizontalScrollView>
</ScrollView>
It started display form left upper corner of the image. If I tried to use android:layout_gravity="center" then I got white part on right or bottom. So centering is not working for me.
Option 2: use WebView control, and load it with image onCreate.
Derive from View, overwrite onDraw and draw it on the screen.
You can also work with framelayout. The layout can be bigger than the screen
I would like to place an image into the background of my activities. This image is effectively a circle shaped logo which will be semi-transparent, and should sit behind any other content on the UI. I will also offset it into the bottom corner.
What is the best way I can place this image without it become "squashed" (egg shaped) under varying screen dimensions? My app will operate in portrait mode only.
This is what I'm trying to achieve:
So far, I've placed my circle image onto 3 white rectangle canvases for the popular sized screens 480x854, 320x480 and 240x320 which seems to work, but I don't think its very solid.
Any tips?
This probably is not the perfect solution, and will require a bit of maintenance on the UI, but here's my thought:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginRight="-15dp"
android:layout_marginBottom="-15dp"
android:src="#drawable/circle"
/>
<!--Rest of Layout goes here-->
</FrameLayout>
Just wrap this around your current layout, and adjust the right and bottom margins to whatever negative margins you wish for the offsetting. This should work for any screen size, assuming you have drawables for each density.
EDIT: Yeah, you also shouldn't have to worry about a white rectangle this way, either. Just add the android:background tag to the FrameLayout with whatever color you want for the background, and save the logo as a transparent PNG.
I would do it like this, use a relative layout to have an ImageView in the background with on top of that a relative layout containing the rest of your layout
This way the image is as big as it can be keeping the correct dimensions
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:scaleType="centerInside"
android:src="#drawable/splash_picture"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<!-- rest of your layout -->
</LinearLayout>
</RelativeLayout>