Nested ScrollView leaves some extra space on top - java

I have a NestedScrollView under AppBarLayout with only one child - LinearLayout. Both of them have no padding and no margin on top, but still there is some space left (belonging to NestedScrollView, as I can see, setting color for the background) on top of the NestedScrollView. How to remove it?
I have tried setting android:fillViewport="true" in NestedScrollView, but got no result.
UPD: this space interacts with clipNoPadding flag, but setting all paddings to 0 does not help.
<android.support.design.widget.CoordinatorLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:background="#color/colorAccent"
android:fillViewport="true"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:orientation="vertical">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
// and some more buttons, just to fill the space
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
android:background="#color/colorTransparent">
// I omit some code, as not-belonging to the question
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
how it looks

The android:fitsSystemWindows="true" attribute will add some (usually, but not always, 24dp) top padding to the view it is applied to. This is meant to be used alongside a transparent or translucent status bar (or navigation bar), so that your view's content doesn't appear "under" the status bar.
In your screenshot, it doesn't look like you're using a transparent status bar, so this will just add 24dp of padding that you don't want. Remove it.
Note also that android:fitsSystemWindows will override any other padding on the view that uses it. So even if you set the padding to 0 manually, you'll still get 24dp padding.

Related

How can I add darker transperency into my relativelayout, like in the image?

I tried to do many things: set alpha value, set background:transparency, set backgroud different colors like "#90000000", I even created another view with transparency above my reciclerView. But I always have one result:
(do not look at white pictures, I will set them later)
And I need transparency like that one:
So as you see image and line are not under transparency. Do you have any ideas how fix it?
I think you declare the RecyclerView in the front of root,
if you are using a RelativeLayout like a main View in the xml layout, you have to make sur that your transparent View below your RecyclerView, this is an example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent">
</RecyclerView>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#9A000000">
</FrameLayout>
you can define two image view and first set the background your image and for secondly set the other background.but you must set the same size.
You can show a overlay above this recyclerview. Just like this.
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RecyclerView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#55000000"
android:translationZ="100dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
LinearLayout works as overlay

set background png on Linearlayout without affecting layout size

Background image doesn't fill Linearlayout and changes that size
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#mipmap/dashboard_background"
android:orientation="vertical"
android:padding="10dp">
desirable look is this
How can I reach that?
You should use a frame layout with an imageview and a linearlayout inside
<FrameLayout
android:id="#+id/FrameLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/background"/>
<LinearLayout
---Your Layout---
</LinearLayout>
Background always stretches to its View size. So you can't really control how it will look like. Instead, put an ImageView as a bottom most (meaning that it will lay under everything else) element in your layout, and use your background image as a source (src) for this ImageView, and so you will be able to control the look of the background with scaleType (probable you would want to use centerCrop or fitCenter). More about scaleType here.
In the end your layout should look something like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#mipmap/dashboard_background" />
<FrameLayout
android:id="#+id/content_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Put your view elements here -->
</FrameLayout>
</FrameLayout>

Changing AppBarLayout height makes list below "jump" sharply

I switched to CoordinatorLayout/AppBarLayout mainly to utilize app:layout_scrollFlags="scroll|enterAlways" (view peeks from the top when scrolling upwards). I'm using a RecyclerView without a NestedScrollLayout as the second prevents the view from recycling and after loading a lot of items it starts to lag.
The "peeking" view is the AppBarLayout and it's being resized when clicked in order to show/hide filter options. Everything works as expected, except that when resizing the AppBarLayout (by setting child views visibility), it seems like the whole layout is being rendered, for a mere moment the RecyclerView is "jumping" to the top and then back to the expected behavior. It's very very quick yet very annoying. When replaced with a LinearLayout it doesn't happen, but obviously the view doesn't peek.
My layout:
<?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:id="#+id/fragment_notifications"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:animateLayoutChanges="true">
<android.support.design.widget.AppBarLayout android:id="#+id/fragment_notifications_filter_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:animateLayoutChanges="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
app:layout_scrollFlags="scroll|enterAlways">
<!--Two example views with different heights, of which only one is visible at a time -->
<ImageView android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="68dp"
android:src="#drawable/ic_launcher"/>
<ImageView android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="44dp"
android:src="#drawable/ic_launcher"/>
...
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/fragment_notifications_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/fragment_notifications_notifications"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scrollbars="vertical" />
</FrameLayout>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
The Java code is pretty simple; just setting the visibility of views inside the AppBarLayout:
someViewInsideAppBarLayout.setVisibility(visible ? View.VISIBLE : View.GONE);
Any idea how to deal with this? Thanks!
I had to enable the transition of type LayoutTransition.CHANGING (disabled by default) in the ViewGroup that has the appbar scrolling behavior (in my case it's the SwipeRefreshLayout).
LayoutTransition layoutTransition = swipeRefreshLayout.getLayoutTransition();
layoutTransition.enableTransitionType(LayoutTransition.CHANGING);
Later on I faced additional odd animation behavior that was solved by changing the LayoutTransition.CHANGE_DISAPPEARING value of the parents of the disappearing view(s) to 0 (originally 300):
relativeLayout.getLayoutTransition().setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);
appBar.getLayoutTransition().setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);
coordinatorLayout.getLayoutTransition().setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);

Use RelativeLayout outside CoordinatorView

I have a CoordinatorLayout, in where a RecyclerView displays some CardViews, defined in an other layout. Under this scrollable view, i am trying to add a RelativeLayout, which inherits fields for text input, buttons for sending it, etc.
The problem: CoordinatorLayout seems to block the whole screen, although i told to wrap contents height. Nevertheless, RelativeLayout is added (tested it by setting Coordinator-height = 50dp), but off-screen. What is wrong here?
PS: I know how to solve it with android:layout_weight=xx. But thats not what i want to achieve, because it blocks my EditText to expand, if bigger texts are entered.
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/data_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.CoordinatorLayout>
<RelativeLayout
android:id="#+id/delete_data_layout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="#id/data_coordinator_layout">
<EditText/>
<Button/>
<Button/>
<Button/>
</RelativeLayout>
</RelativeLayout>
It's actually pretty simple. You need to align your Relative Layout (delete_data_layout) to bottom of your parent. Then you make the Coordinator layout above the Relative Layout. This causes, that Coordinator layout will always stay above the Relative Layout - even when the Edittext expands.
Here's the XML.
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/data_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#+id/delete_data_layout"> <---- Change here
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
<RelativeLayout
android:id="#+id/delete_data_layout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"> <---- Change here
<EditText/>
<Button/>
<Button/>
<Button/>
</RelativeLayout>
</RelativeLayout>

How to set specific height at run time for Sliding layout?

I am building an app that uses this library:https://github.com/umano/AndroidSlidingUpPanel to create a panel that slides on from the bottom of the screen when a user clicks an item in a listview.
However i dont want the slide up panel to take up the entire screen. I need there to be a gap at the top, between the panel and the action bar, of exactly 80dp.
I have tried everything i can think of (putting a spacer there with a transparant background, using layoutParams (gives error), etc). But nothing seems to work.
If someone could give me some suggestions as to what i could try next, i would much appreciate it.
The xml layouts are below.
Thanks for your time.
Corey
<com.bacon.corey.audiotimeshift.SlidingUpPanelLayout xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:panelHeight="68dp"
sothree:shadowHeight="4dp"
sothree:overlay="true">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="4dip"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="4dip"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
</LinearLayout>
<com.bacon.corey.audiotimeshift.FloatingActionButton
android:id="#+id/fabbutton"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
app:colour="#color/holo_red_light"
app:drawable="#drawable/ic_content_new"
/>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|top"
android:textSize="16sp"
android:id="#+id/slideUpPanel"
android:background="#android:color/transparent"
>
<fragment android:name="com.bacon.corey.audiotimeshift.PlayFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragment_play"
/>
</FrameLayout>
</com.bacon.corey.audiotimeshift.SlidingUpPanelLayout>
What about wrapping your SlidingUpPanelLayout in another layout, say FrameLayout and adding some good old paddingTop to the latter?
I have found a workaround. Draw the background of the pane transparent and put a padding top, but first the library must be modified like it's written here:
https://github.com/umano/AndroidSlidingUpPanel/issues/4
Hope this helps somebody in the future :)

Categories