I'm looking for a way to overlay a drop shadow onto a ScrollView like this:
My intention is to have another layout above and outside the ScrollView (the green one) that stays at the top while scrolling the content of the ScrollView. The ScrollView should have a drop shadow overlay at the top which appears to be from the layout above.
Since I want the content of the ScrollView to scroll into the drop shadow, that shadow must not be part of the layout above, otherwise the drop shadow would stay seperated from the scrolling contents below.
Any ideas how I can bring that drop shadow to life?
I found android:foreground but then read that it wouldn't work on ScrollViews.
Ok, found a solution to do this. This is what I did:
To have a drop shadow image overlay on the ScrollView, I put the ScrollView inside a FrameLayout and applied the drop shadow drawable to the FrameLayout via android:foreground.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="#drawable/drop_shadow_bitmap"
android:foregroundGravity="top|fill_horizontal" >
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top" >
Related
I would like to display on the bottom of the view frame layout which has some layouts inside of the FrameLayout hidden and are displayed after some button click. I would like to display the FrameLayout to start from bottom of the screen above all other views.
How can i do it in the right way please?
Many thanks for any advice.
I have implemented something similar to what you would like to achieve...first of all you should place your entire Activity of Fragment layout inside a CoordinatorLayout. Then you should place the FrameLayout which you want to show above all other views as the last View inside the CoordinatorLayout. You could give the FrameLayout a fixed height(200px) and the same negative value as margin bottom(-200px) so it can not be visible in the first place. And after some button click you can animate your desired view (in this case FrameLayout) to overlap all other views starting from the bottom of the screen.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
//Your views here
<FrameLayout //Your FrameLayout
android:layout_width="match_parent"
android:layout_height="200px" android:layout_marginBottom="-200px">
//Place whatever views you prefer here
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
Since Android Support Library 23.2 you can use Materials Bottom Sheets like the Google Map one:
Include the support design library (use the most recent version):
compile 'com.android.support:design:24.1.1'
You are supposed to use a component which is aware of nested scrolling like NestedScrollView (which extends FrameLayout by the way) and RecyclerView inside a CoordinatorLayout and add this behavior to it:
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
And to make it visible on the bottom just a little:
app:behavior_peekHeight="64dp"
I've got an activity, which is themed with Holo.Dialog (or plain old Dialog on older API levels), and contains a ScrollView as it's main layout, in case we encounter smaller screens that can't display all the content. My problem now is that the dialog is needing to scroll to see all the content, even when we have leftover vertical screen space, as seen below:
Here's the code for the ScrollView and it's one child, a LinearLayout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
What do I need to change to get this dialog to wrap more nicely? Thanks!
The solution that worked for me was to take the buttons out of the ScrollView and put them top level in a RelativeLayout. By putting the buttonbar first in the XML, aligned to parent bottom, and then setting the scrollView's layout_above to the buttonBar, I got the effect I was looking for
ListView has this nice feature where you can set an overscroll header or footer. ScrollView, unfortunately, has no such thing. Does anyone know of a way to put together something that works like a ScrollView with an overscroll header/footer?
My best guess is you might be able to accomplish this with a similar approach as pull-to-refresh for lists is implemented on Android devices: you basically stretch a view at the top of (probably actually above - same for a 'footer', but then below) the ScrollView to fake an overscroll effect.
For some ideas on this, have a look at this pull-to-refresh implementation. It dynamically adjusts the padding of a header view in the list to simulate it being overscrolled when 'pulling'.
Can't you put your ScrollView inside a RelativeLayout, which will also contain the header and footer? Something like this:
<RelativeLayout ...>
<TextView
android:id="#+id/header"
android:alignParentTop="true"/>
<ScrollView
android:id="#+id/scroller"
android:layout_below="#id/header"
android:layout_height="fill_parent"/>
<TextView
android:id="#+id/footer"
android:layout_below="#id/scroller"
android:alignParentBottom="true"/>
</RelativeLayout>
In this question ( Can we use a ScrollView inside a LinearLayout? ), someone showed how to put a ScrollView inside a LinearLayout. It should be the same.
I have many activities with a scrollview inside a tablelayout. However, it is necessary a small design change, so I have to put a black transparent view over the whole screen from the top to the bottom. Is it possible to do it in the tablelayout or the scrollview?
RelativeLayout allows for easy overlapping of views. You'll have to adjust the existing views in your app because it doesn't do anything automatically.
EDIT:
A quick way to do this would be to take your existing view (the ScrollView) that is already organized and put it in a top-level RelativeLayout. Then, all you have to do is add new view inside the RelativeLayout with the width and height both set to MATCH_PARENT. The result should be the black transparent view will be visible over the ScrollView.
I normally use FrameLayout to achieve any kind of 'layering' of views.
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
//your existing layout
<View
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#33000000" />
</FrameLayout>
As DeeV said, you can probably use RelativeLayout in a similar way, but you might have to set additional attributes on its children to achieve this.
I am attempting to draw the medal overlaying the corner of the score screen shown here
There is an transparent layout holding the buttons and a RelativeLayout (black edge box), which holds the interior box (grey box) that contains the rest of the data. I tried adding the medal to the top left corner of the interior RelativeLayout and giving it negative margins, but that just cuts it off at the edge of the view. Adding it to the transparent layout puts it behind the corner.
How can I force the medal to overlay that corner? I'd prefer to do it in xml if possible, but any suggestions are welcome.
You can also achieve this by setting the android:clipChildren="false" and android:clipToPadding="false" attributes on the parent view (and if that doesn't work, set it on all the ancestor view groups as well, eventually it will work).
In the xml layout, an element that define after will overlay the element that define before.
So, you could change layout to something like this:
<LinearLayout>
<LinearLayout> <!--grey box --> </LinearLayout>
<ImageView src="medal" android:layout_marginLeft="-250dip"/>
<!-- change the amount of marginLeft to your desire -->
</LinearLayout>
merge them ...
http://developer.android.com/resources/articles/layout-tricks-merge.html would help