Develop Reference

Strange behaviour of recyclerview in nestedscrollview

I have a layout like below. Problem is that the recyclerview height only shows one item.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="#dimen/activity_horizontal_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Live Transactions"
android:textStyle="bold"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_refresh"
android:background="#android:color/transparent"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Strange thing is that when I change the attribute
app:srcCompat="#drawable/ic_refresh"
in the ImageButton to something like
app:srcCompat="#android:drawable/ic_menu_search"
the recyclerview height becomes normal most items show. The ImageButton is on a layout above RecyclerView. Why does this happen?

You have to make your inner linear layout as match parent
<android.support.v4.widget.NestedScrollView 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Live Transactions"
android:textStyle="bold"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"
android:background="#android:color/transparent"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

Solved it simply by adding
android:fillViewport="true"
to the NestedScrollView

Make the layout_height on the Recycler View to match_parent
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />

Layout with tabs with ad on bottom and a button above it

I have created a layout with tabs
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
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.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
<com.google.android.gms.ads.AdView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_id"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
</com.google.android.gms.ads.AdView>
</RelativeLayout>
One of the tabs is
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/image_section"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/image"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/text"
android:gravity="center"/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"/>
</RelativeLayout>
The problem is that before the ad loads I can see the button all the way on the bottom. How would I make the layout for the tab to take up exactly the space available instead of the whole screen? Same way if I added a button and make it be on top, instead of appearing below the tabs, it appears all the way on the top.
EDIT: I would like to make it look like this image
The button is part of tab content that is shown and the ad is part of the main layout. The problem is that whenever I set button to android:layout_alignParentBottom="true" then I end up with it being on the bottom and hidden behind the ad.

Change the root of your main layout to vertical LinearLayout instead of RelativeLayout.
Now you have two children in LinearLayout i.e CoordinatorLayout and AdView.
Since you want AdView to lie below CoordinatorLayout and CordinatorLayout to occupy the rest of the space,
set the height of CoordinatorLayout as android:layout_height="match_parent" with android:layout_weight="1" and the issue should be fixed.
Also change the height of AppBarLayout and TabLayout to match_parent.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
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:layout_weight="1">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
<com.google.android.gms.ads.AdView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_id">
</com.google.android.gms.ads.AdView>
</LinearLayout>
There is no need to change in the other layout. But I would recommend you use LinearLayout as the root layout instead of RelativeLayout
So here are the changes that I would recommend doing in your tab layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/image_section"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/image"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/text"
android:gravity="center"/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:layout_centerHorizontal="true"
android:gravity="center"/>
</LinearLayout>
Edit: Attaching images for better understanding:

Have You tried setting minHeight in Your AdView?
Change your Tab layout to this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/image_section"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/image"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/text"
android:gravity="center"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:gravity="center"/>
</LinearLayout>

Scrollview top and bottom

I'm building and android application using android studio and I'm using scroll view in my layout, but the problem is that the scroll view doesn't start after the action bar and leaves huge white space at the bottom (as you can see in the screenshots below).
and here's my code:
<?xml version="1.0" encoding="utf-8"?>
<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:layout_centerHorizontal="false"
android:background="#fefcf8"
android:orientation="vertical"
android:weightSum="1">
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_gravity="center"
android:orientation="vertical"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:padding="5dp"
android:orientation="vertical">
<ImageButton
android:id="#+id/info1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="2dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:src="#drawable/info1" />
</LinearLayout>
.
.
.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:padding="5dp"
android:orientation="vertical">
<ImageButton
android:id="#+id/info6"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="2dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:src="#drawable/info6" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:background="#3a3c3a"
app:menu="#menu/navigation"
app:itemTextColor="#ffffff"/>
</LinearLayout>
As you can see my xml above, i didn't any padding or margin. Yet there's a white space at the bottom and the scroll view starts at the very top of the activity not after the action bar. How to solve this?

Try by putting this inside your ScrollView or FrameLayout containing ScrollView
<ScrollView
...
app:layout_behavior="#string/appbar_scrolling_view_behavior"
...>

Centering an element on the current Viewport in a Scrollview

I want to display a dot, which is always in the physical center of my device, even when I scroll the content around it, which is in a scrollview. This is my current code, but the dot is missing here, because I don't know where to place it. The scrollposition is only set via code, so it wouldn't be a problem, if the centered element blocks the scrollview.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:deviceIds="wear_square"
android:gravity="center">
<android.support.v4.widget.NestedScrollView
android:id="#+id/vertsv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<HorizontalScrollView
android:id="#+id/horisv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/map" />
</LinearLayout>
</HorizontalScrollView>
</android.support.v4.widget.NestedScrollView>
Solution :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:deviceIds="wear_square">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="#+id/vertsv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<HorizontalScrollView
android:id="#+id/horisv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/map" />
</LinearLayout>
</HorizontalScrollView>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_my_location_black_24dp" />
</RelativeLayout>

Put your dot below anything else in your layout. Also you should use FrameLayout/RelativeLayout instead of LinearLayout as a top parent container.

ViewPager dissapears when wrapping it inside ScrollView

I have a Linear Layout inside a scroll View. when specify ` android:layout_height="wrap_content" for ViewPager it disappears until set literal values instead. i dont know why?
my xml code:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
.....
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/moto" />
<android.support.v4.view.ViewPager
android:id="#+id/viewshop_pager"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<android.support.v4.view.PagerTabStrip
android:id="#+id/viewshop_pagerStrip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#color/blueStrip"
android:paddingBottom="5dp"
android:paddingTop="5dp" />
</android.support.v4.view.ViewPager>
</LinearLayout>

Try this. and let me know.
<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="wrap_content"
android:orientation="vertical">
.....
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/moto" />
<android.support.v4.view.ViewPager
android:id="#+id/viewshop_pager"
android:layout_width=" match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.PagerTabStrip
android:id="#+id/viewshop_pagerStrip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#color/blueStrip"
android:paddingBottom="5dp"
android:paddingTop="5dp" />
</android.support.v4.view.ViewPager>
</LinearLayout>

after searching around the web and by helps of stack friends decided to use
android.support.design.widget.CoordinatorLayout
then
<android.support.design.widget.AppBarLayout
inside it
<android.support.design.widget.CollapsingToolbarLayout
for collapsing after scroll and then add my viewPager
thanks to this code in GitHub:
CollapsingToolbarLayout with TabLayout