I have the following 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"
android:id="#+id/coordinator_bracket_activity"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/activity_fragment"
android:layout_height="match_parent"
android:layout_width="match_parent">
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/app_bar_bracket_activity"
layout="#layout/app_bar" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foregroundTint="#color/colorAccent"
app:tabMode="fixed"
app:tabMaxWidth="0dp"
app:tabGravity="fill"/>
<mypackage.NonSwipeViewPager
android:id="#+id/tabs_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
The nonswipeviewpager was just a custom class where I inherited a viewpager to disable some stuff.
Anyway, I have a button on my app bar that needs to call a fragment that needs to cover the whole screen. I would call it and add a fragment on the frame layout. It worked before I added a viewpager for tab layouts. Now I'm not sure how to deal with the viewpager.
FragmentTransaction ft = mFM.beginTransaction();
mCustomFragment = CustomFragment.newInstance(mObject, mListOfObjects());
ft.replace(R.id.activity_fragment, mCustomFragment , "CustomFragment");
ft.addToBackStack(null);
ft.commit();
This is on my clicklistener of that button on the app bar.
Thoughts?
Views are drawn in the order they are defined in your XML. If you want a View on top of another view it should appear after it or you try to use:
https://developer.android.com/reference/android/view/View.html#bringToFront()
Related
I have tried the combination of AppBarLayout and CollapsingToolbarLayout, which doesn't work for this situation. It seems that it only works for a main activity layout. Is it possible to pin the tab layout when scrolling up when it comes to the tab layout which is inside Fragment C? Thanks for your help.
This is a Fragment consisting of Fragment A, Fragment B, Fragment C, Fragment C contains a view pager and tab layout.
Finally, I would like to pin the tab layout on top of the screen when scrolling up.
You can use StickyScrollView https://github.com/emilsjolander/StickyScrollViewItems
<com.kiwkard.views.StickyScrollView
android:id="#+id/sticky_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical"
android:tag="sticky-nonconstant">
<android.support.design.widget.TabLayout
android:id="#+id/tab_Layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:tabGravity="fill"
app:tabIndicatorHeight="3dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="#color/black_30"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager_event"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</com.kiwkard.views.StickyScrollView>
don't forget to give tag attribute in your layout which you want to be fixed, and you can go through to above mentioned link for more tags according to your requirement.
What is the best way to handle the situation where I have fragments that should not include a ToolBar (Those would be handle by the Activity) and some including the Toolbar? I know how to make it transparent, but how can I create a template that can easily be modular to handle both situation?
For a specific Fragment I want a transparent Toolbar with the Fragment content partly behind the Toolbar like this:
I tried to have another FrameLayout that cover all the screen and then is replace by the FragmentTransaction but nothing happens...
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activityv2.ActivityHome">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<include layout="#layout/action_bar" />
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/left_drawer_item"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:alpha="0.92"
android:background="#color/gray_very_dark"
android:orientation="vertical">
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/full_content_frame"
android:background="#color/dark_red"
android:fitsSystemWindows="true"/>
</android.support.v4.widget.DrawerLayout>
For the fragment that doesn't require a Toolbar, I replace the FrameLayout "content_frame" and for the one that require an invisible ToolBar I replace "full_content_Frame". For the second one, nothing happens when I replace it. Here is the code to replace the fragment:
private void selectProfilFragment() {
BackHandledFragment fragment = new FragmentUserProfil();
setSelectedFragment(fragment);
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.setCustomAnimations(R.anim.pull_in_right, R.anim.push_out_left, R.anim.pull_in_left, R.anim.push_out_right);
ft.replace(R.id.full_content_frame, fragment)
.addToBackStack(fragment.getTagText())
.commit();
setTitle("Profil");
mDrawerLayout.closeDrawer(mDrawerLinear);
}
i'm using a Material swipe tab to show with swipe 3 different fragment layout.
This is the xml layout for swipe tab:
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<com.android4devs.slidingtab.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1"
></android.support.v4.view.ViewPager>
</LinearLayout>
Now the xml layout fragment of swipe have a button fixed into bottom of layout so when i swipe to this fragment the layout of fragment is cut see image:
there some way to fix the layout fragment into ViewPager or a way for scroll it with a scroller view?
Thanks
In your second Fragment, you can use
scrollView.post(new Runnable() {
#Override
public void run() {
scrollView.fullScroll(View.FOCUS_DOWN);
}
});
To scroll your ScrollView to the bottom, so your Button will be totally visible.
In my application I have an issue where I want to have high level navigational control from a navigation drawer, and page level control within a TabLayout within a fragment. This however causes issues with the shadow rendering from the AppBar onto the fragment.
Here's the basics of what my layouts and code does. At the root I have this simple 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=".MainAppActivity">
<android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
android:layout_width="match_parent" 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>
When my navigation drawer is selected I inflate the fragment into "content_main"
this.getSupportFragmentManager()
.beginTransaction()
.addToBackStack(tag)
.replace(R.id.content_main_layout, fragment, tag)
.commit();
The fragment being put into content_main contains a layout with my TabView and a view pager:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_github_issues"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/github_issues_tab_layout"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_gravity="top"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme.AppBarOverlay"/>
<android.support.v4.view.ViewPager
android:id="#+id/github_issues_viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
What's the a good best practice to fix the issue? Is including TabLayout to live within the top level AppBar and just disabling the view based on the page an acceptable implementation?
First you need to change the view hierarchy to something like this:
FrameLayout
-CoordinatorLayout -> content
-Toolbar
Fix Toolbar elevation to be exact with the AppBarLayout, too get rid of the shadow but keep the z-order of the Toolbar:
int appBarLayoutElevation = ViewCompat.getElevation(mAppBarLayout);
getActivity().getSupportActionBar().setElevation(appBarLayout);
Similar example I have worked in my blog post.
I have a RecyclerView in a LinearLayout. How can I have LinearLayout "slide" upwards until it hits the App Bar, whereby the RecyclerView should then begin scrolling the items as usual. Likewise, scrolling the list down will begin to "slide" the entire container down when the the first item is reached in the list until the container returns to its starting position.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/nearby_stops"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="#dimen/half_padding"
android:paddingTop="#dimen/half_padding"
android:scrollbars="none" />
</LinearLayout>
I looked at https://github.com/umano/AndroidSlidingUpPanel, however it does not support RecyclerView and the moment.
Put the RecyclerView inside a Fragment, so make an XML like so for the Fragment:
This is your XML for the RecyclerView
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/nearby_stops"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="#dimen/half_padding"
android:paddingTop="#dimen/half_padding"
android:scrollbars="none" />
</LinearLayout>
Then for the Activity hosting the Fragment just add a FrameLayout for the Fragment:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Put other views here -->
<FrameLayout
android:id="#+id/slidingFragmentContent"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Then inside your Activity when you instantiate the Fragment do the following:
SampleFragment listFragment = new SampleFragment();
getSupportFragmentManager().beginTransaction()
.setCustomAnimations(R.anim.abc_slide_in_bottom, R.anim.abc_slide_out_bottom,
R.anim.abc_slide_in_bottom, R.anim.abc_slide_out_bottom)
.addToBackStack(null)
.add(R.id.slidingFragmentContent, listFragment)
.commit();
The animations R.anim.abc_slide_in_bottom and R.anim.abc_slide_out_bottom are available in the Android API.
I also noticed you're not setting any orientation for your LinearLayouts. Set an orientation like so android:orientation="..."
You can assign a Button to show the Fragment, like so:
mButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
showFragment();
}
});
--------------------------------------------------------------------
To get the RecyclerView to scroll up as you scroll it just use the following:
Create an XML layout like this for your Activity:
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/map_view_height"
android:orientation="vertical"
android:fitsSystemWindows="true">>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<YourCustomViewContainingTheMap
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Inflate your Fragment inside the FrameLayout and then as you scroll up it should do a parallax animation on the Map. If you don't want a Parallax effect just set app:layout_CollapseMode="pin"
Here is a sample app I created, you can see as I scroll up on the RecyclerView it slides up:
(Please note the Frame Animations on GIFs is not that great)
To get a shadow behind the sliding list on your map, just set app:layout_collapseMode to parallax and then add another view in front of your MapView inside the CollapsingToolbarLayout which can be your mask, it can be be a simple view, and then you can adjust it's alpha value as you scroll up the list.
It's better to use the native android views at your disposal, I noticed that AndroidSlidingPanelLayout has around 43 issues.