I have problem with position of floating action button. When i put ad from Admob fab is over it. I want to put ad under fab button but any method that I try does not work.
Image of current postion fab to ad
#layout/activity_layout:
<?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:fitsSystemWindows="true"
tools:context=".activities.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/LzTheme.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/LzTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/drawer_layout"
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">
<include layout="#layout/content_main"/>
<com.google.android.gms.ads.AdView
android:id="#+id/ad_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"
app:adSize="BANNER"
app:adUnitId="#string/banner_ad_unit_id"/>
</FrameLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
#layout/content_main:
<RelativeLayout
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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".activities.MainActivity"
tools:showIn="#layout/activity_main">
<FrameLayout
android:id="#+id/FragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
#layout/fragment:
<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"
tools:context="com.dsxx.test.fragments.testFragment">
<android.support.v7.widget.RecyclerView
android:id="#+id/Recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_dodaj"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:srcCompat="#drawable/fab_plus"
app:fabSize="normal"
app:borderWidth="3dp"
app:elevation="6dp"/>
</FrameLayout>
I suggest you to create layouts that contain the fab button from Android Studio's default layout.
After creating it, there are 2 layouts:
contain_main.xml
activity_main.xml
Edit activity_main.xml (I put some LinearLayout in order to able to set the orientation is vertical) like this :
activity_main.xml's code :
<?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:fitsSystemWindows="true"
tools:context="com.appschef.mobilequeue.floatingboat.MainActivity">
<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" />
<!-- start from here-->
<!-- LinearLayout for give space fab and AdView-->
<LinearLayout
android:orientation="vertical"
android:gravity="bottom"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
<!-- linearLayour for fab button-->
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end|left"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</LinearLayout>
<!-- LinearLayour for AdView-->
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.gms.ads.AdView
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.google.android.gms.ads.AdView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<!-- end from here-->
</android.support.design.widget.CoordinatorLayout>
I have tried it and it does work well.
Instead of using a FrameLayout as the parent to your Ad layout, use a vertical LinearLayout. FrameLayout add it's children as frames. If you want to use it, then add a bottom margin to the content_main which should be equal or greater than the height of the Ad layout.
The FrameLayout does it like so:
Child views are drawn in a stack, with the most recently added child on top.
So you need to add the fab after/below the AdView, if you want it to appear over it.
Related
I'm using appbarlayout in my app and when I include that layout in my main layout and place edittext below that layout my edittext is getting shifted to bottom. What I'm trying to do is setting edittext below toolbar but it is getting shifted at bottom of layout and also the floating action button is showing bit higher than it is showing in editor.
My toolbaractiivty
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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"
android:id="#+id/coordinatorlayout">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_height="192dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:toolbarId="#+id/toolbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"></android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#android:drawable/ic_input_add"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:clickable="true" />
</android.support.design.widget.CoordinatorLayout>
And here I'm including it in main_activity
<ScrollView android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true"
android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android" >
<RelativeLayout 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=".MainActivity"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fitsSystemWindows="true">
<include layout="#layout/toolbar_activity"
android:id="#+id/toolbaractivity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbaractivity"/>
</RelativeLayout>
</ScrollView>
Use wrap_content for NestedScrollView's layout_height
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"></android.support.v4.widget.NestedScrollView>
I am new to CoordinateLayout. I want my appBar to hide when listView in FrameLayout scroll up and show again when listView scroll down. But there is two problems.
1" FrameLayout getting out of the screen partially from below.
2" AppBar is not scrolling with listView.
In this below image the blue border is FrameLayout and it is out of screen from below.
Below is activity_main.xml;
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="#f9f8f8">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.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:elevation="4dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container"
android:paddingRight="16dp"
android:paddingLeft="16dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
And below is fragment_main_list.xml to which I am populating in FrameLayout of activity_main.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.nishant.veuz.FragmentMainList">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/main_progress_bar"
android:layout_gravity="center"
android:visibility="gone"/>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/list_view_main"
android:dividerHeight="16dp"
android:divider="#null"/>
</FrameLayout>
Try to change your Parent Layout from CoordinatorLayout into LinearLayout, like so
...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="#f9f8f8"
android:fitsSystemWindows="true">
...
from your NestedScrollView try to enclose it with;
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<!-- MAIN CONTENT-->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container"
android:paddingRight="16dp"
android:paddingLeft="16dp" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
I have coded a simple fragment which couple of text views and a button , all in a RelativeLayout.
<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=".fragments.TutorialFragment">
<TextView
android:id="#+id/tuto_title"
style="?android:textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="#string/tutorial_title"/>
<TextView
android:id="#+id/tuto_msg"
style="?android:textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tuto_title"
android:padding="20dp"
android:text="#string/tutorial_txt"/>
<Button
android:id="#+id/nextBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="15dp"
android:text="#string/next"/>
</RelativeLayout>
This fragment displays great on the StudioDesigner , however when executing the code the title is missing
The Activity Layout is
<?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:fitsSystemWindows="true"
android:id="#+id/coordinatorLayout"
tools:context="com.crocodil.software.a1ccalc.A1CActivity">
<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>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
It looks as the fragment calculates its available space before the toolbar is placed...
This is the Screen as I see it in the designer
Thanks for any hints
The problem is that the FrameLayout is behind the toolbar, the main way of adding a view within the coordinator layout that has a toolbar is to either set a margin or add app:layout_behavior="#string/appbar_scrolling_view_behavior" to the Framelayout
<?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:fitsSystemWindows="true"
android:id="#+id/coordinatorLayout"
tools:context="com.crocodil.software.a1ccalc.A1CActivity">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_marginTop="?attr/actionBarSize"
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>
Take this attribute
app:layout_behavior="#string/appbar_scrolling_view_behavior"
and put it on the FrameLayout fragment_container.
I have a layout A that includes another layout B, but A overlaps B such that part of B isn't shown.
This is layout B:
and this is the source code:
<?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="match_parent">
<ListView
android:id="#+id/listView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
and layout A:
and its source:
<?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:fitsSystemWindows="true"
tools:context="com.byte64.i_assembly.activity.BillDetailActivity">
<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/test_layout" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_action_download" />
</android.support.design.widget.CoordinatorLayout>
as you can see the first item in the list is hidden.How do i solve this? I've played around with the layout_height and layout_width of both layouts with no luck.
Use your test_layout like this.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
Change value of tools:context=".MainActivity" with your layout where you want to display.
Change your name of layout in tools:showIn="#layout/activity_main" if you are not using default name of layou
you should add xmlns:app="http://schemas.android.com/apk/res-auto" and app:layout_behavior="#string/appbar_scrolling_view_behavior"to your RelativeLayout which wrapp ListView , this work for me
Try this out...
<android.support.v4.widget.NestedScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- include your layout-->
</android.support.v4.widget.NestedScrollView>
I am using a FAB(Floating action button) and a ViewPager that has a list inside a fragment.
The ViewPager stops due to the FAB block and each are blocks the ViewPager being on top of the FAB
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top|center"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
tools:context=".MainActivity"/>
<com.melnykov.fab.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_margin="16dp"
android:src="#drawable/ic_add_white_18dp"
fab:fab_colorNormal="#2E972E"/>
</LinearLayout>
fragment_card.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/dribbbleFeedListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#null"
android:dividerHeight="0dp"/>
</FrameLayout>
So how can I get the FAB to appear fixed over the sliding ViewPager views?
You need a FrameLayout. In a FrameLayout, the children are overlapped on top of each other with the last child being at the topmost.
activity_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top|center"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
tools:context=".MainActivity"/>
</LinearLayout>
<com.melnykov.fab.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_margin="16dp"
android:src="#drawable/ic_add_white_18dp"
fab:fab_colorNormal="#2E972E"/>
</FrameLayout>