Develop Reference

Pin tablayout in Scrollview with appbarlayout

My android app want to have a page like Facebook page which pin the tablayout on top of the screen when scroll below the tablayout.
I have found a few answers on this topic.
pin TabLayout to top and below the toolbar Scrollview
How to make tablayout fixed below action bar?
However, they don't want my app situation because I want to keep my cardview and tablayout in the scrollview. My xml template is as below. Any insight or solution can share?
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:liftOnScroll="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|snap">
//toolbar content
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:id="#+id/checkinhome"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Content card1"
android:textAppearance="#style/TextAppearance.AppCompat.Display3" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/checkinhome"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Content card2"
android:textAppearance="#style/TextAppearance.AppCompat.Display3" />
</androidx.cardview.widget.CardView>
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

I believe you are using unnecessary layouts, try following code for guidance -
MainLayout File
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#color/colorPrimaryDark"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<!-- you can put any content you want to hide after scroll in header-->
<!-- as example in putting this image view-->
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/default_img"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.25" />
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
android:layout_gravity="bottom" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- put content of scroll view here -->
<include layout="scroll_content_layout" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Above layout file will result in following result-
File scroll_content_layout.xml will have content you want as part of your scroll view.
ScrollContentFile
<?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="wrap_content"
android:orientation="vertical">
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- some other layout as part of scroll view -->
</LinearLayout>
Edit
Content inside CollapsingToolbarLayout will collaps on scroll. Any View you want to KEEP on TOP on a scroll or any other customization you need to use layout_collapseMode flag.
CollapseMode Parallax: The content will scroll but a bit
slower than nested scroll view. You can control scroll speed with
layout_collapseParallaxMultiplier flag.
CollapseMode Pin: The content will stay in the same place while this place is still inside the collapsing toolbar.
Please check Collapse modes of CollapsingToolbarLayout
Happy coding -

How to give corner radius to the background image where the top rounded image is attached to the background image?

How to give corner radius to the background cover picture, where the upper rounded picture is attached with this. Can anyone help me to get this design? Like this image ...Expecting this, But right now I am just capable to get this Getting this.
<com.google.android.material.appbar.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/layoutTop"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#color/bgColor"
app:layout_collapseMode="pin">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/coverImg"
android:layout_width="match_parent"
android:layout_height="80dp"
android:scaleType="centerCrop"
android:background="#drawable/coverImg"/>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/mainRoundImage"
android:src="#drawable/roundImg"
app:civ_border_color="#color/borderColor"
app:civ_border_width="8dp"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="24dp"/>
</RelativeLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>

Android Scroll View in fragment crops content

I created a Scroll View which should allow me to scroll through all the content which is inside Linear Layout (that is a child of Scroll View).
Code looks like this:
<ScrollView 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="pl.oakfusion.delegator.DomesticDelegationSecondFragment">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
....
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="25dp"
android:layout_marginTop="25dp"
android:background="#color/textDarkest"
android:text="Save"
android:textColor="#color/textColor"
android:layout_gravity="right" />
</LinearLayout>
Preview looks like this:
But in my app I have this:
I can't scroll down, this is all I can see.
If I allow to rotate I have horizontal view:
which now allows me to scroll but cuts the button entirely. (On the picture is bottom of view) I can pull down fast and I can see that the button is there but it goes up again (this android thing when you can pull slightly further but it scrolls back)
How can I fix this?
Hosting activity:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="pl.oakfusion.delegator.DomesticDelegationActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />

try adding this to the scrollView in your xml layout
android:fillViewport="true"

I have experienced the same problem once. I tried adding padding for the ViewGroup inside ScrollView. Then it worked fine. Its a hacky solution and not an ideal one.
For the example mentioned above (by user3212350):
I have added some padding to the LinearLayout inside ScrollView to make the view completely visible. The amount of padding required may differ for various screen sizes.
<ScrollView 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="pl.oakfusion.delegator.DomesticDelegationSecondFragment">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
##android:paddingBottom="50dp"##>
....
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="25dp"
android:layout_marginTop="25dp"
android:background="#color/textDarkest"
android:text="Save"
android:textColor="#color/textColor"
android:layout_gravity="right" />
</LinearLayout>

Landscape imageview overlap toolbar and statusbar

I have an imageview which is displayed in center of the screen. In portrait mode it displays fine but when i rotate screen in horizontal mode then imageview is opelapping my toolbar and status bar like in screenshot attached below. I tried couple of settings but it didn't change anything. I tired below toolbar option but it will attach imagview after toolbar but i need to display imageview in center.So I need a help to fix this laypout.Here is my layout xml code.
Imageview layout:
<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"
tools:context=".DetailActivity"
>
<include android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:transitionName="photo_hero"
android:id="#+id/image"
/>
</RelativeLayout>
toobal layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark" >
</android.support.v7.widget.Toolbar>
screenshot:
http://s9.postimg.org/6lyxbaq27/landscape_problem.png
http://s9.postimg.org/n8ghkdizz/landscape_problem_2.png

Put this:
android:layout_below="#+id/toolbar"
inside of your <ImageView> tag.
It should look like:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:layout_centerInParent="true"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:transitionName="photo_hero"
android:id="#+id/image"
/>

Instead of relative layout try to use Frame Layout like:-
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/main_parent_view"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:transitionName="photo_hero"
android:id="#+id/image"
/>
</LinearLayout>
<include layout="#layout/toolbar"/>

As Viktor suggested. I used linearlayout with orientation vertical and with few parameter changes in my imageview.Here is the final code:
<LinearLayout 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=".DetailActivity"
android:orientation="vertical"
>
<include android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:id="#+id/image"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>

Place an image partially above toolbar

I would like how can do to have an image in my relative layout to be above (on top layer) my toolbar (in the same relative layout) and not below it. Any idea ?
The layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/splash"
android:adjustViewBounds="true"
android:layout_below="#id/my_toolbar"
android:gravity="top"
android:layout_alignTop="#id/my_toolbar"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"/>
<include
android:id="#+id/my_toolbar"
layout="#layout/my_toolbar"
></include>
</RelativeLayout>
</FrameLayout>
the toolbar
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:background="#7dca2c"
android:elevation="4dp"
>
</android.support.v7.widget.Toolbar>

You don't need the RelativeLayout, your FrameLayout will handle that just fine.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/my_toolbar"
layout="#layout/my_toolbar"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/splash"
android:adjustViewBounds="true"
android:layout_gravity="top|center_horizontally"/>
</FrameLayout>
By having the included layout as the first child, it will be the first layer - and the ImageView will be the second. Adding android:layout_gravity="top|center_horizontally" to the ImageView will then align it correctly within the ViewGroup.