web-dev-qa-db-ger.com

AppBarLayout mit Toolbar + TabLayout aufblasen

Ich habe derzeit ein DrawerLayout in meiner main.xml. In AppBarLayout gibt es eine Symbolleiste und anschließend ein einfaches LinearLayout, um Fragmente auszutauschen. 

Eines der Fragmente, zu denen ich navigiere, soll ein TabLayout für einen ViewPager von Fragmenten enthalten. Momentan habe ich beides in der Layout-Datei des Fragments, aber dies führt dazu, dass zwischen der Toolbar und dem TabLayout ein Schlagschatten angezeigt wird, was ich nicht möchte. Ich möchte auch nicht setElevation () verwenden, weil es für Pre-Lollipop-Geräte nicht funktioniert.

Eine mögliche Lösung wäre das Aufblasen des AppBarLayout aus meinem Fragment, sodass es beide Toolbar + Tabs enthält. Ich bin mir jedoch nicht wirklich sicher, wie ich das machen soll, also wäre jede Hilfe dankbar. 

Hier ist meine main.xml-Datei:

<Android.support.v4.widget.DrawerLayout 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/drawerLayout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context="com.lumivote.lumivote.ui.MainActivity">

    <Android.support.design.widget.CoordinatorLayout
        Android:id="@+id/rootLayout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

        <Android.support.design.widget.AppBarLayout
            Android:id="@+id/appbarlayout"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content">

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                Android:background="?attr/colorPrimary"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

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

        <LinearLayout
            Android:id="@+id/flContent"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

    <Android.support.design.widget.NavigationView
        Android:id="@+id/navigation"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:itemIconTint="#333"
        app:itemTextColor="#333"
        app:menu="@menu/navigation_drawer_items" />

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

Und hier ist die XML-Datei meines Fragments:

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    tools:context="com.alexdao.democracy.ui.candidate_tab.CandidateListFragment">

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tabLayout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@color/myPrimaryColor"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@Android:color/white" />
</LinearLayout>
androidandroid-layoutandroid-fragmentsandroid-toolbarandroid-tablayout
24
adao7000

Um mein Problem zu beheben, habe ich die Toolbar, TabLayout und ViewPager alle in meine MainActivity gestellt. 

main_activity.xml:

<Android.support.v4.widget.DrawerLayout 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/drawerLayout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.design.widget.CoordinatorLayout
        Android:id="@+id/rootLayout"
        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.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                Android:background="?attr/colorPrimary"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tabLayout"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

            <Android.support.v4.view.ViewPager
                Android:id="@+id/viewpager"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:background="@Android:color/white" />
        </Android.support.design.widget.AppBarLayout>

        <RelativeLayout
            Android:id="@+id/flContent"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

    <Android.support.design.widget.NavigationView
        Android:id="@+id/navigation"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:itemIconTint="#333"
        app:itemTextColor="#333"
        app:menu="@menu/navigation_drawer_items" />

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

Dann habe ich in all meinen Fragmenten die Sichtbarkeit für TabLayout und ViewPager in onCreateView programmgesteuert festgelegt:

public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        TabLayout tabLayout = (TabLayout) getActivity().findViewById(R.id.tabLayout);
        tabLayout.setVisibility(View.GONE);
        ViewPager mViewPager = (ViewPager) getActivity().findViewById(R.id.viewpager);
        mViewPager.setVisibility(View.GONE);

        return inflater.inflate(R.layout.fragment_layout, container, false);
}

Natürlich möchten Sie im Fragment mit Registerkarten die Sichtbarkeit auf View.VISIBLE anstelle von View.GONE setzen.

2
adao7000

Sie können für jedes Fragment eine separate Symbolleiste haben. Es ist möglich, die Symbolleiste für Fragmente als Aktionsleiste für Aktivitäten festzulegen. Beispielcode:

Toolbar toolbar = (Toolbar) v.findViewById(R.id.toolbar);
 ((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);

Es sollte möglich sein, auch Titel, Symbole und anderes Zeug zu haben ... Mit diesem können Sie Schatten auf Pre-Lollipop-Geräten nachahmen, egal, was Sie darauf haben.

12
Sebastian Pakieła

Ich habe die Lösung von bleeding182 modifiziert und auch für AppBarLayout verwendet (um das von bopa angegebene Problem zu lösen).

@Override
public void onAttach(Context context) {

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop) {
        getActivity().findViewById(R.id.appbar).setElevation(0);
    }
    super.onAttach(context);

}

@Override
public void onDetach() {
    super.onDetach();
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop) {
        getActivity().findViewById(R.id.appbar).setElevation(R.dimen.toolbar_elevation);
    }
}

Was ich tat, war, den Aufruf von getSupportActionBar () zu ersetzen, indem ich meinem AppBarLayout eine ID gab und dann findViewById () aufrief und dann setElevation für sein Ergebnis aufrief. Getestet auf API 23.

5
naman1901

Ich hatte ein ähnliches Problem, bei dem ich eine TabLayout innerhalb eines Fragments wollte.

Wenn Sie keinen anderen Code ändern, können Sie dies lösen, indem Sie onAttach und onDetach in Ihrem Fragment mit dem TabLayout verwenden.

@Override
public void onAttach(Activity activity) {
    super.onAttach(activity);

    // todo add some further checks, e.g. instanceof, actionbar != null

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop) {
        ((AppCompatActivity) activity).getSupportActionBar().setElevation(0);
    }
}

@Override
public void onDetach() {
    super.onDetach();
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop) {
        ((AppCompatActivity) getActivity()).getSupportActionBar()
                .setElevation(getResources().getDimension(R.dimen.toolbar_elevation));
    }
}

Stellen Sie sicher, dass Sie die gleiche Höhe in Ihrem TabLayout einstellen, und alles funktioniert einwandfrei! ; D

4
David Medenjak

Sie können TabLayout einfach programmgesteuert aus Fragment hinzufügen, für das Sie TabLayout benötigen 

tabLayout = (TabLayout) inflater.inflate(R.layout.tablay, null);
appBarLayout = (AppBarLayout) getActivity().findViewById(R.id.appbar);
appBarLayout.addView(tabLayout, new LinearLayoutCompat.LayoutParams(
    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));

und entfernen Sie TabLayout aus AppBar in onDetach ()

@Override
public void onDetach() {
    appBarLayout.removeView(tabLayout);
    super.onDetach();
}
3
Artem_Iens

Der Artem_lens -Ansatz funktionierte für mich mit einigen Modifikationen.

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    ...

    mTabLayout = (TabLayout) inflater.inflate(
            R.layout.partial_tab_layout,
            container,
            false);
    mAppBarLayout = (AppBarLayout) getActivity().findViewById(R.id.app_bar);
    mAppBarLayout.addView(mTabLayout,
            new LinearLayoutCompat.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT));

    ...
}

Und entfernen Sie die Ansicht bei onDestroyView()

@Override
public void onDestroyView() {
    mAppBarLayout.removeView(mTabLayout);
    super.onDestroyView();
}
1
Gnzlt

Die Lösung ist im XML einfach. Fügen Sie einfach folgenden Code zu Ihrem AppBarLayout hinzu: app:elevation="0dp". Das AppBarLayout sollte also so aussehen:

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:elevation="0dp"
    Android:theme="@style/AppTheme.AppBarOverlay">
0
josecdeveloper