Fragment content in activity not properly sized - java

I am using fragments in an activity with a BottomNavigationView and out of the box I noticed the fragment content goes below the BottomNavigationView
This is the fragment in Android studio before inflating it in the activity:
The app after the fragment has been inflating:
Here is my fragment XML I read on other posts on this site that I needed to use the CoordinatorLayout as parent and add app:layout_behavior="#string/appbar_scrolling_view_behavior" to the first child but it didn't work.
<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_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_margin="16dp"
tools:context="com.brigafrica.koyako.fragments.SendFragment">
<TextView
android:id="#+id/textView"
style="#android:style/TextAppearance.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="36dp"
android:text="#string/amount_to_send"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatEditText
android:id="#+id/edtAmountToSend"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:digits="0123456789.,"
android:inputType="numberDecimal"
app:layout_constraintBottom_toTopOf="#+id/appCompatButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintVertical_bias="0.095" />
<android.support.v7.widget.AppCompatButton
android:id="#+id/appCompatButton"
style="#style/AppTheme.RoundedCornerMaterialButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_margin="10dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="#string/send"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

What is necessary to identify the problem is your activity XML content and how you are managing the fragments in your activity.
The simplest way to think is that the fragment is just a content that will be displayed in a piece of your activity, and you should provide the correct information about the dimensions of this piece in your activity.
Explaining with my example
An activity called MainActivity that has one ViewPager and one BottomNavigationView.
<?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"
tools:context="newidea.com.br.bottomnavigationexample.MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/main.viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation"
android:layout_alignParentTop="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/colorPrimary"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
app:menu="#menu/bottom_navigation_main" />
</RelativeLayout>
The ViewPager is the piece where the fragment will be displayed in MainActivity, so I have to tell the activity that the ViewPager can not invade the BottomNavigationView space, if not the fragment content that will be displayed in the ViewPager will goes below the BottomNavigationView.
How to do that ?
In my example I configured the ViewPager with this:
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation"
android:layout_alignParentTop="true"
It means that the ViewPager width and height matchs the parent's width and height, the ViewPager top is aligned with the parent's top, and it is a layout above the BottomNavigationView, so the ViewPager can not invade the BottomNavigationView space.
What you need to understand is that doesn't matter what is in your fragment, what really matter here is the dimensions configuration of the ViewPager, because the ViewPager will display the fragment.
Full example with 3 fragments, each one with a Button in the Bottom
Fragment in Android Studio before inflating
The app after the fragment has been inflated

Related

How to use BottomAppBar with BottomNavigationView inside in a Single Activity App Architecture?

I want to add a FloatingActionButton in the middle of BottomAppBar with curve below.
So i Added tried to design the MainActivity like below. I maintained Single Activity Architecture in this app.
Now, I have faced two problems.
If I want to set Visibility:gone for bottomappbar & floatingActionButtonin any particular fragment than both are gone but created an empty view. Like the screen shot. How can I remove that empty view?
I want to make transparent the gap between FloatingActionButton & BottomAppBar. But failed to do that.
This is the code below of my MainActivity's XML.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".ui.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar" />
</com.google.android.material.appbar.AppBarLayout>
<fragment
android:id="#+id/my_nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
app:defaultNavHost="true"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
app:navGraph="#navigation/navigation_graph" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:fabCradleMargin="10dp"
app:elevation="0dp"
app:fabCradleRoundedCornerRadius="10dp"
app:fabCradleVerticalOffset="10dp">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="16dp"
android:background="#android:color/transparent"
app:menu="#menu/navigation_menu" />
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_dashboard_add"
app:backgroundTint="#color/colorDashboardFloatingButton"
app:tint="#color/colorWhite"
app:layout_anchor="#id/bottomAppBar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Here are the screenshots.

How to keep the floatingActionButton fixed at is original position when scrolling the recyclerview

I need help to keep the fab shown in pics at a fixed position when scrolling up or down i cant find anything on google as most search results return information on hiding the fab when scrolling
Here is my 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"
android:background="#color/accent"> <android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/accent"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="1dp"
/>
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/addmorefab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="#dimen/fab_marginBottom"
android:layout_marginRight="#dimen/fab_marginRight"
android:clickable="true"
app:backgroundTint="#color/primary"
app:srcCompat="#drawable/ic_action_new"
app:layout_anchor="#id/listView"
app:layout_anchorGravity="bottom|right|end"
/></android.support.constraint.ConstraintLayout>
I even tried to make two constraint layouts it didnt work
I also tried using recyclerView.setNestedScrollingEnabled(false);
It worked but it was limiting the scrolling of the recyclerview.
On the second picture i want the fab to remain fixed where it is not scrolling
You can use this view if you want your bright button to remain fixed while scrolling through the recycler.
I used Android X libraries and you can use lower version libraries.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/addmorefab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="18dp"
android:layout_marginBottom="18dp"
android:clickable="true"
app:backgroundTint="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#android:drawable/ic_input_add" />
</androidx.constraintlayout.widget.ConstraintLayout>

AndroidStudio: How to move a button in a fragment

How can i move in Android Studio elements like buttons or textViews within a fragment? In an Activity i can take the button with drag&drop, but this seems not to work within fragments.
So now my button is in the left corner, but i wish to place them in the middle.
<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.test.fragmenttest.BlankFragment">
<Button
android:id="#+id/button"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="Button" />
</FrameLayout>
set android:gravity="center" in your parent FrameLayout
There is no difference if you're using fragments or activities, it's all about your layout type. Try to use ConstraintLayout instead of yours or set android:gravity="center" in your FrameLayout.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="Button" />
</android.support.constraint.ConstraintLayout>
Or:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_gravity="center"/>
</FrameLayout>

Android: Swipe to refresh gets stuck on a recycler view with view pager

Here is my XML code
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/flipper">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/refreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/headerLayout"
android:background="#color/background_color"
android:visibility="visible">
<android.support.v7.widget.RecyclerView
android:id="#+id/list_appointment"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</android.support.v4.widget.SwipeRefreshLayout>
<RelativeLayout
android:id="#+id/emptyView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone">
<ImageView
android:id="#+id/empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_event_note"
android:textAppearance="?android:textAppearanceMedium" />
</RelativeLayout>
</FrameLayout>
The RecyclerViews adapter supports two types of views one is CardView and another is ViewPager.
When I swipe to refresh, the circular refresh icon freezes on top of the ViewPager.onrefresh method is called after I tap the refresh icon again.Is there any fix to this issue?

While scrolling RecyclerView CoordinatorLayout is shown

I have implemented an activity with two slides, the slides content is a fragment with RecyclerView that loads data from my server and creates a GridLayout with images (like in image gallery).
I have added the behavior of scrolling so when you scroll you don't see the toolbar.
My problem is that when the activity starts with the fragment the toolbar is half hidden and when i continue to scroll down and the toolbar is completely hidden the CoordinatorLayout from under is exposed so i get this thing:
as you can see the light green is the CoordinatorLayout and the red is the ViewPager and what i want to achieve is that when you scroll more you will only see the red background and never the green one.
My activity_main.xml
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/backgroundGray"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#color/appGreen"
app:layout_scrollFlags="scroll|enterAlways">
<com.apps.haver.getout.libs.view.CustomTextView
android:id="#+id/actionBarTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:ellipsize="end"
android:maxLines="1"
android:text="Get Out"
android:textColor="#color/white"
android:textSize="50sp"
app:fontName="Peterbuilt.ttf" />
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#565654"
android:orientation="vertical"
android:scrollbars="none">
<com.apps.haver.getout.libs.slider.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/normal_row"
android:background="#color/appGreen"
android:elevation="2dp" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#e90f0f" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
And my fragment.xml
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.apps.haver.getout.FriendsFragment">
<com.apps.haver.getout.libs.view.AutofitRecyclerView
android:id="#+id/rvPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:columnWidth="102dp"
android:fitsSystemWindows="true"
android:scrollbars="vertical" />
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pressToRetryPanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:visibility="gone">
<TextView
android:id="#+id/textPressToRetry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/press_to_retry"
android:textColor="#color/black"
android:textSize="16sp" />
</RelativeLayout>
<include
android:id="#+id/loadingPanel"
layout="#layout/loading_template"
android:layout_width="match_parent"
android:layout_height="match_parent" />
How can I make the toolbar to hide when I am scrolling but still see the RecyclerView content on my entire screen?
Thanks...

Categories

Resources