2

I have two questions/problems :)

First: I have implemented a Sliding Tabs Layout. Now the fragment is use for the Tabs get cut off at the bottom: Fragment gets cut off (FAB is on bottom|right)

Second: When I press the FAB i want to open a new Activity (the FAB is on a Fragment). But when I press it, a blank Activity opens (the acctual Activity has a Layout and is working on its own) and when I press the back button I exit the app.

For the First question: This is a Methode I call in the onCreate of the MainActivity (Where the Sliding Tabs Layout is implemented) (I dont know if you need the code for the ViewPager so I didn't include it, if you need it tell me please):

 private void excTasks(){
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    getSupportActionBar().setDisplayHomeAsUpEnabled(false);

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    viewPager.setOffscreenPageLimit(4);
    setupViewPager(viewPager);

    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    setupTabIcons();
}

This is the ViewPagerAdapter:

class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        //return mFragmentTitleList.get(position);

        // Wenn man nur Icons will -> return null, sont das obrige verwenden
        return null;
    }
}

And here I add the Fragments:

private void setupViewPager(ViewPager viewPager) {

    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());

    adapter.addFragment(new NewsFragment(), "NEWS");
    adapter.addFragment(new ProfileFragment(), "PROFILE");
    adapter.addFragment(new NotificationFragment(), "NOTIF");
    adapter.addFragment(new AboutFragment(), "ABOUT");

    viewPager.setAdapter(adapter);
}

This is the .xml of the MainActivity:

<android.support.design.widget.CoordinatorLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout
    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:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <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"
        app:tabIndicatorColor="@color/white"/>
</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.CoordinatorLayout>

For the second question: This is in the Fragment (in the onViewCreated) where I want the FAB (OfferActivity is what should be opened when pressing the button):

//FAB
    FloatingActionButton fab = (FloatingActionButton) v.findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            // Click action
            Intent intent = new Intent(con, OfferActivity.class);
            getActivity().startActivity(intent);
        }
    });

As said before, the OfferActivity is working fine when displayed in one Tab, so I won't include the code of it. Here is the FAB xml (inside a RelativeLayout): EDIT: included the whole file

<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true">

<ListView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@android:id/list"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:layout_weight="0"
    android:layout_marginTop="5dp"
    android:foregroundGravity="fill"/>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/fab_margin"
    android:layout_marginRight="@dimen/fab_margin"
    android:src="@drawable/fab_add"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:baselineAlignBottom="true"
    android:clickable="true"
    app:backgroundTint="@color/colorPrimary" />

Thank you for answering and sorry if this questions got ask already! :)

EDIT: here is the styles.xml and I have included the whole FAB xml

<resources xmlns:tools="http://schemas.android.com/tools">

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:actionBarDivider">@color/colorPrimary</item>
    <!--<item name="android:windowTranslucentStatus" tools:targetApi="kitkat">true</item>-->
</style>

<style name="MyMaterialTheme" parent="AppTheme">
    <item name="android:windowContentTransitions" tools:targetApi="lollipop">true</item>
    <item name="android:windowAllowEnterTransitionOverlap" tools:targetApi="lollipop">true</item>
    <item name="android:windowAllowReturnTransitionOverlap" tools:targetApi="lollipop">true</item>
    <item name="android:windowSharedElementEnterTransition" tools:targetApi="lollipop">@android:transition/move</item>
    <item name="android:windowSharedElementExitTransition" tools:targetApi="lollipop">@android:transition/move</item>
</style>

4
  • can you please post your style.xml Jan 23, 2016 at 10:11
  • Please post the complete xml in which Floating action button is included Jan 23, 2016 at 10:18
  • I don't see the tab been included inside the pager. for example <include layout="@layout/titlebar"/>. see developer.android.com/training/improving-layouts/…
    – Avi Levin
    Jan 23, 2016 at 10:21
  • Avi, why I didnt include them because I get the toolbar and tabselector bar from the MainActivity. If I include them I have 2 of them. :)
    – T.Scherner
    Jan 24, 2016 at 11:59

4 Answers 4

1

The use of layout_baselineAlignBottom attribute is creating problem I think. The app:layout_anchor attribute enables us to specify the layout on which we wish to anchor our floating action button & app:layout_anchorGravity specifies the placement of the anchor. Place the following floating action button xml at the end just before </android.support.design.widget.CoordinatorLayout>.

<android.support.design.widget.FloatingActionButton
   android:id="@+id/fab"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginBottom="@dimen/fab_margin"
   android:layout_marginRight="@dimen/fab_margin"
   android:src="@drawable/fab_add"
   android:layout_alignParentBottom="true"
   android:layout_alignParentRight="true"
   android:baselineAlignBottom="true"
   android:clickable="true"
   app:backgroundTint="@color/colorPrimary"   
   app:layout_anchor="@id/viewpager"
   app:layout_anchorGravity="bottom|right|end"  />

Please note: Floating Action button can only be used in conjunction with Coordinator layout.

Edit: Okay, wrap your Relative layout inside a coordinator layout, and change app:layout_anchor="@id/viewpager" to app:layout_anchor="@id/listview" in floating action button 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"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true">

<ListView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/list"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:layout_weight="0"
    android:layout_marginTop="5dp"
    android:foregroundGravity="fill"/>


</RelativeLayout>
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:clickable="true"
    app:backgroundTint="@color/colorPrimary"
    app:layout_anchor="@id/list"
    android:src="@drawable/fab_add"
    android:layout_marginBottom="@dimen/fab_margin"
    android:layout_marginRight="@dimen/fab_margin"
    app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
2
  • First of all thanks for the answer. I tried it, but now the FAB is floating below the last feed item, half overlapping it. Screenshot
    – T.Scherner
    Jan 24, 2016 at 11:23
  • Where do you want the FAB to be exactly? Jan 24, 2016 at 15:26
0

You could use that FloatingActionButton with CoordinatorLayout like this:

<CoordinatorLayout>
    <AppbarLayout/>
    <scrollableView/>
    <FloatingActionButton/>
</CoordinatorLayout>

Something like this(you can use SupportLibrary or using it inside the CoordinatorLayout) this is the best way:

<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:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        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:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/white"
            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="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_add"
        app:backgroundTint="@color/ColorAccent"
        app:borderWidth="0dp"
        app:fabSize="normal"
        app:layout_anchor="@id/coordinator"
        app:layout_anchorGravity="bottom|right|end" />

</android.support.design.widget.CoordinatorLayout>
2
  • Thanks for the answer, but here I get the same problem as with Abdullah's solution, the FAB is floating below the last feed item, half overlapping it.
    – T.Scherner
    Jan 24, 2016 at 11:41
  • What are the codes? perhaps your contents has a problem.otherwise, this is the standrad way. Jan 24, 2016 at 12:41
0

Hope something got messed up with the value-v21 style.xml.

Try adding the below set of properties in the value-v21 style.xml.

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:fitsSystemWindows">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>

and add the below code to the fab fragment.

private int getNavigationBarHeight() { 
    Resources resources = getResources();
    int resourceId = resources.getIdentifier("navigation_bar_height", "dimen", "android");
    if (resourceId > 0) {
        return resources.getDimensionPixelSize(resourceId);
    } 
    return 0; 
} 

@Override 
public void onCreateView(Bundle savedInstanceState) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        int navBarHeight = getNavigationBarHeight();
        findViewById(R.id.base_frame).setPadding(0, 0, 0, navBarHeight);
        findViewById(R.id.menu_frame).setPadding(0, 0, 0, navBarHeight);
    } 
} 

Similar issue here

Good Luck..!

2
  • Thank you for the answer. What exactly are the base_frame and menu_frame views (since I don't know what to set the padding :))?
    – T.Scherner
    Jan 24, 2016 at 11:37
  • But this is not right way to add padding i did exactly It works fine for nexus but in some devices i am getting extra margin from bottom. Do you are solution related to this? Apr 28, 2016 at 14:34
0

Try this code :-

public class DeliveryTab extends Fragment {
    public static TabLayout tabLayout;
    public static ViewPager viewPager;
    public static int int_items = 3 ;
    android.support.v4.app.FragmentManager mFragmentManager;

    View view;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        getActivity().setTitle("Delivery");

        View x =  inflater.inflate(com.Weal.sachin.omcom.R.layout.activity_delivery_tab,null);
        tabLayout = (TabLayout) x.findViewById(com.Weal.sachin.omcom.R.id.sliding_tabs_delivery);
        viewPager = (ViewPager) x.findViewById(com.Weal.sachin.omcom.R.id.viewpager_delivery);
        viewPager. setOffscreenPageLimit(3);

        FloatingActionButton fab = (FloatingActionButton)x.findViewById(R.id.fabdelivery);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                FragmentTransaction t = getFragmentManager().beginTransaction();
                Add_Delivery mFrag = new Add_Delivery();
                t.replace(R.id.framelayout, mFrag);
                t.commit();
            }
        });
        viewPager.setAdapter(new MyAdapter(getChildFragmentManager()));

        tabLayout.setupWithViewPager(viewPager);


        return x;

    }
    class MyAdapter extends FragmentPagerAdapter {
        com.Weal.sachin.omcom.TodayVisit TodayVisit;
        Home home;
        com.Weal.sachin.omcom.UpdatesFragment UpdatesFragment;
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        /**
         * Return fragment with respect to Position .
         */

        @Override
        public Fragment getItem(int position)
        {
            switch (position){
                case 0 : return new DeliveryToday();
                case 1 : return new YesterdayDelivery();
                case 2 : return new Delivery_all();
            }
            return null;
        }

        @Override
        public int getCount() {

            return int_items;

        }

        /**
         * This method returns the title of the tab according to the position.
         */

        @Override
        public CharSequence getPageTitle(int position) {

            switch (position){
                case 0 :
                    return "Today";
                case 1 :
                    return "Yesterday";
                case 2 :
                    return "Delivery All";
            }
            return null;
        }
    }

}

Here the 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.Weal.sachin.omcom.TabFragment"
    android:orientation="vertical">

<android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs_delivery"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabTextColor="#d2cece"
        app:tabSelectedTextColor="#fff"
        android:background="#11977c"

        />
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_delivery"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white">
        <fragment android:name="com.Weal.sachin.omcom.TabFragment"
            android:id="@+id/tabFragment"
            android:layout_width="match_parent"
            android:layout_height="100dp" />
    </android.support.v4.view.ViewPager>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabdelivery"
            android:layout_width="75dp"
            android:layout_height="124dp"
            android:layout_marginTop="50dp"
            android:layout_gravity="bottom|end"
            android:backgroundTint="#11977c"
            android:layout_margin="@dimen/fab_margin"
            android:src="@drawable/addplus"/>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>
1
  • the floatingaction bar remains in the tab and its works good for me.
    – Andie
    May 2, 2017 at 6:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.