Develop Reference

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>

Vertical Scrolling Bar Does not show when scrolling Android

some what new to android development. Currently, this is the code that I have for my layout:
<FrameLayout 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:theme="#android:style/Theme.NoTitleBar"
tools:context="com.alibaba.weex.com.alibaba.app.WXPageActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:scrollIndicators="right"
android:scrollbars="vertical">
</FrameLayout>
<ProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
<TextView
android:id="#+id/index_tip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignWithParentIfMissing="true"
android:layout_below="#+id/index_progressBar"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:text="loading...."
android:visibility="gone" />
</FrameLayout>
Can someone help me figure out how to get the vertical scroll bar to show? I've tried changing the all the framelayouts to relativelayouts, and then changing the second framelayout to a ScrollView, but the app crashes once I open it.
Thanks!

I think your layout should be like this .
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scrollbars="vertical"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
>
</FrameLayout>
<ProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
<TextView
android:id="#+id/index_tip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignWithParentIfMissing="true"
android:layout_below="#+id/index_progressBar"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:text="loading...."
android:visibility="gone" />
</FrameLayout>
</ScrollView>
You can't change scollview in the second framelayout because the scollview can only have one child .

Scroll a TextView out the screen

I have a bit of a predicament.
My Layout is currently this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:isScrollContainer="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/item_shipping_shipping_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start|left"
android:padding="#dimen/margin_16"/>
<View
android:id="#+id/line43"
android:layout_width="match_parent"
android:layout_height="#dimen/line_height"
android:background="#color/light_gray"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.v7.widget.RecyclerView
android:id="#+id/item_shipping_fragment_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:isScrollContainer="true"/>
</LinearLayout>
The TextView is dynamic content set by the server and it can be really long sometimes.
The problem I am having is the TextView can take up the whole screen. This XML is a fragment that is in a TabLayout with a collapsable toolbar. So when I scroll the content I would like the TextView to scroll out the screen, if this is possible. I tried to embed the Textview in a scrollView but this doesn't work as you see about?
Got any ideas how I can still have the CollapsableToolbar collapse as well as scroll the Textview out the screen to reveal the RecyclerView?
Thank you

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:isScrollContainer="true">
<TextView
android:id="#+id/item_shipping_shipping_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start|left"
android:padding="#dimen/margin_16"/>
</android.support.v4.widget.NestedScrollView>
<View
android:id="#+id/line43"
android:layout_width="match_parent"
android:layout_height="#dimen/line_height"
android:background="#color/light_gray"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/item_shipping_fragment_recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:isScrollContainer="true"/>
</LinearLayout>

need android layout advise

i want to create layout as attached below.
As you see i have added fixed buttons to bottom on the layout.
and now i have problem when content part has more than 9 elements.
While it is going to scroll, last elements are hiding back of the bottom buttons and not scrolling fully as below:
Please give me advise how to do it? Please notice i am not professional android developer.
I am now going to attach my xml layout files. Here you are:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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:elevation="0dp"
android:popupTheme="#style/AppTheme.PopupOverlay"
android:theme="#style/ToolbarColoredBackArrow" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</ScrollView>
<LinearLayout
android:id="#+id/ButtonsLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#F5F5F5"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#808080" />
<LinearLayout
android:id="#+id/footer_button_icons_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F5F5F5"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatButton
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#F5F5F5"
android:drawablePadding="3dp"
android:drawableTop="#drawable/ic_xxx"
android:gravity="center|center"
android:text="#string/footer_xxx"
android:textAllCaps="false"
android:textColor="#color/xxx_gray_darker"
android:textSize="12sp" />
<android.support.v7.widget.AppCompatButton
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#drawable/borderless_button"
android:drawablePadding="3dp"
android:drawableTop="#drawable/ic_xxx"
android:gravity="center|center"
android:text="#string/footer_xxx"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="12sp" />
<android.support.v7.widget.AppCompatButton
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#F5F5F5"
android:drawablePadding="3dp"
android:drawableTop="#drawable/ic_xxx"
android:gravity="center|center"
android:text="#string/footer_xxx"
android:textAllCaps="false"
android:textColor="#color/xxx_gray_darker"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Here is a First Fragment layout xml of ViewPager
<RelativeLayout 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="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="40dp"
android:showDividers="middle"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<GridView
android:id="#+id/gridView"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="20dp"></GridView>
</LinearLayout>

set android:layout_above in your scrollView
<ScrollView android:layout_above="#id/ButtonsLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
your ScrollView should be above LinearLayout which consist Buttons.

There is no need to use ScrollView in view pager. Remove ScrollView for the ViewPager whose id is pager.

paddingBottom is what you want. Add paddingBottom to your ScrollView or any other layout which is the container of the items. The padding should be slightly greater than the height of the bottom strip.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="48dp">

PagerView inside ScrollView

I have a Fragment fully occupied by a ScroolView. I added a ViewPager inside the layout in the ScrollView, like in this code:
<FrameLayout
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:fillViewport="true"
tools:context="com.asdf.AFragment">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:fillViewport="true"
android:scrollbars="vertical"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/top_linear_layout"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:minHeight="100dp">
<TextView
android:id="#+id/meteo_placeholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Meteo and others"
android:textAppearance="?android:attr/textAppearanceSmall" />
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Begin"
android:textSize="30dp"
/>
<!--THIS IS NOT SHOWN-->
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/view_pager_main"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<android.support.v4.view.PagerTitleStrip
android:id="#+id/title_strip_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingTop="4dp"
android:paddingBottom="4dp" />
</android.support.v4.view.ViewPager>
<!-- LAST TEXT VIEW -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="End"
android:textSize="30dp"
/>
</LinearLayout>
</ScrollView>
But the ViewPager is not shown at all. I am sure it works because its adapter is used (I can see the call to getItem(), and the ViewPager alone works fine ).
If I remove the last text view however, the ViewPager is shown, but the ScrollView is not scrollable at all, and all the LinearLayout' contents are restricted to the screen height, like if there was no ScrollView