Geek Answers Handbook

Toolbar and TabLayout not visible on Android 4.4 devices

I tried to implement the toolbar and TabLayout using the google design library by contacting [ http://blog.grafixartist.com/material-design-tabs-with-android-design-support-library/] [blog].

The output works as expected on Lollipop devices, but it does not show ToolBar and TabLayout on Kitkat devices. But I can still carry through 3 fragments, as expected on the kitkat device. How does code written using google support libraries work differently on different devices?

I tried to refer to [ The toolbar is not visible on Android 4.X devices [solved] , but this did not solve the problem. I tried to run the code in an emulator with API 19, but ran into the same problem.

The dependencies 'com.android.support:appcompat-v7:22.2.0' , 'com.android.support:support-v4:22.2.0' and 'com.android.support:design:22.2.0' added in the project.

activity_main.xml

 <android.support.design.widget.CoordinatorLayout 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/tools"> <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/Base.ThemeOverlay.AppCompat.Dark" /> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="match_parent" /> </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>

MainActivity.java

 public class MainActivity extends AppCompatActivity { public ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); viewPager = (ViewPager) findViewById(R.id.viewpager); setupViewPager(viewPager); TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout); tabLayout.setupWithViewPager(viewPager); tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { viewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); } private void setupViewPager(ViewPager viewPager) { ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.addFrag(new QueuedFragment(), "Queued"); adapter.addFrag(new IntransitFragment(), "InTransit"); adapter.addFrag(new DeliveredFragment(), "Delivered"); viewPager.setAdapter(adapter); } }

style.xml

 <resources> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">    <item name="windowActionBar">false</item>    <item name="windowNoTitle">true</item> </style>

+7
android android-viewpager appcompat android-tablayout toolbar
source share
4 answers
 <android.support.design.widget.CoordinatorLayout 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/tools"> <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"//here android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="match_parent" /> </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>

and

 <resources> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="windowActionBar">false</item> <item name="windowActionBarOverlay">false</item> <item name="windowNoTitle">true</item> </style> </resources>

or

  <style name="ParallaxTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style>
+1
source share

I had a problem in Android 4 and I solved it. Look how. You need to move the toolbar to a higher level.

 <?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:fitsSystemWindows="true" > <!-- Framelayout to display Fragments --> <FrameLayout android:id="@+id/frame_container" 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/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@android:color/transparent" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <!--<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" app:srcCompat="@android:drawable/ic_dialog_email" />--> </android.support.design.widget.CoordinatorLayout>
+1
source share

this happened to me, and it happened because I used CoordinatorLayout, but I did not specify the layout_behavior of the content. Therefore you should do this in my case:

 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:card_view="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/cl_container" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" tools:ignore="MissingPrefix"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="@color/white" app:titleEnabled="false"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@android:color/white" android:elevation="4dp" app:layout_collapseMode="pin"> <TextView android:id="@+id/toolbar_title" fontPath="fonts/Medium-Extd.otf" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="my toolbar title" android:textAllCaps="true" android:textColor="#000000" android:textSize="14sp" /> </android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <!-- add the behavior here and the toolbar apppeared on 4.4 devices in my case --> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" > //...... blah blah </RelativeLayout>
+1
source share

If the parent top layout in activity_main.xml is not a Layout coordinator (is there a FrameLayout or RelativeLayout?), There may be an incorrect match depending on the version of the API. Change the parent top-up layout to CoordinatorLayout and it will work everywhere.

0
source share

More articles:


All Articles