I would like to make profile view (see below).
Currently I have the view with profile photo and two tabs (Diary and Friends).
This is my activity layout which contains two tabs.
<RelativeLayout
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="#color/base_background"
android:id="#+id/app_bar">
<include layout="#layout/dog_profile" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/dog_header"
android:background="#color/base_background"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/primary"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
This my diary fragment but I cant see anything within the diary fragment. Its probably on the top-left.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_below="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:background="#color/accent"
android:layout_alignParentBottom="true"/>
<TextView
android:id="#+id/tv_no_memories"
style="#style/NoItemsStyle"
android:text="#string/no_memories" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
style="#style/FabStyle"/>
</RelativeLayout>
I have no idea what I should change that I could see the content inside the fragment.
In my activity I am setting the view pager like this
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new DogDiaryFragment(), tab1);
adapter.addFragment(new DogFriendsFragment(), tab2);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
Thanks for any advice
I solved by changing the relative layout to the linear layout with vertical orientation in the activity xml.
Related
I'm looking for a way to put a view in my ViewPager below the TabBar.
I don't want it to be inside each fragment, because obiouvsly it would scroll every time I change the current fragment; I need that view to be fixed there without animations.
This is what I have now putting the View inside my TabLayout [code + img]
<android.support.v4.view.ViewPager
android:id="#+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/mTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="#color/colorPrimary"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorAccent"
app:tabTextColor="#color/white">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:background="#drawable/background_accent_fading"
android:paddingBottom="5dp"
android:paddingEnd="5dp"
android:paddingTop="5dp"
android:text="RIPASSO"
android:textAlignment="textEnd"
android:textColor="#color/white"
android:textStyle="bold" />
</android.support.design.widget.TabLayout>
</android.support.v4.view.ViewPager>
This, instead, is what I'm looking for
As you can see, RIPASSO is below my tabs, but it is fixed there.
Is there a way of obtaining it? I didn' find anything
Your TabLayout mustn't be a child of your ViewPager.
<LinearLayout
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"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?android:actionBarSize"
style="#style/AppTabLayout"
app:tabTextAppearance="#style/AppTabTextAppearance"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:tabMode="fixed"
app:tabGravity="fill"/>
<!--here put your view, the one you want to appear in all pages.-->
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/popup_holder"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#android:color/white"/>
</FrameLayout>
</LinearLayout>
you can use the default android tabs, follow this :
Right click on app > New > Activity > Tabbed Activity.
and it will create everything for you.
if you want to change the color of the background color - underline color or text color.
you can do it in the XML or user
TabLayout tabLayout = binding.tabs;
tabLayout.setupWithViewPager(mViewPager);
tabLayout.setTabTextColors(getResources().getColor(R.color.white), getResources().getColor(R.color.white));
I created a Tabs one for Footer menu and another for just a fragment class inside this i have 3 Tabs.
I want to call Footer menu (Tabfragment.java)in another fragment(DeliveryTab.java).
I search it on google and revise the stackoverflow's question but none are helping me..
Here i post complete code.
activity_deliverytab.xml
<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"
tools:context=".TabFragment"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs_delivery"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/tabMedium" />
<include
layout="#layout/tabfragment"></include>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager_delivery"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white">
</android.support.v4.view.ViewPager>
</LinearLayout>
You should include Fragment in your layout using the fragment tag. Like this:
<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"
tools:context=".TabFragment"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs_delivery"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/tabMedium" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager_delivery"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white">
</android.support.v4.view.ViewPager>
<!-- Since you want it to be in the footer -->
<fragment android:name="xyz.xyz.xyz.TabFragment"
android:id="#+id/tabFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Hi i am not sure but you can try like this
inside DeliveryTab.java
ParentActivity activity = (ParentActivity) getActivity();
(ParentActivity is name of your activity which calls both TabsFragment and DeliveryTab )
Now get TabsFragment from FrameLayout or fragment whatever you set your TabsFragment like
((TabsFragment ) getSupportFragmentManager().findFragmentById(R.id.FragmentContainer))
How to add tag to Fragment see this -https://stackoverflow.com/a/23370128/4741746
Now you have TabsFragment now get ViewPager
mViewPager.setCurrentItem(getPosition);
I'm using TabLayout and I attach two tabs.
tabLayout.addTab(tabLayout.newTab().setText("Featured"));
tabLayout.addTab(tabLayout.newTab().setText("Filter"));
Then onTabSelected() I display the fragment I want according to which tab user selected.
The layout of my Activity is :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/ll_container"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
<FrameLayout
android:id="#+id/fl_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
and the layout of the fragments is just a TextView in a LinearLayout :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Projects List Fragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
But the result I get is the following :
as you can see the content of the fragment overlaps Tab's text when it should appear underneath.
Thanks
Finally, I found alternative solution for this problem.
You can give top padding on your each Tab fragment's layout.
Eg,
android:paddingTop="?attr/actionBarSize"
For instance, my first tab xml looks like below:
<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="wrap_content"
android:paddingTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.upgautam.uddhav.productassignment.uicontrollers.ProductListFragment">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/product_list_string" />
</android.support.design.widget.CoordinatorLayout>
Now, the screen looks like below:
I'm trying to create app with layout floating up from bottom of screen, but I have tabs on bottom of screen, so I want to hide them with animation of layout floating up. My question is how to get access to that tab layout which is in other xml file than RelativeLayout which is used already in animation. I have TabLayout defined also in other file than I use for animation.
My xml files looks like that
FragmentsActivity :
<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.young.howittastes.FragmentsActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:elevation="5dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toolbar"
android:id="#+id/viewPager"
android:background="#d8d8d8"/>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tab_layout"
app:tabMode="fixed"
android:background="?attr/colorPrimary"
android:elevation="6dp"
app:tabTextColor="#d3d3d3"
app:tabSelectedTextColor="#ffffff"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
And Home Fragment :
<RelativeLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/recyclerlayout">
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="16dp"
android:paddingTop="16dp"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="animation"
android:id="#+id/animationButton"
android:layout_centerHorizontal="true"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#d3d3d3"
android:id="#+id/commentLayout"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:elevation="6dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WRITE"
android:textSize="14sp"
android:textColor="#000"
android:textStyle="bold"
android:layout_marginTop="4dp"
android:layout_marginLeft="4dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="READ"
android:textSize="14sp"
android:textColor="#030303"
android:textStyle="normal"
android:layout_marginTop="4dp"
android:layout_marginRight="4dp"
android:layout_alignParentRight="true"/>
</RelativeLayout>
</RelativeLayout>
Fragment has classes onCreateView and ContentAdapter.
TabLayout is defined like that, but it's defined in other file than Fragment in which I use animation :
TabLayout tabs = (TabLayout) findViewById(R.id.tab_layout);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());
adapter.addFragment(new HomeContent(), "Home");
adapter.addFragment(new FavoritesContent(), "Favorite");
adapter.addFragment(new FavoritesContent(), "Search");
adapter.addFragment(new FavoritesContent(), "Write");
viewPager.setAdapter(adapter);
tabs.setupWithViewPager(viewPager);
It sounds like you want to include one of your layout XML layout files within the other. If that is correct you use the <include> tag within the enclosing layout. For example if tabbar.xml is the layout you want to include:
<include layout="#layout/tabbar"/>
See this link for more details.
I'm using the CoordinatorLayout and a ViewPager inside. The problem is, that the first entries of the List (in first page of the ViewPager) are hidden by the Tabs. When I use LinearLayout instead of the CoordinatorLayout, everything works fine.
How to fix that overlap?
Should the FloatingButton be added here or in the ListView XML?
Here's the 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:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager_list_views"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:src="#android:drawable/ic_menu_add"
app:layout_anchor="#id/pager_list_views"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
add this to ViewPager
app:layout_behavior="#string/appbar_scrolling_view_behavior"
if you use CoordinatorLayout you'll have to specifify a behaviour, it's safer if you control these aspects of your design.