In my app, when user clicks on a contact icon, I want to display contact's information in a slide, that appears from bottom and can be swiped up to cover the whole screen, or swiped down to dissapear.
I tried to use the SlidingUpPanel from umano, but I couldn't make it work as I need, because it was not designed for that.
Is there some library for that?
This is called a BottomSheet in Android. You can create your own bottom sheet simply using a view as a Child of a coordinator layout.
Add to your app build.gradle:
dependencies{
compile 'com.android.support:design:24.1.1'
}
And then use these classes to create your own:
BottomSheetDialogFragment
BottomSheetDialog
BottomSheetBehavior
BottomSheetBehavior.BottomSheetCallback
Here is an overly simplified demo to show how to make a FrameLayout act as a bottom sheet, you can replace the contents of the FrameLayout with a Fragment and pass information to it as needed. (in your case whichever contact was clicked):
The 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="com.sample.bottomsheetsample.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>
<RelativeLayout
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="com.kdotj.bottomsheetsample.MainActivity"
tools:showIn="#layout/activity_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</RelativeLayout>
<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="#android:drawable/ic_dialog_email" />
<!-- Notice a few things:
app:layout_behavior="#string/bottom_sheet_behavior" required to act as bottom sheet
app:behavior_peekHeight="244dp" this is the collapsed state height
app:behavior_hideable="true" lets you swipe to dismiss the sheet
android:elevation="#dimen/design_appbar_elevation" puts the sheet over the action bar
-->
<FrameLayout
android:id="#+id/fl_bottomSheet"
app:layout_behavior="#string/bottom_sheet_behavior"
app:behavior_peekHeight="244dp"
app:behavior_hideable="true"
android:elevation="#dimen/design_appbar_elevation"
android:background="#777"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.AppCompatTextView
android:layout_gravity="center|top"
android:text="Hello, Bottom Sheet!"
android:padding="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
the Activity:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FrameLayout frameLayout = (FrameLayout) findViewById(R.id.fl_bottomSheet);
final BottomSheetBehavior behavior = BottomSheetBehavior.from(frameLayout);
behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
#Override
public void onStateChanged(#NonNull View bottomSheet, int newState) {
//... Handle the state changes
}
#Override
public void onSlide(#NonNull View bottomSheet, float slideOffset) {
//.. handle sliding if you want to
}
});
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
}
});
}
}
Related
I'm using android's new BottomSheet inside Design Library.
Problem is that I'm using it inside a Fragment and It cause that it appear at top of screen instead of appearing at bottom.
This is my Activity xml:
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="ir.aidinsoft.quicktaxi.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/tlbr_acMain"
android:elevation="5dp"
android:background="#color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.design.widget.CoordinatorLayout
android:id="#+id/crdl_acMain"
android:layout_below="#+id/tlbr_acMain"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="#+id/nscv_acMain"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This Layout Is Replacement Layout For Fragment -->
<RelativeLayout
android:id="#+id/frml_acMain"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
And This Is My Fragment xml:
<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"
tools:context="ir.aidinsoft.quicktaxi.MyFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<io.codetail.widget.RevealFrameLayout
android:id="#+id/rvfl_frTaxi"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="invisible">
<fragment
android:id="#+id/frag_frTaxi_map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</io.codetail.widget.RevealFrameLayout>
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/facb_frTaxi_request"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!-- My Bottom Sheet Layout -->
<FrameLayout
android:id="#+id/frml_frTaxi_bottomSheet"
android:layout_width="match_parent"
android:layout_height="360dp"
android:background="#color/colorPrimaryLight"
app:behavior_hideable="true"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior" />
</android.support.design.widget.CoordinatorLayout>
So after Replacing Fragment in Layout with this code:
getSupportFragmentManager().beginTransaction().replace(R.id.frml_acMain, taxiFragment).commit();
I adde this code to reveal BottomSheet on FAB clicked state.
Java Code for Fragment:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment, container, false);
fab = (FloatingActionButton) view.findViewById(R.id.facb_frTaxi_request);
bottomSheet = view.findViewById(R.id.frml_frTaxi_bottomSheet);
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
return view;
}
#Override
public void onResume() {
super.onResume();
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
});
}
What is the problem? what I'm doing wrong?
TnQ
If you are using animateLayoutChanges inside your layout, removing it can fix your problem.
On my phone and that of a friend, the FAB in the default Android Studio Activity does not move down after the Snackbar dismisses.
On the emulator and a few other friends' phones, it does animate down.
The first friend and I have changed animation scale to 0.5, but setting it to 1.0 and rebooting hasn't fixed the issue.
This should have been fixed in Design Support Library 23.2.0, and I am using 23.3.0, as the example comes with that set.
Edit:
The layout and code for completion purposes:
content_main.xml
<?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="com.example.bas.test.MainActivity"
tools:showIn="#layout/activity_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</RelativeLayout>
activity_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:fitsSystemWindows="true"
tools:context="com.example.bas.test.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"
app:layout_scrollFlags="scroll|enterAlways"
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.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_folder_open_black_24dp" />
</android.support.design.widget.CoordinatorLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
View.OnClickListener mOnClickListener;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
if (fab != null) {
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Snackbar.make(view, "You clicked the FAB!", Snackbar.LENGTH_LONG)
.setAction("Change bar text", mOnClickListener).show();
}
});
}
mOnClickListener = new View.OnClickListener() {
#Override
public void onClick(View v) {
getSupportActionBar().setTitle("Changed!");
}
};
}
}
As suggested by #ianhanniballake, this was fixed in Design Support Library 23.4.0.
in my app I am using a viewpager with 3 fragments. In two of those I have recuclerviews. I took advatngage of the new Coordinator layout and made my toolbar hides/shows when scrolling on a recyclerview. My problem is the following Say the user is scrolling on a recyclerview list in fragment A and thus the toolbar is hidden. After that, the user performs a swipe and goes to fragment B which does not have a recycle view to scroll so the toolbar can appear again. Is there a way I can alter the layout_behaviout so that when the user swipes on the view pager the toolbar to be shown?
NOTE: IF it is possible, I want to achieve that only using XML.
This is my main_layput xml code:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="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.studentsins.lust.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"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/NavigationTab"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<include layout="#layout/content_main"/>
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="#+id/floatingActionMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
fab:fab_addButtonColorNormal="#color/blood_orange"
fab:fab_addButtonColorPressed="#color/dirtyWhite"
fab:fab_addButtonPlusIconColor="#color/dirtyWhite"
fab:fab_addButtonSize = "normal"
fab:fab_labelStyle="#style/menu_labels_style"
fab:fab_labelsPosition="left"
app:layout_anchor="#id/viewpager"
app:layout_anchorGravity="bottom|end">
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="#+id/createPlanBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="#color/blood_orange"
fab:fab_title="Create a plan"
fab:fab_size="normal"
app:fab_icon="#drawable/ic_event_white_48dp"
fab:fab_colorPressed="#color/dirtyWhite"/>
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="#+id/changeStatusBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="#color/blood_orange"
fab:fab_size="normal"
app:fab_icon="#drawable/ic_textsms_white_48dp"
fab:fab_title="Change status"
fab:fab_colorPressed="#color/dirtyWhite"/>
</com.getbase.floatingactionbutton.FloatingActionsMenu>
</android.support.design.widget.CoordinatorLayout>
You should be able to do this using the ViewPager.OnPageChangedListener and based on the page u are on which u can get from the onPageSelected(int position) method that is part of the listener. Hope this is what u are looking for.
I was able to achieve this by referencing the AppBarLayout and calling the "setExtended" method like that:
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//Make sure that the fab is visible when scrolling the pages...
MainActivity.mFloatingActionsMenu.animate()
.setDuration(150)
.translationY(0);
//show the toolbar
expandToolbar();
}
#Override
public void onPageSelected(int position) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
my expandToolbar method:
public void expandToolbar(){
//setExpanded(boolean expanded, boolean animate)
AppBarLayout appBarLayout = (AppBarLayout)findViewById(R.id.appBarLayouy);
appBarLayout.setExpanded(true, true);
}
When using a CoordinatorLayout with AppBarLayout on some activities I need the content to be under the AppBarLayout, i.e. the Toolbar is using some transparent color and overlays the content. By default CoordinatorLayout + AppBarLayout arrange things so that toolbar and scrolling content are next to eachother, without any overlapping.
Android developer guides have the documentation on this here and it looks like this (but those flags do not seem to work with Toolbar and appcompat - I tried):
So I need something that looks like on image above, but with all the scrolling goodies provided by CoordinatorLayout + AppBarLayout. And there's no need to use CollapsingToolbarLayout - just this simple one.
Any hints on how to achieve this?
Here's my activity layout.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/top_content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<include layout="#layout/main_toolbar"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<!-- to be filled by content fragment -->
</FrameLayout>
<android.support.design.widget.FloatingActionButton
style="#style/FabStyle"
android:id="#+id/fab_button"
android:src="#drawable/bt_filters"
/>
</android.support.design.widget.CoordinatorLayout>
I tried this solution, it works.
transparency :
added background to AppBarLayout, and placed scrolling view in layout before AppBarLayout
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000" >
content positioning : extended AppBarLayout.ScrollingViewBehavior by new AppbBarTransparentScrollingViewBehavior overriding onDependentViewChanged() and modifying updateOffset() to offset = 0
#Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child,
View dependency) {
updateOffset(parent, child, dependency);
return false;
}
private boolean updateOffset(CoordinatorLayout parent, View child,
View dependency) {
final CoordinatorLayout.Behavior behavior = ((CoordinatorLayout.LayoutParams) dependency
.getLayoutParams()).getBehavior();
if (behavior instanceof Behavior) {
// Offset the child so that it is below the app-bar (with any
// overlap)
final int offset = 0; // CHANGED TO 0
setTopAndBottomOffset(offset);
return true;
}
return false;
}
new content's behavior : set behavior on scrolling view
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
layout_behavior="AppbBarTransparentScrollingViewBehavior" />
result : with an ImageView inside a NestedScrollView as scrolling view
If you remove the line
app:layout_behavior="#string/appbar_scrolling_view_behavior"
from the FrameLayout, the content will be overlapped by the Toolbar. Hope that helps.
EDIT: Oh you mention that you need the scrolling goodies, so this isn't really a solution.
Here i tried to give Main Background image to windowBackground and ToolBar/ActionBar Background as a Transparent. Below Style i have specified in manifest. Window background changes can be done as per required.
Style in Menifest
<style name="AppThemeSliderToolbar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/t_img</item>
<item name="colorPrimary">#ff5b45</item>
<item name="colorPrimaryDark">#FF5722</item>
</style>
Layout with AppBar with semi transparent background
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#50000000"
>
<!--Change Opacity background as per required ..android:background="#50000000"-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frgmentcontainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appbar"></FrameLayout>
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:src="#android:drawable/ic_dialog_email"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
UPDATE
As per our discussion on comment CollapsingToolbarLayout with fragment.
<?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=".ScrollingActivity">
<android.support.design.widget.AppBarLayout android:id="#+id/app_bar"
android:fitsSystemWindows="true" android:layout_height="#dimen/app_bar_height" android:background="#00FFFFFF"
android:layout_width="match_parent" android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout android:id="#+id/toolbar_layout"
android:fitsSystemWindows="true" android:layout_width="match_parent"
android:layout_height="match_parent" 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"
app:layout_collapseMode="pin" app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling" />
<android.support.design.widget.FloatingActionButton android:id="#+id/fab"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin" app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end" android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
content_scrolling.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_scrolling" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context=".ScrollingActivity">
<FrameLayout android:id="#+id/framcontainer"
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
</android.support.v4.widget.NestedScrollView>
Style Given to Activity in Manifest.
<style name="AppThemeSliderToolbar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/t_img</item>
<item name="android:windowContentOverlay">#null</item>
<item name="windowActionBarOverlay">true</item>
<item name="colorPrimary">#android:color/transparent</item>
</style>
ScrollingActivity
public class ScrollingActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scrolling);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
getSupportFragmentManager().beginTransaction().
replace(R.id.framcontainer, new HomeFragment(), "Home").commit();
}
}
Home2
public class Home2 extends Fragment {
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.home_2, container, false);
}
}
HomeFragment
public class HomeFragment extends Fragment {
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.homefragment, container, false);
}
#Override
public void onViewCreated(View view, #Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
view.findViewById(R.id.txt).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
getActivity().getSupportFragmentManager().beginTransaction()
.replace(R.id.framcontainer, new Home2(), "Home2").addToBackStack("Home2").commit();
}
});
}
}
Screenshot url. Avoided Ambeding images i've given url
Before updated Ans http://i.stack.imgur.com/5cVOw.jpg
HomeFragment From Updated Ans > http://i.stack.imgur.com/UF8LW.jpg
Home2 From updated Ans http://i.stack.imgur.com/cD480.jpg
For Anybody who is working on a layout that is using a NavigationDrawer one solution to this is to change that ToolBar/AppBar dynamically when you are rendering that fragment for example. Lets say you are starting from Home.java and want to go to Chats.Java which is a fragment from there and you want to change that toolbar you can do this:
#Override
public boolean onNavigationItemSelected(#NonNull MenuItem item) {
switch (item.getItemId()){
case R.id.nav_chat:
toolbar.inflateMenu(R.menu.My_Other_Menu);
toolbar.setTitle("My New Title");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, new PaymentFragment()).commit();
break;
}
}
Please not that we have changed the title and also changed the title, menu and also changed the default NavigationIcon to be a back button. However we will also have to change that back button to go back when it is clicked.
This solution is pushes the contents of that Chats.java to be below the ToolBar instead of being covered by it.
I am currently developing an app wherein I need the feature to hide the toolbar on scrolling down (like Google+). I am facing issues with it's rendering of toolbar on scroll. Here is how it looks now -
I want the toolbar to simply hide on scroll down, but here the view is partially covering the toolbar and after that only toolbar is hiding.
This is the layout code -
<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="org.step.main.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarone"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize"
android:clipToPadding="false"
tools:context=".MainActivity"
/>
</FrameLayout>
And here is the Activity code -
mRecyclerView = (RecyclerView) findViewById(R.id.list);
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
mRecyclerView.setOnScrollListener(new HidingScrollListener() {
#Override
public void onHide() {
hideViews();
}
#Override
public void onShow() {
showViews();
}
});
private void hideViews() {
mToolbar.animate().translationY(-mToolbar.getHeight()).setInterpolator(new AccelerateInterpolator(2));
}
private void showViews() {
mToolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2));
}
Can someone explain why is this happening?
I got it after reading this line on FrameLayout doc -
"Child views are drawn in a stack, with the most recently added child on top."
So, I interchanged the position of Toolbar and RecyclerView and it worked. Here, Toolbar is rendered after RecyclerView, so it is higher in the stack.
<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="org.step.main.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize"
android:clipToPadding="false"
tools:context=".MainActivity"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarone"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
</FrameLayout>