I'm trying to show my FloatingActionButton on top of the SnackBar but I just can't make it as I have done on other screens. My current layout is this one:
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="#dimen/toolbar_elevation"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.ToolbarPopUp"
app:theme="#style/AppTheme.Toolbar"/>
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
style="#style/Feed.TabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"/>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_fab"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
style="#style/FloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_start"
app:backgroundTint="#color/h19_green"
app:elevation="6dp"
app:pressedTranslationZ="12dp"/>
</android.support.design.widget.CoordinatorLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/navdrawer"/>
</android.support.v4.widget.DrawerLayout>
And my Snackbar code is this one:
#Override
public void alertNoInternetConnection() {
CoordinatorLayout coordinatorLayout = ButterKnife.findById(getActivity(), R.id.coordinator_fab);
Snackbar.make(coordinatorLayout, R.string.connection_offline, Snackbar.LENGTH_INDEFINITE).show();
}
How should I reorganize my layout so that when I display the Snackbar, the Floating Action Button hovers above it?
I was looking quite long for the answer, and finally I've found the solution which worked for me:
FloatingActionButton must be inside CoordinatorLayout
Snackbar should receive FloatingActionButton as it's View argument
Layout:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#mipmap/ic_create_white_48dp"
/>
</android.support.design.widget.CoordinatorLayout>
Code:
FloatingActionButton fabAdd = (FloatingActionButton)findViewById(R.id.fabAdd);
Snackbar.make(fabAdd, "Record was removed.", Snackbar.LENGTH_SHORT).show();
Try adding this to your FAB:
app:layout_anchor="#id/coordinator_fab"
app:layout_anchorGravity="bottom|right"
and remove:
android:layout_gravity="bottom|end"
Your layout implementation is wrong, here's the right implementation (for example):
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
... >
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</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" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navdrawer"/>
</android.support.v4.widget.DrawerLayout>
And then, to show the Snackbar correctly:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
The problem is that according to the google guidelines you should not display the FAB above the Snackbar you should swipe the FAB and display the Snack bar below it
check this link :
http://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-usage
this worked for me.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.FloatingActionButton
... />
fabBtn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Snackbar.make(rootLayout, "Hello. I am Snackbar!",
Snackbar.LENGTH_SHORT)
.setAction("Undo", new View.OnClickListener() {
#Override
public void onClick(View v) {
}
})
.show();
}
});
Related
Want to move my snackbar above bottomnavigationview
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activityRootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbarView"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_size"
android:background="#color/color_primary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</FrameLayout>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottomNavigationLayout"
android:layout_below="#+id/appBarLayout" />
<LinearLayout
android:id="#+id/bottomNavigationLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<View style="#style/FullDivider" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemBackground="#android:color/white"
app:itemIconTint="#drawable/selector_bottom_bar_item"
app:itemTextColor="#color/blue"
app:labelVisibilityMode="unlabeled"
app:menu="#menu/main_navigation" />
</LinearLayout>
<com.mandarine.features.security.UnlockAppInputView
android:id="#+id/unlockAppInputView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true" />
</RelativeLayout>
In MainActivity write smth like this:
container?.let {
Snackbar.make(it, "No internet connection!", Snackbar.LENGTH_LONG).show()
}
But snackbar also display from bot of screen
Add one Layout above BottomNavigationView
Example:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/myLayout"
android:layout_above="#id/bottomNavigationView">
</android.support.design.widget.CoordinatorLayout>
then in Java code use:
final View viewPos = findViewById(R.id.myLayout);
Snackbar.make(viewPos, R.string.snackbar_text, Snackbar.LENGTH_LONG)
.setAction(R.string.snackbar_action_undo, showListener)
.show();
I believe that the problem is in findSuitableParent function. As you can see on 232 line your container used as fallback, but then root view is found. Try to change your container to CoordinatorLayout and it will fix the issue.
Resolve my problem with next solution:
private fun showNetworkMessage(isConnected: Boolean) {
if (!isConnected) {
val snack = Snackbar.make(
findViewById(R.id.container),
this.getText(R.string.warning_no_internet_connection), Snackbar.LENGTH_LONG
)
val params = snack.view.layoutParams as FrameLayout.LayoutParams
params.setMargins(0, 0, 0, this.resources.getDimension(R.dimen.action_bar_size).toInt())
snack.view.layoutParams = params
snack.show()
}
}
Where u can see i didn't use CoordinatorLayout.
I want something like this:
I have the following now:
With the following 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_height="130dp"
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|enterAlways|enterAlwaysCollapsed"
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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/book_detail">
</FrameLayout>
</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_margin="16dp"
android:clickable="true"
android:focusable="true"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|end"/>
</android.support.design.widget.CoordinatorLayout>
But I have some problems:
The Title is on top instead of bottom
There's something like a separator on top
I'm using a coordinator now, but I don't need a collapsing toolbar, so I think that there must be another solution maybe. How can I solve this?
Let's first start by making the toolbar taller. I think what you're looking for is CollapingToolbarLayout
To use the CollapsingToolbarLayout you have to change your ConstraintLayout to CoordinatorLayout.
Then you have to create an AppBarLayout to hold the CollapsingToolbarLayout and the Toolbar.
Then to make the floating button in that place you have to anchor it to the AppBarLayout created earlier like below:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_margin="16dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:clickable="true"
android:src="#drawable/message"
android:focusable="true"
app:elevation="30dp"/>
That way it will be anchored to the AppBarLayout so it will go up and down as the AppBarLayout goes up or down.
EDIT #1 :
To remove the title from the top and remove the separator you have to set your activity's theme to NoActionBar. In your AndroidManifest.xml file go to your activity and change its code to the following:
<activity
android:name="YOUR_ACTIVITY_PATH.BookDetailActivity"
android:theme="#style/AppTheme.NoActionBar" />
This way the activity will be declared without an action bar which means no separator and no title.
Then to add the title to the bottom you just have to set the title of the CollapsingToolbarLayout to the text you want.
You can set it in the xml with app:title="YOUR_TITLE" attribute or you can set it programmatically by calling the function setTitle("YOUR_TITLE") for your CollapsingToolbarLayout variable .
Here is what the full code could look like:
<?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"
tools:context=".BookDetailActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:title="YOUR_TITLE"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:id="#+id/book_detail">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_margin="16dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:clickable="true"
android:src="#drawable/message"
android:focusable="true"
app:elevation="30dp"/>
</android.support.design.widget.CoordinatorLayout>
EDIT 2:
In your activity set your action bar by this :
setSupportActionBar(YOUR_TOOLBAR_VARIABLE) then you can use getSupportActionBar().setDisplayHomeAsUpEnabled(true)
Note that the toolbar should be the id of this one:
android.support.v7.widget.Toolbar so in our case the toolbar with the id toolbar
Use this layout
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="192dp">
<android.support.design.widget.CollapsingToolbarLayout
android:elevation="4dp"
android:id="#+id/collapsing_toolbar"
android:background="#color/primary"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
style="#style/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:layout_anchor="#id/app_bar_layout"
app:layout_anchorGravity="bottom|right|end" />
The use this class for action of FAB
public class FlexibleSpaceExampleActivity extends AppCompatActivity
implements AppBarLayout.OnOffsetChangedListener {
private static final int PERCENTAGE_TO_SHOW_IMAGE = 20;
private View mFab;
private int mMaxScrollSize;
private boolean mIsImageHidden;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flexible_space);
mFab = findViewById(R.id.flexible_example_fab);
Toolbar toolbar = (Toolbar) findViewById(R.id.flexible_example_toolbar);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override public void onClick(View v) {
onBackPressed();
}
});
AppBarLayout appbar = (AppBarLayout) findViewById(R.id.flexible_example_appbar);
appbar.addOnOffsetChangedListener(this);
}
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
if (mMaxScrollSize == 0)
mMaxScrollSize = appBarLayout.getTotalScrollRange();
int currentScrollPercentage = (Math.abs(i)) * 100
/ mMaxScrollSize;
if (currentScrollPercentage >= PERCENTAGE_TO_SHOW_IMAGE) {
if (!mIsImageHidden) {
mIsImageHidden = true;
ViewCompat.animate(mFab).scaleY(0).scaleX(0).start();
/**
* Realize your any behavior for FAB here!
**/
}
}
if (currentScrollPercentage < PERCENTAGE_TO_SHOW_IMAGE) {
if (mIsImageHidden) {
mIsImageHidden = false;
ViewCompat.animate(mFab).scaleY(1).scaleX(1).start();
/**
* Realize your any behavior for FAB here!
**/
}
}
}
public static void start(Context c) {
c.startActivity(new Intent(c, FlexibleSpaceExampleActivity.class));
}
}
There are some Github Implementation to develope this view and many other
Collapsing Toolbar with Fab
I have following code in my Fragment to setup toolbar :
with(root) {
with(activity as AppCompatActivity) {
setupActionBar(toolbar) {
setDisplayHomeAsUpEnabled(true)
setDisplayShowHomeEnabled(true)
}
}
toolbar.setNavigationOnClickListener { activity?.finish() }
}
Here is my setupActionBar method :
fun AppCompatActivity.setupActionBar(toolbar : Toolbar, action: ActionBar.() -> Unit) {
setSupportActionBar(toolbar)
supportActionBar?.run {
action()
}
}
And toolbar in my layout :
<?xml version="1.0" encoding="utf-8"?>
<layout 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"
tools:context=".ui.detail.DetailFragment">
<data>
<variable
name="artist"
type="com.sample.android.lastfm.model.LastFmArtist"/>
</data>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="300dp"
app:collapsedTitleTextAppearance="#style/CollapsedToolbar"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/ExpandedToolbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:title="#{artist.name}">
<ImageView
android:id="#+id/movie_poster"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:imageUrl="#{artist.images}"
tools:ignore="contentDescription"/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="#style/Toolbar"/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_tab_layout_height"
app:tabGravity="fill"
app:tabIndicatorColor="#color/colorAccent"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>
When I click on toolbar, it does not navigate me back to previous screen. It seems that it is not clickable.
(activity as AppCompatActivity).setSupportActionBar(toolbar)
(activity as AppCompatActivity).supportActionBar?.setDisplayHomeAsUpEnabled(true)
then in your fragment
override onOptionsItemSelected
override fun onOptionsItemSelected(item: MenuItem?): Boolean {
when (item?.itemId) {
android.R.id.home -> {
activity?.onBackPressed()
}
}
return true
}
Add the toolbar to your fragment xml
And try this code in your onCreateView
Toolbar toolbar = view.findViewById(R.id.toolbar); toolbar.setNavigationIcon(R.drawable.ic_back_button); toolbar.setNavigationOnClickListener(new View.OnClickListener() { #Override public void onClick(View v) { getActivity().onBackPressed(); } });
Toolbar should not be :
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="#style/Toolbar"/>
Rather it should be :
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="#style/Toolbar"/>
i already check the xml file, but everything is okay (for me), but the view still stacked up. and i also get an error message like this
PlayingFragment: onResponse: hasil
pemanggilanretrofit2.ExecutorCallAdapterFactory$ExecutorCallbackCall#1c95dee5
and here's what inside on onResponse on my PlayingFramgment class
private void bacaData(){
progressBar.setVisibility(View.VISIBLE);
final RecyclerView rvCategory = getActivity().findViewById(R.id.playing_daftar);
rvCategory.setLayoutManager(new LinearLayoutManager(getActivity()));
ApiInterface apiInterface = ApiClient.getRetrofit(getContext()).create(ApiInterface.class);
Call<MovieResponse> call = apiInterface.getNowPlaying();
call.enqueue(new Callback<MovieResponse>() {
#Override
public void onResponse(Call<MovieResponse> call, Response<MovieResponse> response) {
MovieResponse data = response.body();
if (data.getResults().size() == 0){
Toast.makeText(getContext(), "Maaf data yang anda cari tidak ditemukan",
Toast.LENGTH_SHORT).show();
progressBar.setVisibility(View.GONE);
} else {
rvCategory.setAdapter(new MoviesAdapter(data.getResults(), R.layout.list_movie_row, getContext()));
Log.d(TAG, "onResponse: hasil pemanggil" + call);
progressBar.setVisibility(View.GONE);
}
}
#Override
public void onFailure(Call<MovieResponse> call, Throwable t) {
Toast.makeText(getContext(), "Gagal", Toast.LENGTH_SHORT).show();
Log.d(TAG, t.toString());
progressBar.setVisibility(View.GONE);
}
});
}
i post the xml layout fragment_playing
<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=".fragment.PlayingFragment">
<!-- TODO: Update blank fragment layout -->
<android.support.v7.widget.RecyclerView
android:id="#+id/playing_daftar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/progressMainBar"
android:layout_centerInParent="true"/>
</RelativeLayout>
fragment_playing is the part of fragment_home, and here's the code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:orientation="vertical"
tools:context=".BlankFragment">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="fill"
app:tabIndicatorColor="#color/colorAccent"
app:tabMode="fixed"
app:tabSelectedTextColor="#ffffff">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/appbar"
android:padding="#dimen/activity_vertical_margin" />
</FrameLayout>
</LinearLayout>
and i put the fragment_home into 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:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity"
tools:showIn="#layout/app_bar_main">
<android.support.v4.view.ViewPager
android:layout_below="#+id/toolbar"
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
content_main is the part of app_bar_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:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".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="wrap_content"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
app:tabTextColor="#color/colorAccent"
app:tabSelectedTextColor="#color/colorAccent"
android:id="#+id/tabs">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tab_np"
android:text="#string/now_playing"
android:textColor="#color/colorAccent"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/up_coming"
android:id="#+id/tab_up"/>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</RelativeLayout>
You should use below property so your viewPager below your upper tab. I think your viewPager have height and width both are match parent.
Since you are using RelativeLayout as root component you have to give margin top to RecyclerView:
android:layout_marginTop="104dp"
EDIT:
if you were using coordinatorLayout as Root layout, the story would be different.
EDIT
Following issues are obvious in your codes:
1- AppBarLayout in Fragment home is extra since you have already an Appbar in activitie's home layout.
2- According to android official document use CoordinatorLayout instead of RelativeLayout. By using RelativeLayout you will loose some functionality and layout management of AppBarLayout
3- Since you have just included content_main inside app_bar_main, no needs to use tools:context=".MainActivity" and tools:showIn="#layout/app_bar_main"
4- Replace RelativeLayout inside content_main by merge tag
After above changes you have just removed extra layouts which may have side effects on margins and padings, then apply attribute below to your view pager. I hope these changes will be effective and no other hidden items are alive in your code:
android:layout_marginTop="104dp"
change you Relativelayout to android.support.design.widget.CoordinatorLayout and add app:layout_behavior="#string/appbar_scrolling_view_behavior" to android.support.v7.widget.RecyclerView
Use this for app_mar_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:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/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="wrap_content"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
app:tabTextColor="#color/colorAccent"
app:tabSelectedTextColor="#color/colorAccent"
android:id="#+id/tabs">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tab_np"
android:text="#string/now_playing"
android:textColor="#color/colorAccent"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/up_coming"
android:id="#+id/tab_up"/>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_below="#+id/appbarlayout"
android:layout_marginTop="1dp"/>
</RelativeLayout>
Try this way..
make viewpager xml 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/tab_bg_color"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tlConversation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="#color/tab_color"
app:tabMinWidth="0dp"
app:tabMode="fixed"
app:tabTextAppearance="#style/Tab_Style"
app:tabSelectedTextColor="#color/tab_color"
app:tabTextColor="#color/tab_text_color">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/vpPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
</android.support.v4.view.ViewPager>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
after that fragement xml code for recyclerview ..
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
xmlns:tool="http://schemas.android.com/tools">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/rvData"
tool:listitem="#layout/item_row_layout"
></android.support.v7.widget.RecyclerView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvEmpty"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tool:text="No data found"
android:text="#string/no_found"
android:visibility="gone"
/>
</android.support.constraint.ConstraintLayout>
after that setup view pager like this way make viewpager adapter..
private void setupViewPager(ViewPager viewPager) {
viewPagerAdapter = new ViewPagerAdapter(getActivity().getSupportFragmentManager(),conversationId);
viewPager.setAdapter(viewPagerAdapter);
viewPager.setOffscreenPageLimit(1);
viewPager.setCurrentItem(currentItem);
}
And
public class ViewPagerAdapter extends FragmentPagerAdapter {
private final Context context;
public ViewPagerAdapter(FragmentManager fragmentManager, Context context) {
super(fragmentManager);
this.context = context;
}
#Override
public Fragment getItem(int position) {
if(position == 0) return new ActiveConversationFragment();
if(position == 1) return new InvitedConversationFragment();
if(position == 2) return new RecentConversationFragment();
throw new IllegalStateException("Unexpected position " + position);
}
#Override
public int getCount() {
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
if(position == 0) return context.getString(R.string.tab_active_conversation_title);
if(position == 1) return getString(R.string.tab_invited_conversation_title);
if(position == 2) return getString(R.string.tab_recent_conversation_title);
throw new IllegalStateException("Unexpected position " + position);
}
}
after that call above method like this way set into tablayout..
setupViewPager(viewPager);
tabLayout.setupWithViewPager(viewPager);
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.