<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"
android:background="#ffffff">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/tabLayout" />
<com.google.android.material.tabs.TabLayout
android:elevation="5dp"
app:tabIconTint="#color/tab_icon_color"
app:tabTextColor="#color/text_color"
app:tabBackground="#drawable/tab_background"
app:tabTextAppearance="#style/TabFont"
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabIndicatorColor="#color/main_color">
<com.google.android.material.tabs.TabItem
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="내 일기" />
<com.google.android.material.tabs.TabItem
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="우리 일기" />
<com.google.android.material.tabs.TabItem
android:layout_width="20dp"
android:layout_height="wrap_content"
android:icon="#drawable/ic_hamburger" />
</com.google.android.material.tabs.TabLayout>
</RelativeLayout>
I have 3 Tab Items, and according to each tab, It shows different ViewPager above.
But in case of the third tab, if I click 3rd tab, I want this Fragment goes up of previous screen.
So 3rd screen has gray-transparent background and will show blurred- previous screen on back.
I guess, since I make tab navigation with ViewPager, this idea is not possible, since it swipes, not stacked each other.
Is there any idea to make my idea possible?
Should I change from ViewPager to other Widget?
Related
I have 3 tabs made with FragmentStateAdapter.
<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"
android:background="#ffffff">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/tabLayout" />
<com.google.android.material.tabs.TabLayout
app:tabIconTint="#color/tab_icon_color"
app:tabTextColor="#color/text_color"
app:tabBackground="#drawable/tab_background"
app:tabTextAppearance="#style/TabFont"
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabIndicatorColor="#color/main_color">
<com.google.android.material.tabs.TabItem
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="내 일기" />
<com.google.android.material.tabs.TabItem
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="우리 일기" />
<com.google.android.material.tabs.TabItem
android:layout_width="20dp"
android:layout_height="wrap_content"
android:icon="#drawable/ic_hamburger" />
</com.google.android.material.tabs.TabLayout>
</RelativeLayout>
I have ViewPager2 over TabLayout with 3 TabItmes.
Each TabItem is liked to 3 Fragment by each.
If I click Tab 2, It slides from Tab1 to Tab2 well.
My question is can I make Tab 2 to 3, then 3 Fragment has transparent screen and it shows previous 2 fragment screen on back.
Which means tab3 fragment should be stacked over tab2 fragment.
Now it just slides from to each, It doesn't have previous screen.
Can I make this idea?
I have a problem with heights of LinearLayouts of a TabLayout. When I change between tabs and navigate to other pages from bottom navigation bar and come back to the page with tabs, height of the passive tab (the tab was not open when we navigate between pages) is set as the active tab’s height. How can I fix this? Example screenshots are below:
Expected version of tab 1
Expected version of tab 2
What happens when we navigate to other pages from tab 2 and come back and switch to tab 1
Main screen:
<?xml version="1.0" encoding="utf-8"?>
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".homepage.UsageFragment"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/ic_header_2"
android:padding="16dp">
<com.google.android.material.button.MaterialButton
android:id="#+id/menu_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:minWidth="0dp"
android:padding="0dp"
app:icon="#drawable/ic_icon_menu"
app:iconPadding="0dp"
app:rippleColor="#00FFFFFF" />
<com.google.android.material.button.MaterialButton
android:id="#+id/notifications_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:background="#android:color/transparent"
android:minWidth="0dp"
android:padding="0dp"
app:icon="#drawable/ic_baseline_notifications_24"
app:iconPadding="0dp"
app:iconSize="30dp"
app:rippleColor="#00FFFFFF"
tools:ignore="RelativeOverlap" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/imece_black"
android:background="#drawable/tab_background"
app:tabBackground="#drawable/tab_selector"
app:tabIndicator="#null"
app:tabTextAppearance="#style/tabFontStyle"
android:fillViewport="true"
app:tabGravity="fill"
>
</com.google.android.material.tabs.TabLayout>
<View
android:layout_width="0dp"
android:layout_height="12dp"/>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
</androidx.viewpager2.widget.ViewPager2>
</LinearLayout>
</LinearLayout>
When I switch from any fragment back to Shopping List with the bottom app bar, it gets pushed down off the screen and I don't know why. Switching between the Fridge Fragment and Pantry Fragment works great, but switching from either of those back to the Shopping List Fragment pushes the bar off the screen, as shown here:
Github repository with full code
Try with these changes for FrameLayout and I guess you won't need fragment_navigation.xml after that.
activity_main.xml:
<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">
<FrameLayout
android:id="#+id/relative_layout_for_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
style="#style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
app:backgroundTint="#color/colorPrimary"
app:hideOnScroll="true"
app:layout_scrollFlags="scroll|enterAlways"
app:navigationIcon="#drawable/ic_menu_white_24dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add_shopping_cart_white_24dp"
app:fabSize="normal"
app:layout_anchor="#id/bottom_app_bar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You also said that it happens when you switch to ShoppingListFragment which has another CoordinatorLayout in there.
You simply change fragment_shopping_list.xml codes as follows:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/shopping_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="141dp"
android:text="TextView" />
</RelativeLayout>
Or just don't use CoordinatorLayout in there then try.
I have a view with some fragments and I created a snackbar with a slide animation on it. The animation works fine, but before it comes up a white window appears where the snackbar is going to appear.
It is happening because I am using setTranslationY on the view. I tried to put the background transparent but it did not work.
How can I solve it?
<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="wrap_content"
android:background="#android:color/transparent">
<LinearLayout
android:id="#+id/pager_activity_page"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#android:color/transparent">
<FrameLayout
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/transparent"
android:layout_weight="1"
/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#android:color/black"
android:id="#+id/snackbar_container"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#android:color/white"
android:textSize="13sp"
android:textStyle="normal"
android:id="#+id/snackbar_text"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center" />
</FrameLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/MyCustomTabLayout"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="#android:color/white"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#color/bpBlue"
app:tabTextColor="#929292"
/>
</LinearLayout>
</RelativeLayout>
Did you build your own "snackbar"? Try to use this:
http://www.androidhive.info/2015/09/android-material-design-snackbar-example/
But your problem:
I think the problem is, that your add your "snackbar" in your linear layout! You set the visibility to "gone" and your bar will not use any space. On your animation you set the visibility to "visible". The linear layout will give you the space, which you need for you bar. You need to add the bar above your layout(also the tablayout)
I'm using a viewpager to show fragments on my app, but I'm having some issues with the XML, I would like to fix my code because when I run the fragments, the viewpager doesn't show the the last part of the design, I'm using a listview on each fragment, and the last row is being cut. What do I need to change on my code to fix that?
Code:
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#c42542">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginBottom="8dp"
android:background="#d12240"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:text="Live rooms"
android:textColor="#ffffff"
android:textSize="18dp" />
<ImageView
android:layout_width="19dp"
android:layout_height="19dp"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="23dp"
android:src="#mipmap/ic_share" />
<ImageView
android:layout_width="19dp"
android:layout_height="19dp"
android:layout_alignBottom="#+id/bar"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="20dp"
android:src="#mipmap/ic_search" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<!-- Scrollable View -->
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Thank you.
Hey it seems this can occur when using ListView within the CoordinatorLayout, but you can fix it by simply changing it to a RecycleView. There's also a solution for Android 5.0+. Check out Sha's answer here for more info.
Assign bottom margin to Listview.
<ListView
android:paddingBottom= "20dp"/>