Why is android:clipChildren="false" not working? I want to achieve the same effect as the CSS overflow: visible so that the child views are visible even if they're positioned outside their parent layout. I tried something like this and although the Graphical Layout in Eclipse shows the correct behaviour, on the phone it doesn't work.
<?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"
android:background="#0000FF"
android:clipChildren="false"
android:clipToPadding="false" >
<RelativeLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:background="#FF0000"
android:clipChildren="false"
android:clipToPadding="false" >
<RelativeLayout
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="120dp"
android:background="#00FF00" />
</RelativeLayout>
</RelativeLayout>
I'm, trying something similar for now and it works only when I use booth android:clipChildren="false" on all parents a next problem is if under overlapped child is something that repaint itself like ListView, Android then forgot repaint our child and it disappear :-(
Only way is call .invalidate() manually on overlapped child after every repaint of view under it :-(
I also found that at least small peace of overlapped child must be in the its parent.
And another problem is with receive touch/click events in view which is outside of the parent. I not found any solution for it.
Related
According to the docs, child views in FrameLayout are drawn on top of each other with the most recently added view on top. I have notice though, that this seems to not be accurate in Lollipop or later. For example, in the following xml, the button is still visible even though it should be covered by my custom view.
It is worth mentioning that although my custom view extends FrameLayout, I do inflate a child view, so my FrameLayout isn't empty.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/some_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:text="button"/>
<mycustomframelayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"/>
</FrameLayout>
Any idea what I am missing here?
Buttons in Lollipop and higher have a default elevation to them which causes them to always draw on top. You can change this by overriding the default StateListAnimator.
Try putting this into your button XML:
android:stateListAnimator="#null"
The FrameLayout should now cover the button.
Try putting an elevation to the FrameCustom:
<mycustomframelayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:elevation="100dp"/>
Please refer to example below. I want to have the top layout (below encased in red) to be unmoving in a scrollview in my activity. I have a scrollview as the parent layout and then I thought having a relative layout for the top one would work, and align it to the top, but that didn't really work out as it still remained within the scrollview. I would like to have the users have the red-layout box remain static when they scroll down.
I figure I would also have to put in a topMargin at the top of the scrollview or something in order to fit the redbox layout in.
XML Code posted here: http://pastebin.com/bxdREbeG
Do something like this (hand code, for reference only):
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/YourTopStaticView"
android:layout_width="match_parent"
android:layout_height="48dp"> //Or any other height you want
//Contents of the top view
</RelativeLyout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/YourTopStaticView">
//Contents of the ScrollView
</ScrollView>
</RelativeLayout>
As a side note, do not hardcode children into the ScrollView like that. Use the RecyclerView (which is an updated, modern replacement for ListView), which you will be expected to know how to use if you want to move into serious Android programming. It is actually super easy to use, once you get the hang of it :-)
You should use the ScrollView with only one child (official documentation - http://developer.android.com/reference/android/widget/ScrollView.html). According to your xml, your ScrollView is very complicated with a lot of child widgets.
The best option for you is to use a LinearLayout as the root for the whole container, a LinearLayout( or Relative) for the top layout containing the Reset and Save buttons, and a ListView for the long list that you have. ListView takes care of it's own scrolling. So you don't have to worry about that.
This will improve your code performance as well.
This should suit your needs:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout android:id="#+id/topPanel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Multi TTS Implementation"/>
<Button android:id="#+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="SAVE"/>
<Button android:id="#+id/resetAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/save"
android:layout_centerVertical="true"
android:text="RESET ALL"/>
</RelativeLayout>
<ScrollView android:id="#id/scroll"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/topPanel"
android:layout_alignParentBottom="true"
android:padding="5dp">
<!-- Your scrollable content here -->
</ScrollView>
</RelativeLayout>
I have a really annoying problem with fitting two custom views to work together. I'm trying to display these two views in an android activity, but one of them takes the whole viewable space of the activity and the other is placed under it. The first view only uses a small part of the space and the rest is trasparent, but it only works when its width and height is at match_parent so the other view is displayed under it, but it is being blocked from receiving any touch events. here is how they looks like:
the xml code:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_app" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.fortysevendeg.android.swipelistview.SwipeListView
xmlns:swipe="http://schemas.android.com/apk/res-auto"
android:id="#+id/example_lv_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:listSelector="#00000000"
swipe:swipeActionLeft="dismiss"
swipe:swipeBackView="#+id/back"
swipe:swipeCloseAllItemsWhenMoveList="true"
swipe:swipeFrontView="#+id/front"
swipe:swipeMode="both"
android:focusableInTouchMode="true"/>
</LinearLayout>
<com.touchmenotapps.widget.radialmenu.semicircularmenu.SemiCircularRadialMenu
android:id="#+id/radial_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:padding="1dip" />
</FrameLayout>
What I'm trying to do is to be able to touch the bottom where the top view is transparent, and be able to touch the top view where it's not transparent. I tried arranging the xml in a different way but it keeps crashing, this is the only way it worked, but this problem appeared.
Links to the custom Views:
Radial-Menu-Widget: github.com/strider2023/Radial-Menu-Widget-Android
SwipeListView library: github.com/47deg/android-swipelistview
SwipeListView sample: github.com/47deg/android-swipelistview-sample
What I'm trying to accomplish here is something similar to Catch Notes app. If there are other ways, or other libraries you can suggest, it would be much appreciated.
Ok try this: copy the source code of SemiCircularRadialMenu.class in your project and modify
public boolean onTouchEvent(MotionEvent event)
Because this method always returns true and captures all touch events, so also the touch event for SwipeListView listener. I solved it in this way.
An old question, but others may find this answer helpful. Without modifying the source of your custom views, I don't think you can get the behavior you want. But getting the two custom views to work onto the same screen might be as simple as changing your root layout to a LinearLayout, adding weight to the inner layout, and setting the height of the second custom view to wrap_content. By having only one widget with a weight, it will get all the space left after the others are laid out. Here's your layout with the changes applied:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_app"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="100" >
<com.fortysevendeg.android.swipelistview.SwipeListView
xmlns:swipe="http://schemas.android.com/apk/res-auto"
android:id="#+id/example_lv_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:focusableInTouchMode="true"
android:listSelector="#00000000"
swipe:swipeActionLeft="dismiss"
swipe:swipeBackView="#+id/back"
swipe:swipeCloseAllItemsWhenMoveList="true"
swipe:swipeFrontView="#+id/front"
swipe:swipeMode="both" />
</LinearLayout>
<com.touchmenotapps.widget.radialmenu.semicircularmenu.SemiCircularRadialMenu
android:id="#+id/radial_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:padding="1dip" />
</LinearLayout>
If you need to height of the second view to be more expandable, you can wrap it in another LinearLayout with a weight and adjust the two weights to apportion the screen height between them. The individual weight values aren't special; it's their value relative to the sum of all the weights that determines how much height each one gets. I like to make my total values add up to 100 so I can think of the weights as percentages.
So I have an xml layout im using and it has two main elements, a framelayout that houses a camera preview, and a imageview. The image view is supposed to be visible over the framelayout and it is until the camerapreview is turned on then it gets pushed behind it. What am i doing wrong?
I've done a lot of testing removing elements from the layout and rebuilding and i cant seem to fix the cause of the error, i believe the cause must be somewhere in the code.
I think is supposed to get push behind it because is a RelativeLayout. I think you should use a LinearLayout. Also the attribute android:layout_weight="1" is an invalid parameter in RelativeLayout.
You can try and force the image view to align top:
<?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="390dip"
android:layout_marginTop="25dip">
<ImageView
android:id="#+id/imageView1"
android:layout_width="300dip"
android:layout_height="305dip"
android:background="#00000000"
android:layout_alignParentTop="true"
android:src="#drawable/try_3"
android:visibility="visible"
android:layout_marginLeft="10dip"/>
<FrameLayout
android:id="#+id/previewframe1"
android:layout_width="320dip"
android:layout_height="310dip"
android:layout_alignParentTop="true"
>
</FrameLayout>
</RelativeLayout>
Hope that helps.
Set the background of the ImageView and/or the layout it is contained in to android:background="#null" please for transparency.
I have a ScrollView on one of my screens. I want the right edge to have a shadow. I decided the easiest way to do this was to make the child of the ScrollView a RelativeLayout, and have two children of the RelativeLayout -- one being a LinearLayout that will house the layout of the screen, and the second View being the shadow.
Like so...
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/shadow"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</ScrollView>
Unfortunately, this doesn't quite work. The ImageView is forcing its dimensions to be the size of the image file. It will not stretch vertically to be the height of the RelativeLayout. I've also tried "match_parent" to no avail. The image is a 9-patch.
Ideas?
Applying drawable content as the source of an ImageView somewhat carries with it an inherent requirement that you want the view to do what it can to accomodate the content without modifying the content itself very much. Typically, this is the behavior you would want out of an ImageView.
What you really want is the behavior you get by setting drawable content as the background of a view, for which you don't really need ImageView at all. A background is designed to simply stretch, fill, etc. to whatever size the view is. Also, since you are using RelativeLayout you can tell the view to match the bound of the view you are shadowing by adding an id and some extra layout_alignparameters.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/content_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
<View
android:layout_width="11dp"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignTop="#id/content_layout"
android:layout_alignBottom="#id/content_layout"
android:background="#drawable/shadow"
/>
</RelativeLayout>
try this
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/ic_launcher"
android:scaleType="fitXY"
android:layout_alignParentRight="true"
/>
here is what I get
and code id
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollbars="none" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="#drawable/ic_launcher"
android:scaleType="fitXY" />
</RelativeLayout>
</ScrollView>
Your problem has nothing to do with the ImageView or 9-patch itself, but rather with the fact that you're wrapping everything in a ScrollView. A ScrollView will automatically force its children direct child to wrap its content, no matter whether you tell it to FILL_PARENT or MATCH_PARENT - both do exactly the same thing by the way; the only difference is the name, which reflects better the actual behaviour of the flag.
Fortunately ScrollView provides a way to force it to fill the viewport with a flag, which will make the behaviour pretty similar to setting FILL_PARENT to a regular view. Either add the attribute android:fillViewport or use setFillViewport() from code.
Edit: Just to be clear, you need to set that flag on the ScrollView. Also, if it's the ScrollView that should have the shadow, can you not send your 9-patch as background to it? I suppose it does depend on what your actual image looks like. Regarding you comment: yes, the RelativeLayout is flexible in terms of positioning and sizing children, but any child will still be bound to the size of its parent.
I do have the feeling that some of us may be working towards something different than what you have in mind. It would definitely help to clarify things with a simple drawing.
You wanted a Shadow towards the right of your image, Then use single layout with Horizontal Orientation, It's good that you have decide to use Relative Layout. Use
android:orientation="vertical"
inside this layout, add those two images. If you still have a doubt, give me those two images or sample images, i will give you the code