Toolbar and TabLayout is not visible on Android 4.4 devices
Solution 1
<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>
Solution 2
this happened to me and it was because i was using a CoordinatorLayout but i was not specifying the layout_behavior of the content. So 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>
Solution 3
I had problem in Android 4 and I solved it. See how. 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>
Vinit Thaker
Updated on June 08, 2022Comments
-
Vinit Thaker almost 2 years
I was trying to implement Toolbar and TabLayout using google design library by referring to [http://blog.grafixartist.com/material-design-tabs-with-android-design-support-library/] [blog].
Output works as expected on Lollipop devices but it doesnot show ToolBar and TabLayout on Kitkat devices. But i can still swipe through 3 fragment as expected on kitkat device as well. How come same code written using google support libraries works differently on different devices!
I tried referring to [Toolbar is not visible on Android 4.X devices [solved] question but it didn't solve the problem. I tried running the code in emulator with API 19 but facing same issue on that as well.
I have added
'com.android.support:appcompat-v7:22.2.0'
,'com.android.support:support-v4:22.2.0'
and'com.android.support:design:22.2.0'
dependencies 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>
-
Vinit Thaker almost 9 yearsTop layout is CoordinatoLayout only but due to some editing issue it was not showing earlier. Could you please check it now and let me know if something is not right
-
GPack almost 9 yearschange
xmlns:app="http://schemas.android.com/tools"
toxmlns:app="http://schemas.android.com/apk/res-auto"
-
Vinit Thaker almost 9 yearsI changed it to "xmlns:app="schemas.android.com/apk/res-auto" but still i was facing the same issue and after adding "<item name="windowActionBarOverlay">false</item>" line inside style.xml file , as suggested by SilentKnight, it is working fine now.
-
Vinit Thaker almost 9 yearsThanks SilentKnight after adding windowActionBarOverlay property inside style.xml file, it is working fine now.
-
GPack almost 9 yearsIn my opinion, was the wrong namespace for
app:
prefix to produce the overlap. -
Vinit Thaker almost 9 yearsi was facing same issue even after changing the app prefix so i think it was not because of that. But i am facing this problem again i might have to post another question again.
-
Partho63 about 5 yearsPlease elaborate your answer with some explanations.