Please help! I'm completely stuck and can't find a solution. The useable width of my Toolbar is constrained by the menu items in it. Here's a screenshot. I need to have it not constrained by the menu items so my EditText can span the width of the toolbar. Here is my layout file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="250sp"
android:background="#color/primary"
android:gravity="bottom"
android:minHeight="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button_id"
android:layout_width="40sp"
android:layout_height="40sp"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/url"
android:textColor="#color/accent"
android:textSize="16sp" />
<EditText
android:id="#+id/url_text_field_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textNoSuggestions"
android:maxLines="1" />
<TextView
android:id="#+id/output_text_view_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/initial_output_text_id"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Looks like content padding. Here's an existing answered question on the subject: Android API 21 Toolbar Padding
Solution seems to be app:contentStart xml attribute on the Toolbar view. I assume contentEnd exists too.
Related
I am looking for a solution to design an element on the top of the navigation action bar and also a way to increase the size of the action bar. One way I can think of, is to disable the navigation action bar and then design. Is there any way if it's achievable without disabling the action bar?
Here is the design template:
just to be clear i am looking for an idea to design connect tab where one half is on the navigation action bar while other is on scroll view
xml for main
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity"
android:background="#696969">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/toolbar" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:background="#696969">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="15dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Filter"
android:layout_marginLeft="20dp"
android:textSize="26sp"
android:textColor="#color/white"
>
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="scan"
android:textSize="26sp"
android:layout_marginLeft="20dp"
android:textColor="#color/white"
>
</Button>
</LinearLayout>
</ScrollView>
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
here is xml for toolbar
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/backkground">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:background="#color/black">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:padding="2dp"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:src="#drawable/ic_baseline_cast_connected_24">
</ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="Connected"
android:textSize="44sp">
</TextView>
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
I am afraid i can show all the codes as its proprietry but i just wrote some to mitigate my current solution by dividing the background colo.lol.
After hard work of 30min. I got your answer. In your image, Toolbar is already in use with backButton, refreshButton, BluetothButton, and locationButton and they created the Connect button in TabLayout that's why it shows half on TabLayout and half on Blank Spaces.
I created it as shown in the template.
This is my XML layout code.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Your ToolBar Code or Other Code-->
<TableLayout
android:id="#+id/myTooBar"
android:layout_width="match_parent"
android:layout_gravity="top"
android:layout_height="?actionBarSize">
<!-- Here is sample textView with color-->
<TextView
android:background="#color/purple_500"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</TableLayout>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
app:cardCornerRadius="15dp"
app:cardElevation="10dp"
app:layout_anchor="#+id/myTooBar"
app:layout_anchorGravity="bottom|center"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:background="#color/white"
android:padding="15dp"
android:gravity="left"
android:text="#string/connect"
android:textColor="#color/gray"
android:textSize="22sp"
android:textStyle="bold"
app:drawableLeftCompat="#drawable/ic_baseline_cell_wifi_24"
app:drawableTint="#color/gray" />
</androidx.cardview.widget.CardView>
<!-- Your more code of Activity-->
</androidx.coordinatorlayout.widget.CoordinatorLayout>
and this is the result
I hope it'll help you.
EDIT -1: Added more radius to cardView
How can I make the bottom navigation to stay at the bottom of the page by using the LinearLayout? Most solution I found is they used RelativeLayout instead of LinearLayout.
Below is 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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/purpleBoo"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text=" MY ACCOUNT"
android:textStyle="bold"
android:textColor="#color/white">
</TextView>
</androidx.appcompat.widget.Toolbar>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/btm_nav"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color"
app:menu="#menu/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/purpleBoo"
android:clipToPadding="false" />
</LinearLayout>
It is quite easy - your xml should look like this:
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/purpleBoo"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text=" MY ACCOUNT"
android:textStyle="bold"
android:textColor="#color/white">
</TextView>
</androidx.appcompat.widget.Toolbar>
<!--Just add in between the action bar and bottom bar some other view with height = 0dp and weight = 1. I added one more LinearLayout-->
<LinearLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
</LinearLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/btm_nav"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color"
app:menu="#menu/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/purpleBoo"
android:clipToPadding="false" />
</LinearLayout>
In other cases it won't work. There should be at least one weight but not height based view in LinearLayout to do it.
Hope it helps.
I have the following layout in which I replace the FrameLayout listContainer with a Fragment:
<RelativeLayout
android:id="#+id/content_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|bottom"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
android:background="#color/colorPrimary"
android:elevation="4dp"
android:theme="#style/ToolBarStyle"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/appTitle"
android:layout_width="#dimen/toolbar_title_width"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#color/colorTitleFont"
android:textStyle="bold"
android:ellipsize="end"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:orientation="vertical">
<LinearLayout
android:id="#+id/content_view_panes"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<WebView
android:id="#+id/mainWebView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:visibility="gone" />
<FrameLayout
android:id="#+id/listContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<RelativeLayout
android:id="#+id/saveCancelBar"
android:layout_width="match_parent"
android:layout_height="#dimen/save_cancel_bar_height"
android:background="#color/fluxx_blue"
android:visibility="gone">
<Button
android:id="#+id/editorCancelButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:background="#color/fluxx_blue"
android:text="#string/editor_cancel"
android:textColor="#color/white"
style="?attr/borderlessButtonStyle"/>
<Button
android:id="#+id/editorSaveButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:background="#color/fluxx_blue"
android:text="#string/editor_save"
android:textColor="#color/white"
style="?attr/borderlessButtonStyle" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
My fragment requires hiding the toolbar. I call setVisibility(View.GONE) on the toolbar in the fragment's onResume() method, as I also want to hide it when navigating to the fragment via a back press. However, when I hide the toolbar, my fragment does not take up the entire screen. Presumably this is because I remove the toolbar and it shifts everything up by the height of the toolbar. However, my FrameLayout has layout_weight of 1, which I thought would ensure that it stretches to fill the screen. How can make sure it resizes?
You should add the android:layout_weight="1" attribute to the LinearLayout below your disappeared toolbar.
Not to the embedded one.
I am trying to code a audio player that streams audio from internet all is going well, but i want an animation look like this.
EDITED
This is my Activity:
My Activity Explained :P
My Layout XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="70dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<LinearLayout
android:id="#+id/newactivity"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#color/md_teal_500"
android:clickable="true"
android:elevation="5dp"
android:gravity="bottom|center"
android:orientation="vertical"
app:layout_anchor="#id/container"
app:layout_anchorGravity="bottom|right|end">
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_marginLeft="-20dp"
android:layout_marginRight="-20dp"
android:maxHeight="3dp"
android:minHeight="3dp"
android:padding="0dp"
android:progressDrawable="#drawable/seekbar"
android:thumb="#null"
/>
<RelativeLayout
android:layout_width="280dp"
android:layout_gravity="start"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="false"
android:layout_alignParentTop="false"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
android:ellipsize="marquee"
android:fadingEdge="horizontal"
android:lines="1"
android:marqueeRepeatLimit="marquee_forever"
android:maxLines="1"
android:scrollHorizontally="true"
android:text="No Marasiya Selected"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white"/>
<TextView
android:id="#+id/album"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/title"
android:layout_alignStart="#+id/title"
android:layout_below="#+id/title"
android:maxLines="1"
android:text="Album"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#80cbc4"/>
<TextView
android:id="#+id/duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/title"
android:layout_marginLeft="10dp"
android:layout_toEndOf="#+id/album"
android:layout_toRightOf="#+id/album"
android:text="00:00"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#80cbc4"/>
<TextView
android:id="#+id/totalSec"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/title"
android:layout_toEndOf="#+id/duration"
android:layout_toRightOf="#+id/duration"
android:text=" / 00:00"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#80cbc4"/>
</RelativeLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="35dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="24dp"
android:layout_marginTop="16dp"
android:elevation="8dp"
android:src="#drawable/ic_play_button"
android:tint="#color/md_brown_700"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/drawer_menu"/>
</android.support.v4.widget.DrawerLayout>
I have using viewpager with fragments added to main activity. And the bottom bar is added in main xml layout itself
You can do this using AndroidSlidingUpPanel. You can get the demo code from here: https://github.com/umano/AndroidSlidingUpPanel. Simply add the following dependency to your build.gradle file to use this.
compile 'com.sothree.slidinguppanel:library:3.2.1'
After that edit the following xml for your specific use:
<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=".DemoActivity" >
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoPanelHeight="68dp"
sothree:umanoShadowHeight="4dp"
sothree:umanoParallaxOffset="100dp"
sothree:umanoDragView="#+id/dragView"
sothree:umanoOverlay="true"
sothree:umanoScrollableView="#+id/list">
<!-- MAIN CONTENT -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_toolbar"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
sothree:theme="#style/ActionBar"
android:layout_width="match_parent"/>
<TextView
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:gravity="center"
android:text="Main Content"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="true"
android:textSize="16sp" />
</FrameLayout>
<!-- SLIDING LAYOUT -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical"
android:clickable="true"
android:focusable="false"
android:id="#+id/dragView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="14sp"
android:gravity="center_vertical"
android:paddingLeft="10dp"/>
<Button
android:id="#+id/follow"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="14sp"
android:gravity="center_vertical|right"
android:paddingRight="10dp"
android:paddingLeft="10dp"/>
</LinearLayout>
</LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
Below the main MAIN CONTENT add your viewpager. Below SLIDING LAYOUT add your linear layout
UPDATE: AppCompat v23.2 have introduced BottomSheetBehavior behavior in CoordinatorLayout.
By attaching a BottomSheetBehavior to a child View of a CoordinatorLayout (i.e., adding app:layout_behavior=”android.support.design.widget.BottomSheetBehavior”), you’ll automatically get the appropriate touch detection to transition between five state:
STATE_COLLAPSED: this collapsed state is the default and shows just a
portion of the layout along the bottom. The height can be controlled
with the app:behavior_peekHeight attribute (defaults to 0)
STATE_DRAGGING: the intermediate state while the user is directly
dragging the bottom sheet up or down
STATE_SETTLING: that brief time between when the View is released and
settling into its final position
STATE_EXPANDED: the fully expanded state of the bottom sheet, where
either the whole bottom sheet is visible (if its height is less than
the containing CoordinatorLayout) or the entire CoordinatorLayout is
filled
STATE_HIDDEN: disabled by default (and enabled with the
app:behavior_hideable attribute), enabling this allows users to swipe
down on the bottom sheet to completely hide the bottom sheet
You can get a sample app for implementing this from here: https://github.com/NikolaDespotoski/BottomSheetSample
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">