Develop Reference

How to add button to a view pager in Android Studio?

I want to add a button to a View Pager. Tried adding button, fragment, and layout without success.
I've also tried this:
Add button to ViewPager
But it didn't work.
This is my layout
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.airpal.yonatan.airpal.MainActivity_User">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBarLayout">
<include layout="#layout/app_bar_layout" android:id="#+id/main_page_toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/white">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_tabPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/appBarLayout">
</android.support.v4.view.ViewPager>
</LinearLayout>
This is the screen shot, I want to add the button on the bottom of the page.
Thanks.

You can Wrap this LinearLayout in the Relative layout. If you don't want to change the Linear layout to RelativeLayout. Here is the modified layout XML and It will display Button the Bottom Right. You can modify layout_alignParentRight to left, center depend on your need.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.airpal.yonatan.airpal.MainActivity_User">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBarLayout">
<include layout="#layout/app_bar_layout" android:id="#+id/main_page_toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/white">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_tabPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/appBarLayout">
</android.support.v4.view.ViewPager>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>

Try using RelativeLayout for the root view and use :
android:layout_alignParentBottom="true"
With LinearLayout at root view is not possible. Also, instead of RelativeLayout, ConstraintLayout is a good alternative.

Scroll View is not working with relative layout

I tried to make a scroll view. However,it does not display the viewPager inside the scroll view. I don't know which part is wrong.
This is my xml file
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="com.example.qianonnphoon.tradeal.displaytrade.DisplayTradeActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="#drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp">
</android.support.design.widget.TabLayout>
</android.support.v4.view.ViewPager>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="23dp"
android:layout_below="#+id/view_pager"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="#+id/tvOwnItemName"/>
</RelativeLayout>
</ScrollView>
This is the output
The viewPager is not displayed. The viewPager will be displayed only when I removed the scroll view

try this out:
<ScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical">
android:fillViewport="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</RelativeLayout>
</ScrollView>

Try adding this piece of code before loading your viewPager
NestedScrollView scrollView = (NestedScrollView) findViewById
(R.id.nest_scrollview);
scrollView.setFillViewport (true);

Add
android:fillViewport="true"
to scrollview and set scrollview height to
android:layout_height="300dp"
solve my problem.
However, I dont know why the height cannot set as wrap_content

App does not use full width of screen (Actionbar)

I am facing a problem when it comes to the width of my app (attachment). It seems that the full width of the screen is not used since I am using a actionbar, and that the space where the "Settings" menu would appear is taking the remaining width of the screen. Is there any way to use the full width since I am not using the "Settings" menu anyway?
app_bar_main.xml:
<?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: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: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:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
content_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.simple.activities.MainActivity"
tools:showIn="#layout/app_bar_main">
<RelativeLayout
android:id="#+id/master_fragment"
android:layout_width="368dp"
android:layout_height="495dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
current_fragment.xml:
<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"
tools:context="com.example.simple.fragments.Notifier">
<!-- TODO: Update blank fragment layout -->
<TabHost
android:id="#+id/tab_host"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include android:id="#+id/layout1"
layout="#layout/activity_hour_notification"
android:layout_width="match_parent"
android:layout_height="match_parent"></include>
<include android:id="#+id/layout2"
layout="#layout/activity_minute_notification"
android:layout_width="match_parent"
android:layout_height="match_parent"></include>
</FrameLayout>
</LinearLayout>
</TabHost>
</FrameLayout>
Thanks for any help on this one!

You gave width and height constant to the layout, for ConstraintLayout match_parent give 0dp and add all necessary constraints
<RelativeLayout
android:id="#+id/master_fragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
</RelativeLayout>

In content_main.xml please use width match_parent
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.simple.activities.MainActivity"
tools:showIn="#layout/app_bar_main">
<RelativeLayout
android:id="#+id/master_fragment"
android:layout_width="match_parent"
android:layout_height="495dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
</RelativeLayout>
</android.support.constraint.ConstraintLayout>

use LinearLayout instead of android.support.design.widget.CoordinatorLayout and android.support.constraint.ConstraintLayout and set orientation = "vertical"

<RelativeLayout
android:id="#+id/master_fragment"
android:layout_width="368dp"
android:layout_height="495dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
here you make width with specific value not match parent and the fragment layout which contain toolbar and tab will take that width so you should make width of master_fragment match_parent or at least use toolbar on content_main.xml before relativeLayout

ViewPager causes wrong layout display

I have added viewpager in an activity with the following layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent" android:layout_height="match_parent"
android:weightSum="1">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="0.45">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1" />
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="#+id/imgdetail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.15"
android:foregroundGravity="center_vertical|fill_vertical">
</android.support.v4.view.ViewPager>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container1"
android:layout_weight="0.4"></FrameLayout>
</LinearLayout>
But the toolbar colour has moved and the viewpager has gone to the center of the screen.

Do you need to put the toolbar inside the frame layout. And if so, consider removing the wight for the toolbar and just leave the wrap_content.
Change the height of the layouts with weight specified to "0dip".
If all else fails consider changing the wights to whole numbers and add them to make the wight_sum of the linear_layout e.g.toolbar frame layout gets 9, view pager gets 3, frame at the bottom gets 8 and weight_sum is 20.

Its easy to implement your layout using RelativeLayout. Use RelativeLayout and make the ToolBar layout the top child and put ViewPager below "Toolbar layout".
Hope this helps.
Regards,

Try this layout
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<android.support.v4.view.ViewPager
android:id="#+id/imgdetail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"/>
<FrameLayout
android:id="#+id/container1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"/>
</FrameLayout>

Try it this way. Just specify the height of the elements
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/imgdetail"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foregroundGravity="center_vertical|fill_vertical">
</android.support.v4.view.ViewPager>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/container1"
android:layout_below="#id/imgdetail">
</FrameLayout></RelativeLayout>

ViewPager dynamic width height

i'm trying to position indicator below view pager the problem is that i'm using layout_height (harcoded value 474dp) is possible to use dynamic width height in order to position indicator below view pager
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#dddddd">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#dddddd">
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="274dp"
android:layout_below="#+id/title"
android:layout_marginBottom="10dp"></android.support.v4.view.ViewPager>
<CirclePageIndicator android:id="#+id/indicator"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_below="#+id/pager"
app:pageColor="#858585"
app:fillColor="#f19201" />
</RelativeLayout>
</ScrollView>

You are trying to use aRelativeLayout inside a scrollview it will never work, replace or wrap it with a LinearLayout

Use LinearLayout with weight property :
<LinearLayout 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:background="#dddddd"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<com.pockee.views.CirclePageIndicator
android:id="#+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
app:pageColor="#858585"
app:fillColor="#f19201" />
</LinearLayout>