How to pin linearlayout below toolbar while scrolling - java

I want to achieve something like the image shown below
I would like to paste a linearlayout under the toolbar and make it appear at a given moment during the scroll

You can try this layout
Original Layout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar_layout"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
.
.
</LinearLayout>
</ScrollView>
<LinearLayout>

You may use collapsing toolbar or customize according to needs.
Refer links below.
Android: Collapsing Linearlayout instead of Collapsing Toolbar
https://medium.com/#martinomburajr/android-design-collapsing-toolbar-scrollflags-e1d8a05dcb02
https://www.journaldev.com/13927/android-collapsingtoolbarlayout-example
http://www.zoftino.com/collapsing-toolbar-layout-example

Check this, I've added comments in code for your items
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- YOUR ITEMS BETWEEN TABBAR AND APPBAR-->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- YOUR CUSTOM TABBAR-->
</LinearLayout>
<android.support.v4.widget.NestedScrollView
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- YOU MAIN CONTENT-->
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

Related

Problem with scrolling in Recyclerview. Scroll is not smooth

This is my code-
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/frame1"
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="Recruitment Responses"
android:gravity="center"
android:textSize="30sp"
android:textColor="#fff"
android:background="#drawable/bg_rounded1"
/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:padding="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/frame1"
android:background="#f9fafc"/>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
The scrolling is not smooth and is quite irritating can something be done to improve this? I want the textview to go up when scrolled upwards along with the Recycler View that is why i have nested both of them in a ScrollView and maybe that is what is creating an issue!
Adding a <androidx.core.widget.NestedScrollView> instead of ScrollView solves everything.
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/frame1"
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="Recruitment Responses"
android:gravity="center"
android:textSize="30sp"
android:textColor="#fff"
android:background="#drawable/bg_rounded1"
/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:padding="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/frame1"
android:background="#f9fafc"/>
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
</RelativeLayout>
try this inside your activity:
recyclerView.setNestedScrollingEnabled(false);
Try this :
recyclerView.setScrollView(true);
This help you to make recyclerView scrollview smooth.

Swipe Refresh Layout and a WebView in a ScrollView

I have a header text and a webView in a LinearLayout in a ScrollView. I want to add a Swipe Refresh Layout, but I don't know where should I place it because I always get errors or the page is not displayed.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
style="#style/PageTitle"
android:text="#string/news_in_fazekas" />
<WebView
android:id="#+id/newsWebView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
Try this way I hope it will work for you.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swiperefresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
style="#style/PageTitle"
android:text="#string/news_in_fazekasx" />
<WebView
android:id="#+id/newsWebView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</ScrollView>
</android.support.v4.widget.SwipeRefreshLayout>

CoordinatorLayout with full screen background image

I tried to get this result by CoordinatorLayout but unable to set fullscreen image on background which expand on whole screen same like in image. I tried several ways like putting LinearLayout inside CollapsingToolbarLayout but not getting close to layout what i want to get.
I tried several way to achieve this but not getting anywhere.please help
<?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:clickable="true"
android:focusable="true"
android:fitsSystemWindows="true"
android:background="?android:attr/colorBackground"
android:id="#+id/viewuserProfileMain"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
android:src="#drawable/baby"
android:scaleType="centerCrop"
app:layout_collapseParallaxMultiplier="0.7"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/diagonal_cut_layerlist">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#color/primary"
/>
</RelativeLayout>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</RelativeLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
What you should do is make another layout set it's background color and have another RelativeLayout in that. Then include you current layout into that one and it will be easy to handle for you.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:clickable="true"
android:focusable="true"
android:fitsSystemWindows="true"
android:background="?android:attr/colorBackground"
android:id="#+id/viewuserProfileMain"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp">
<include layout="#layout/yourCurrentLayout except it's background"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Textview not showing inside FrameLayout

I have a linearlayout and a textview inside another linearlayout. The linearlayout from inside is displayed, but the problem is that the last textview is not. Why?
I have a LinearLayout and inside a FrameLayout and inside a SwipeRefreshLayout and in the middle a TextVeiw, but the problem is that TextView doesn't shows when I emulate the in the app. Why is that?
<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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".SearchResults">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/content">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipeContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="50dp"
android:text="EXAMPLE TEXT" />
</android.support.v4.widget.SwipeRefreshLayout>
</FrameLayout>
Picture below...
Change your xml file with this code
<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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".SearchResults">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/content">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipeContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="50dp"
android:text="EXAMPLE TEXT" />
</android.support.v4.widget.SwipeRefreshLayout>
</FrameLayout>
</LinearLayout>
Your frame Layout height is 0
set to match_parent
LinearLayout (main)
SwipeRefresh...
RelativeLayout (gravity center)
and then your Textview
The framelayout height is set to 0dp, kindly change that to match parent.
try this:
<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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/content">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipeContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="EXAMPLE TEXT" />
</android.support.v4.widget.SwipeRefreshLayout>
</FrameLayout>
it helps you
#George Patsias Change text color in textview

Framelayout doesn't show up in main activity

This is my activity_main.xml
<?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:orientation="horizontal">
<include android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_below="#+id/toolbar">
<FrameLayout
android:id="#+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
</LinearLayout>
</LinearLayout>
My toolbar.xml:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
The fragment I send to fragment_content:
<RelativeLayout 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"
android:orientation="vertical"
android:background="#ffffff">
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipe_container"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Listview -->
<ListView
android:id="#+id/lvEvent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:divider="#D0D0D0"
android:dividerHeight="0.5dp"
android:showDividers="middle"/>
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
Now the toolbar show up, I can do actions with it but there is nothing in my Framelayout? If I delete the include (toolbar) then I can see the content in my Framelayout. Anybody know what I'm doing wrong?
Given that you have set the height of your toolbar to wrap_content, I assume you want a vertical layout, but your top level LinearLayout is set to horizontal. Change the orientation to vertical.

Categories

Resources