Toolbar and TabLayout is not visible on Android 4.4 devices

tablayout not showing android
tablayout with tabitem in android
com.google.android.material.tabs.tablayout text size
tablayout with activity in android
tablayout style android
android tab widget
tablayout android stackoverflow
tablayout with icon and text android

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>

<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>

Toolbar and TabLayout is not visible on Android 4.4 devices, Output works as expected on Lollipop devices but it doesnot show ToolBar and TabLayout on Kitkat devices. But i can still swipe through 3� Good Day ! I'm currently creating an android app. My first problem is, Im getting a problem with my TabLayout. I want to display the tablayout IN the Toolbar This is my MainActivity: @Override

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>

Toolbar and TabLayout is not visible on Android 4., TabLayout provides a horizontal layout to display tabs. Get whether or not selection indicator width is fit to full width of the tab item, or fit to the tab item's� Using the support library's toolbar helps ensure that your app will have consistent behavior across the widest range of devices. For example, the Toolbar widget provides a material design experience on devices running Android 2.1 (API level 7) or later, but the native action bar doesn't support material design unless the device is running

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>

TabLayout, Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" add the behavior here and the toolbar apppeared on 4.4 devices in my case� Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. In this codelab, you'll learn the principles of this design language by building a sample Android app.

If the top layout parent in activity_main.xml is not a CoordinatorLayout (is there FrameLayout or RelativeLayout?) there may be some wrong different overlap depending on API version. Change top layout parent to a CoordinatorLayout and it will work everywhere.

Barra de herramientas y TabLayout no est� visible en los , 我试过参考[Toolbar is not visible on Android 4.X devices Toolbar android:id=" @+id/toolbar" android:layout_width="match_parent" Framelayout to display Fragments --> <FrameLayout android:id="@+id/frame_container" add the behavior here and the toolbar apppeared on 4.4 devices in my case --> < RelativeLayout� I am using Collapsing ToolBar Layout with NestedScrollView and Viewpager inside nested Scrollview. I am having 3 tabs and having 3 fragments for these tabs. These fragments are using RecyclerView to set data. Now with the nestedScrollView and viewpager, when I scroll the RecyclerView content, the co

Component Tree -> tablayout or toolbar -> Convert to ConstraintLayout it will work

工具栏和TabLayout在Android 4.4设备上不可见, 我試過參考[Toolbar is not visible on Android 4.X devices [solved]問題,但它沒有解決問題。我試着用API 19在模擬器中運行代碼,但也面臨同樣的問題。 我在項目中� I try to develop an app that retrieve videos from server and play on videoview inside viewpager, video from raw folder is worked fine but their are 2 issues: 1: some video isn't played. or black activity show. 2: video is not stop when Page is scrolled. so how to use URL instead of ` android.resourc

工具欄和TabLayout在Android 4.4設備上不可見- 優文庫, Android devices running Android 2.3.3 (Prima, API Level 10) or above can be used, such as the ripple effect, will not be visible on devices running on Android 4.4 (KitKat) before. Add a toolbar and tabs to the activity_main.xml and MainActivity.java delete TextView TabLayout > </android.support.design. widget. 4.2.2 4.3 abc Action Bar AlertDialog Android Android 4.4 Android 5.0 Android apk Android Desktop OS Apps BBM Free Download Genymotion Google Play Google Play Services Hack KitKat kotlin Linux ListView load image login register login register authentication material design mongodb nodejs opencv Python Raspberry Pi recycler view retrofit rxjava

[PDF] Google material design guidelines android, Android devices running Android 2.3.3 (Gingerbread, API Level 10) or higher may effect, will not be visible on devices running on Android 4.4 (KitKat) or before. create AppBarLayout then we will place ToolbarLayout and TabLayout within� When i run it on android 4.4.2, it displays perfectly.But on Android 5.0 , the tab bar doesn’t adopt the default accent color(its completely white and you can barely see the tab icons) and also, the FAB button takes a different color.But this doesn’t happen on android 4.4.2

Build a Material Design App with the Android Design Support Library, Android TabLayout Example with examples of Activity and Intent, Fragments, Menu, Service, alarm manager, storage, sqlite, xml, json, multimedia, speech, web� Question: I have a ListView, and with each list item I want it to show a shadow beneath it. I am using Android Lollipop's new elevation feature to set a Z on the View that I want to cast a shadow, and am already doing this effectively with the ActionBar (technically a Toolbar in Lollipop).

Comments
  • Can you post your styles file?
  • I have added style file. Please let me know if you need any more information.
  • Why is the TabLayout height match_parent ?
  • I tried changing it to wrap_content but still facing the same issue.
  • do u have solution for this ?
  • Thanks SilentKnight after adding windowActionBarOverlay property inside style.xml file, it is working fine now.
  • Top 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
  • change xmlns:app="http://schemas.android.com/tools" to xmlns:app="http://schemas.android.com/apk/res-auto"
  • I 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.
  • In my opinion, was the wrong namespace for app: prefix to produce the overlap.
  • i 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.
  • Please elaborate your answer with some explanations.