Always in Center is not in Center

bignadad commented 9 years ago

Im implementing the always in center style and i can't get it to be centered. Whats weird is if i rotate landscape then back portrait it is then centered like it should be.

<com.ogaclejapan.smarttablayout.SmartTabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:paddingBottom="4dp"
            app:stl_indicatorAlwaysInCenter="true"
            app:stl_indicatorWithoutPadding="false"
            app:stl_indicatorInFront="false"
            app:stl_indicatorInterpolation="smart"
            app:stl_indicatorGravity="bottom"
            app:stl_indicatorColor="@color/accent2"
            app:stl_indicatorThickness="4dp"
            app:stl_indicatorCornerRadius="0dp"
            app:stl_overlineColor="#4D000000"
            app:stl_overlineThickness="0dp"
            app:stl_underlineThickness="1dp"
            app:stl_dividerColor="#00000000"
            app:stl_dividerThickness="1dp"
            app:stl_defaultTabTextAllCaps="true"
            app:stl_defaultTabTextColor="@color/app_tab_text"
            app:stl_underlineColor="@color/transparent"
            app:stl_defaultTabBackground="?attr/selectableItemBackground"
            app:stl_defaultTabTextSize="14sp"
            app:stl_defaultTabTextMinWidth="120dp"
            app:layout_scrollFlags="enterAlways"/>

Issue

ogaclejapan commented 9 years ago

Hi, @bignadad Thank you for reporting.

It does not occur I tried to check in some of the devices. :'( Does this problem has occurred from 1.2.2? Or from a previous version?

Please show me the layout file that contains the SmartTabLayout.

Because you were using the CoordinatorLayout, I have tried to rewrite the cheesesquare app. https://github.com/chrisbanes/cheesesquare

git diff
diff --git a/app/build.gradle b/app/build.gradle
index 0e5d568..8064cd9 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -31,4 +31,7 @@ dependencies {

     compile 'com.github.bumptech.glide:glide:3.6.0'
     compile 'de.hdodenhof:circleimageview:1.3.0'
+
+    compile 'com.ogaclejapan.smarttablayout:library:1.2.2@aar'
+    compile 'com.ogaclejapan.smarttablayout:utils-v4:1.2.2@aar'
 }
diff --git a/app/src/main/java/com/support/android/designlibdemo/MainActivity.java b/app/src/main/java/com/support/android/designlibdemo/MainActivity.java
index 7f0f482..f331a7c 100644
--- a/app/src/main/java/com/support/android/designlibdemo/MainActivity.java
+++ b/app/src/main/java/com/support/android/designlibdemo/MainActivity.java
@@ -37,6 +37,8 @@ import android.widget.AdapterView;
 import android.widget.ArrayAdapter;
 import android.widget.Toast;

+import com.ogaclejapan.smarttablayout.SmartTabLayout;
+
 import java.util.ArrayList;
 import java.util.List;

@@ -80,8 +82,16 @@ public class MainActivity extends AppCompatActivity {
             }
         });

-        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
-        tabLayout.setupWithViewPager(viewPager);
+        SmartTabLayout tabLayout = (SmartTabLayout) findViewById(R.id.tabs);
+        tabLayout.setViewPager(viewPager);
+
+        //TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
+        //tabLayout.setupWithViewPager(viewPager);
+
+
+
+
+
     }

     @Override
diff --git a/app/src/main/res/layout/include_list_viewpager.xml b/app/src/main/res/layout/include_list_viewpager.xml
index aa03bfd..de8d326 100644
--- a/app/src/main/res/layout/include_list_viewpager.xml
+++ b/app/src/main/res/layout/include_list_viewpager.xml
@@ -35,10 +35,36 @@
             app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
             app:layout_scrollFlags="scroll|enterAlways" />

-        <android.support.design.widget.TabLayout
+        <com.ogaclejapan.smarttablayout.SmartTabLayout
             android:id="@+id/tabs"
             android:layout_width="match_parent"
-            android:layout_height="wrap_content" />
+            android:layout_height="48dp"
+            android:paddingBottom="4dp"
+            app:stl_indicatorAlwaysInCenter="true"
+            app:stl_indicatorWithoutPadding="false"
+            app:stl_indicatorInFront="false"
+            app:stl_indicatorInterpolation="smart"
+            app:stl_indicatorGravity="bottom"
+            app:stl_indicatorColor="?attr/colorAccent"
+            app:stl_indicatorThickness="4dp"
+            app:stl_indicatorCornerRadius="0dp"
+            app:stl_overlineColor="#4D000000"
+            app:stl_overlineThickness="0dp"
+            app:stl_underlineThickness="1dp"
+            app:stl_dividerColor="#00000000"
+            app:stl_dividerThickness="1dp"
+            app:stl_defaultTabTextAllCaps="true"
+            app:stl_defaultTabTextColor="@android:color/white"
+            app:stl_underlineColor="@android:color/transparent"
+            app:stl_defaultTabBackground="?attr/selectableItemBackground"
+            app:stl_defaultTabTextSize="14sp"
+            app:stl_defaultTabTextMinWidth="120dp"
+            app:layout_scrollFlags="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>git diff

bignadad commented 9 years ago

Im using 1.2.2 and tested 1.2.3 this morning and still same issue. Here is my layout

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

    <include layout="@layout/activity_main_frame"/>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        android:background="?attr/app_background"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer"/>

</android.support.v4.widget.DrawerLayout>

<?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: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"
        app:elevation="0dp">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:titleTextAppearance="@style/ToolbarTitle"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <com.ogaclejapan.smarttablayout.SmartTabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:paddingBottom="4dp"
            app:stl_indicatorAlwaysInCenter="true"
            app:stl_indicatorWithoutPadding="false"
            app:stl_indicatorInFront="false"
            app:stl_indicatorInterpolation="smart"
            app:stl_indicatorGravity="bottom"
            app:stl_indicatorColor="@color/accent2"
            app:stl_indicatorThickness="4dp"
            app:stl_indicatorCornerRadius="0dp"
            app:stl_overlineColor="#4D000000"
            app:stl_overlineThickness="0dp"
            app:stl_underlineThickness="1dp"
            app:stl_dividerColor="#00000000"
            app:stl_dividerThickness="1dp"
            app:stl_defaultTabTextAllCaps="true"
            app:stl_defaultTabTextColor="@color/app_tab_text"
            app:stl_underlineColor="@color/transparent"
            app:stl_defaultTabBackground="?attr/selectableItemBackground"
            app:stl_defaultTabTextSize="14sp"
            app:stl_defaultTabTextMinWidth="120dp"/>

    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" >

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </FrameLayout>

    <fr.castorflex.android.circularprogressbar.CircularProgressBar
        android:id="@+id/base_progressSpinner"
        android:layout_gravity="center"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:indeterminate="true"
        android:visibility="invisible"
        app:cpb_color="@color/spinner"
        app:cpb_rotation_speed="1.0"
        app:cpb_sweep_speed="1.0"
        app:cpb_stroke_width="4dp"
        app:cpb_min_sweep_angle="10"
        app:cpb_max_sweep_angle="300"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_contact"
        android:visibility="gone"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="end|bottom"
        app:borderWidth="0dp"
        android:src="@drawable/contact_fab_icon"
        android:layout_margin="@dimen/big_padding"
        android:clickable="true"
        app:backgroundTint="@color/fab"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_upload"
        android:visibility="gone"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="end|bottom"
        app:borderWidth="0dp"
        android:src="@drawable/app_fab_upload"
        android:layout_margin="@dimen/big_padding"
        android:clickable="true"
        app:backgroundTint="@color/fab"/>

</android.support.design.widget.CoordinatorLayout>

ppamorim commented 9 years ago

+1 Some tablets has the same problem.

ogaclejapan commented 9 years ago

HI, @bignadad @ppamorim Thank you for help.

I tried your reporting layout. https://github.com/ogaclejapan/SmartTabLayout/tree/gh-53

However, the problem does not occur in my environment. :'(

Also, I tried adding a definition of configChanges to AndroidManifest, there was no problem.

<activity
  android:name=".DemoAlwaysInCenterActivity"
  ...
  android:configChanges="orientation|screenSize"
  />

Could you try if the problem also occurs in this app? Please tell me the device information If the problem occurs.

I've checked the following devices.

Google Nexus5 - 5.1.1
Google Nexus7 - 5.1.1
Motorola Droid Razr - 4.1.1 (Genymotion)
Sony Xperia TabletZ - 4.2.2 (Genymotion)
Sony Xperia TabletS - 4.1.1 (Genymotion)
Google Nexus4 - 5.0.0 (Genymotion)
Google Nexus7 - 4.1.1 (Genymotion)

bignadad commented 9 years ago

It happens no matter what device im using. Nexus 6 5.1.1 is primary device. here is my code for adapter and main activity

Main Activity

 mViewPager.setAdapter(new HomeFragmentAdapter(fm, this));
        mTabLayout.setViewPager(mViewPager);
        mTabLayout.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                if (position == 3) {
                    mFabUpload.show();
                } else {
                    mFabUpload.hide();
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

        mViewPager.setCurrentItem(2);

Adapter

public class HomeFragmentAdapter extends FragmentPagerAdapter {

    Context mContext;
    FragmentManager mFragman;

    public HomeFragmentAdapter(FragmentManager fm, Context context) {
        super(fm);
        mFragman = fm;
        mContext=context;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return new CatFrag();
            case 1:
                return new PremiumFrag();
            case 2:
                return new ExploreFrag();
            case 3:
                return new SocialFrag();
            case 4:
                return new FavFrag();
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return 5;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return mContext.getString(R.string.tab_categories);
            case 1:
                return mContext.getString(R.string.tab_premium);
            case 2:
                return mContext.getString(R.string.tab_explore);
            case 3:
                return mContext.getString(R.string.tab_social);
            case 4:
                return mContext.getString(R.string.tab_favorites);
        }
        return null;
    }
}

ogaclejapan commented 9 years ago

HI, @bignadad Thank you for sharing of code :+1:

Hmmmm, the problem does not occur..... Why will not occur in my environment :'(

Updated the code. https://github.com/ogaclejapan/SmartTabLayout/tree/gh-53

bignadad commented 9 years ago

I am running out of things to test. I don't understand what could be causing it. Maybe its something in styles?

I also don't understand how rotating device fixes it. when i rotate landscape its properly centered. then when i rotate back portrait its properly centered. only when starting app originally is when its offset.