I implemented the bottom navigation bar using Navigation Component, it works fine when changing fragments using the bottom navigation bar. But when I navigate from within a fragment, it jumps and creates a white space - gif
How can I fix this?
Here is the XML for activity_main
<?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:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#+id/bottom_nav_bar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/nav_graph" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav_bar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_menu"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Edit :
This problem was caused because I tried to show and hide the top toolbar.
I used the following code to show/hide toolbar in the OnCreateView() function of the fragments
code : (activity as AppCompatActivity).supportActionBar?.show() and (activity as AppCompatActivity).supportActionBar?.hide()
How can I fix the above problem without losing the hide/show toolbar functionality?
This might be a bit late, but perhaps helps someone else.
So, to solve this, you have to do 3 things:
1: Add the action bar as an overlay over your layout system:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="windowActionBarOverlay">true</item>
</style>
This ensures that hiding the BottomNavigationView doesn't jump, flicker, or create any unwanted white space. Obviously, this will overlap your layout, so you could set a marginTop of the preferred action bar height.
So, so far no more white space and jumps on the bottom, but this leads to another problem, there will be a permanent whitespace when the action bar is hidden. Combatting this leads to the next point
2: Add an auxiliary view instead of a top margin of height exactly as of the action bar's:
<?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">
<View
android:id="#+id/toolbar_placeholder"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar_placeholder" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_nav_height"
android:layout_alignParentBottom="true"
app:itemBackground="#drawable/bg_bottom_nav_item"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
app:labelVisibilityMode="labeled" />
</RelativeLayout>
We will show/hide this auxiliary view at the top of the layout, named toolbar_placeholder
3: Actually hide and show the toolbar placeholder:
myRecyclerView.addOnScrollListener(object: RecyclerView.OnScrollListener() {
val mainActivity = requireActivity() as MainActivity
var scrollDown = false
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
super.onScrollStateChanged(recyclerView, newState)
if (scrollDown) {
// set toolbar_placeholder visibility to View.GONE
// hide the action bar
// hide the bottom navigation bar (preferably with animation)
} else {
// set toolbar_placeholder visibility to View.VISIBLE
// show the action bar
// show the bottom navigation bar (preferably with animation)
}
}
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
super.onScrolled(recyclerView, dx, dy)
if (dy > 50) {
scrollDown = true
} else if (dy < -5) {
scrollDown = false
}
}
})
PS: (you can try setting a marginTop anc changing the LayoutParams alltogether programatically instead of hiding and showing the toolbar placeholder View, but I chose the latter one)
Cheers!
Related
I had a bit of trouble figuring out how to word this one when researching so I've made a quick mockup of what I'm trying to achieve below.
my app has a persistent bottom sheet and I would like the contents of the sheet to be resized based on whether the sheet is expanded or half expanded.
My sheet consists of a recycler view and a view at the bottom with some buttons. Currently, the contents of the sheet are always sized as though the sheet is full expanded. This means that the buttons are not displayed unless the sheet is fully expanded and much of the recycler view is also hidden behind the cropped-off sheet. What I want to happen is for the buttons to always be displayed at the bottom of the sheet, even when said sheet is half expanded, and for the recyclerview to fill whatever space is left. Is this possible in a persistent bottom sheet and if now, what means should I use to achieve this? And help would be greatly appreciated.
You can make the buttons layout to always be displayed at the bottom of the sheet by setting its y coordinate by tracking the bottom sheet sliding using addBottomSheetCallback callbacks:
val bottomSheet = findViewById<ConstraintLayout>(R.id.bottom_sheet)
val bottomLayout = findViewById<LinearLayout>(R.id.button_layout)
// initial setting the y coordinates of the bottom layout
bottomSheet.post {
val bottomSheetVisibleHeight = bottomSheet.height - bottomSheet.top
bottomLayout.y =
(bottomSheetVisibleHeight - bottomLayout.height).toFloat()
}
BottomSheetBehavior.from(bottomSheet).apply {
addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
override fun onSlide(bottomSheet: View, slideOffset: Float) {
// set the y coordinates of the bottom layout on bottom sheet slide
val bottomSheetVisibleHeight = bottomSheet.height - bottomSheet.top
bottomLayout.y =
(bottomSheetVisibleHeight - bottomLayout.height).toFloat()
}
override fun onStateChanged(bottomSheet: View, newState: Int) {
}
})
}
Layout:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Main Layout -->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:behavior_hideable="false"
app:layout_behavior="#string/bottom_sheet_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#CFE2F3"
app:layout_constraintBottom_toTopOf="#+id/button_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/button_layout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#FF03DAC5"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="40dp"
android:layout_weight="1"
android:text="cancel" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:text="ok" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I'm trying to get an effect similar to that of the toolbar in the google messages app.
Basically the toolbar has a solid color and when the user scrolls it becomes transparent with a shadow at the bottom.
I managed to get a shadow effect but I can't get the transparent effect.
This is what I'm trying to achieve:
And this is what I can get:
This is my XML AppBarLayout with toolbar:
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:liftOnScroll="true">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:titleTextColor="#color/colorTextMain"
android:background="#color/colorPrimary">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
Solution
I managed to get what I wanted! I thought it was easier to get it, however, i write my solution in case it is useful and if someone wants to improve it!
First, google app messages way to do it.
When the user does not scroll, toolbar elevation is 0.
When the user scrolls, toolbar elevation is changed and the entire toolbar and status bar (notice status bar) are transparent!
How does mine look?
Let's create a CoordinatorLayout with inside a ToolBar, NestedScrollView and a LinearLayout:
<?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"
android:orientation="vertical"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:background="#color/colorPrimary">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorToolbar"
android:elevation="0dp"
app:titleTextColor="#color/colorTextMain"
android:fitsSystemWindows="true"/>
<androidx.core.widget.NestedScrollView
android:id="#+id/myScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
... place page content here ...
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Now, inside your class OnCreate method
// find the toolbar view inside the activity layout
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setTitleTextAppearance(this, R.style.FontStyle);
Objects.requireNonNull(getSupportActionBar()).setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setTitle(getString(R.string.about));
toolbar.setElevation(1); // required or it will overlap linear layout
toolbar.setBackgroundColor(Color.TRANSPARENT); // required to delete elevation shadow
// status bar height programmatically , notches...
statusBarHeight = getStatusBarHeight();
linearLayout = findViewById(R.id.linear_layout);
linearLayout.setPadding(1,180+statusBarHeight,1,0);
ViewGroup.LayoutParams params = toolbar.getLayoutParams();
params.height = 180+statusBarHeight;
toolbar.setLayoutParams(params);
Since we have notches ( :-( ), we have to calculate status bar height programatically. By default status bar height is 24dp. Unfortunately not all notch phones use 24dp. How to calculate status bar height programatically
Now we need to handle toolbar elevation whether the user moves along the page or not. Inside your class OnCreate method
NestedScrollView scroller = findViewById(R.id.myScroll);
scroller.setOnScrollChangeListener((NestedScrollView.OnScrollChangeListener) (v, scrollX, scrollY, oldScrollX, oldScrollY) -> {
if (scrollY > oldScrollY) {
// when user scrolls down set toolbar elevation to 4dp
toolbar.setElevation(4);
toolbar.setBackgroundColor(getColor(R.color.colorToolbar));
}
if (scrollY < oldScrollY) {
// when user scrolls up keep toolbar elevation at 4dp
toolbar.setElevation(4);
toolbar.setBackgroundColor(getColor(R.color.colorToolbar));
}
if (scrollY == 0) {
// if user is not scrolling it means
// that he is at top of page
toolbar.setElevation(1); // required or it will overlap linear layout
toolbar.setBackgroundColor(Color.TRANSPARENT); // required to delete elevation shadow
}
});
Almost done! This is a crucial part! Again inside your class OnCreate method
switch (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) {
case Configuration.UI_MODE_NIGHT_YES:
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
getWindow().setStatusBarColor(Color.TRANSPARENT);
break;
case Configuration.UI_MODE_NIGHT_NO:
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
getWindow().setStatusBarColor(Color.TRANSPARENT);
break;
}
Configuration.UI_MODE_NIGHT_YES and Configuration.UI_MODE_NIGHT_NO: are a way to handle dark and light theme. Since we are going to put all the entire content of the page on the status bar we won't have control anymore of status bar icons colors (obtainable via styles) and so we need to detect if a light or dark theme is enabled for programatically set status bar icons colors!
I think you have to make your appbar lay on a piece of view.
Try something like that:
<androidx.constraintlayout.widget.ConstraintLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#color/transparent_color"
app:liftOnScroll="true">
<androidx.appcompat.widget.Toolbar
android:background="#color/colorPrimary"
android:fitsSystemWindows="true"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/transparent_color"
android:minHeight="?attr/actionBarSize"
app:titleTextColor="#color/colorTextMain"/>
</com.google.android.material.appbar.AppBarLayout>
<fragment
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'm trying to setup fullscreen activity for Android 10 using insets. I wanted to have an image in toolbar drawn behind status bar. I've tried to use android:fitsSystemWindows flag in different combinations, but it doesn't work, AppBarLayout doesn't have correct padding and status bar slightly overlaps toolbar menu controls. So I've used convenient WindowInsetsCompat wrapper, Insetter library by Chris Banes, to set paddings according to system window insets.
Here is my layout:
<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:id="#+id/book_activity_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
tools:context="com.bookcrossing.mobile.ui.bookpreview.BookActivity"
>
<androidx.core.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
...
</androidx.core.widget.NestedScrollView>
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/toolbarContainer"
android:layout_width="match_parent"
android:layout_height="220dp"
>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="bottom"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="true"
app:toolbarId="#id/toolbar"
>
<ImageView
android:id="#+id/cover"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/cover_description"
android:scaleType="centerCrop"
android:cropToPadding="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
tools:title="War and Peace"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/favorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_padding"
android:clickable="true"
android:focusable="true"
android:src="#drawable/ic_turned_in_not_white_24dp"
app:layout_anchor="#id/toolbar_container"
app:layout_anchorGravity="bottom|right|end"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Here is how I set the paddings in code:
Insetter.setOnApplyInsetsListener(toolbarContainer, (view, windowInsets, initial) -> {
view.setPadding(initial.getPaddings().getLeft(),
windowInsets.getSystemWindowInsetTop() + initial.getPaddings().getTop(),
initial.getPaddings().getRight(), initial.getPaddings().getBottom());
});
Insetter.setOnApplyInsetsListener(cover, (view, windowInsets, initial) -> {
ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
params.topMargin = windowInsets.getSystemWindowInsetTop() + initial.getMargins().getTop();
view.setLayoutParams(params);
});
Insetter.setOnApplyInsetsListener(nestedScrollView, (view, windowInsets, initial) -> {
view.setPadding(initial.getPaddings().getLeft(), initial.getPaddings().getTop(),
initial.getPaddings().getRight(),
windowInsets.getSystemWindowInsetBottom() + initial.getPaddings().getBottom());
});
Insetter.setOnApplyInsetsListener(favorite, (view, windowInsets, initialPadding) -> {
view.setPadding(initialPadding.getPaddings().getLeft(), initialPadding.getPaddings().getTop(),
windowInsets.getSystemWindowInsetRight() + initialPadding.getPaddings().getRight(),
initialPadding.getPaddings().getBottom());
});
I set window flags for the fullscreen mode:
root.setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
And this is the result pictured:
Status bar is set to be transparent, blue color is from the toolbar that has top padding.
As a final result, I would like image to be drawn behind the status bar, is it possible at all?
I'm testing on the Android 10 emulator.
Your flags seem to be wrong. You set the flag for the navigation bar while you should be setting the one for the status bar.
Here is the code I use (Kotlin):
requireActivity().window?.decorView?.systemUiVisibility = (
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)
to make the UI draw behind status bar without the status bar getting hidden. Then I use this extension function I use on views that should not overlap with the status bar like buttons and other controls:
fun View.alignBelowStatusBar() {
this.setOnApplyWindowInsetsListener { view, insets ->
val params = view.layoutParams as ViewGroup.MarginLayoutParams
params.topMargin = insets.systemWindowInsetTop
view.layoutParams = params
insets
}
}
So the first flags would ensure your backgrounds/images go under the status bar. The second one is to make sure that your controls are not overlayed by the status bar.
As I remember you don't need to support paddings in CoordinatorLayout manually, please see setupForInsets function in CoordinatorLayout class. To support drawing behind status bar you should set android:fitsSystemWindows="true" for CoordinatorLayout:
<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:id="#+id/book_activity_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
tools:context="com.bookcrossing.mobile.ui.bookpreview.BookActivity"
>
And as I understand you do not need animateLayoutChanges here. It's responsible for animations in layout changes such as removing/adding and showing/hiding views.
android:fitsSystemWindows="true"
I have a bottom app bar with centered fab and menu. I want to change fab alignment and menu when I selecting an item in my list. The changes work great but the animation show blinking effects.
I tried to use an handler to change menu when fab animation is ended (300ms according to the bottom app bar class) but the side effect remains
My layout:
<androidx.coordinatorlayout.widget.CoordinatorLayout
...>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
...>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/home_expenseList"
.../>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
<com.google.android.material.bottomappbar.BottomAppBar
app:layout_dodgeInsetEdges="bottom"
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:hideOnScroll="true"
app:navigationIcon="#drawable/ic_menu"
app:layout_scrollFlags="scroll|enterAlways"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/appBar_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add"
app:tint="#null"
app:layout_anchor="#id/appBar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
My code :
override fun onSelectionModeChange(isActive: Boolean) {
selectionIsActive = isActive
when (isActive) {
true -> {
appBar.navigationIcon = null
appBar.replaceMenu(R.menu.bottom_app_bar_selection_menu)
appBar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_END
appBar_fab.setImageDrawable(getDrawable(R.drawable.ic_close))
}
false -> {
appBar.navigationIcon = getDrawable(R.drawable.ic_menu)
appBar.replaceMenu(R.menu.bottom_app_bar_menu)
appBar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_CENTER
appBar_fab.setImageDrawable(getDrawable(R.drawable.ic_add))
}
}
}
I expected an animation like this : https://storage.googleapis.com/spec-host/mio-staging%2Fmio-components%2F1568406561463%2Fassets%2F1KJSld6h82fzkcafrHCDFPOITibpWxF-5%2Fbehavior-layout-primary.mp4
I have :
bottombar animation
Thanks
No matter how I add constraints, nothing changes in terms of my Fragment which contains a RecyclerView.
I have added a toolbar:
OnCreate in MainActivity
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)//TODO find inconsistencies
val demo = DemoDataBuilder()
// Set the toolbar as support action bar
setSupportActionBar(toolbar)
// Now get the support action bar
val actionBar = supportActionBar
// Set toolbar title/app title
actionBar!!.title = "AwezaMed"
// Set action bar/toolbar sub title
actionBar.subtitle = "App subtitle"
// Set action bar elevation
actionBar.elevation = 4.0F
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_black_24dp)
toolbar.setNavigationOnClickListener { _ -> onBackPressed()}
startCategoryHome(savedInstanceState)
}
activity_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"
android:id="#+id/root_layout">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="?attr/colorPrimary"
android:minHeight="57dp"
android:padding="1dp"
app:layout_constraintTop_toTopOf="parent"
app:subtitleTextColor="#f5fbff"
app:titleTextColor="#fff" />
<fragment
android:id="#+id/categoyList_fragment"
android:name="za.co.aweza.awezamediphrases.fragments.CategoryListFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="112dp"
app:layout_constraintTop_toBottomOf="#+id/toolbar"
tools:layout="#layout/fragment_hcp_category" />
</android.support.constraint.ConstraintLayout>
You'll notice that in the layout code above, I have a very farfetched constraint that I tried to use.
Here is how it appears in designView:
But regardless of anything I try, the first cell of the RV in the Fragment sits mostly underneath the toolbar. What am I missing?
instead of fragment put this in your xml:
`<FrameLayout
android:id="#+id/frameLayout_fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#id/toolbar" />`
Replace the frame layout with any fragment you want using this function:
` fun openFragment(fragment: Fragment) {
val transaction = supportFragmentManager.beginTransaction()
transaction.replace(R.id.frameLayout_fragment_container, fragment)
transaction.addToBackStack(null)
transaction.commit()
}`
#EliodeBeirut's answer worked, but I found that changing the layout activity_main.xml from Constraint layout to Linear Layout worked as well.