web-dev-qa-db-fra.com

Barre d'outils de superposition transparente Android

J'ai créé un ToolBar que j'ai défini comme ActionBar et je l'ai transparent. Ma question est: je veux qu'il superpose le reste du contenu; maintenant, il agit comme un ActionBar normal où ma LinearLayout "s'arrête" en dessous. Comment puis-je superposer ma disposition ToolBar et la faire remplir de tout l'écran?

Le style de la ActionBar originale est simplement:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="Android:windowActionBarOverlay">true</item>
</style>

Ma ToolBar:

<Android.support.v7.widget.Toolbar
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/toolbar"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
Android:layout_width="match_parent"
Android:layout_height="200dp"
Android:minHeight="?attr/actionBarSize"
Android:background="@Android:color/transparent"/>

et ma déclaration ToolBar:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setBackgroundResource(Color.TRANSPARENT);
setSupportActionBar(toolbar);

J'ai l'impression qu'il me manque quelque chose de très simple, mais après une recherche, je n'ai pas trouvé la solution que je cherchais. Toute aide serait appréciée! 

EDIT: Voici ma mise en page principale XML complète:

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:context=".MainActivity">

<Android.support.v7.widget.Toolbar
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/actionBarSize"
    Android:background="@Android:color/transparent"/>

<Android.support.v4.widget.DrawerLayout
    Android:id="@+id/drawer_layout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <!-- Main layout -->
    <FrameLayout
        Android:id="@+id/main_fragment_container"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent" />

    <!-- Nav drawer -->
    <fragment
        Android:id="@+id/fragment_drawer"
        Android:name="rsay.Android.scrollbanner.NavigationDrawerFragment"
        Android:layout_width="@dimen/navigation_drawer_width"
        Android:layout_height="match_parent"
        Android:layout_gravity="left|start" />
</Android.support.v4.widget.DrawerLayout>

androidandroid-toolbar
20
Ryan Sayles

Vous êtes sur la bonne voie. La façon la plus simple de le faire consiste à utiliser FrameLayout où le contenu ViewGroup sera match_parent tandis que la Toolbar est au-dessus de cette ViewGroup

<FrameLayout 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"
    tools:context=".MainActivity">


    <!-- This can be any child. For sample purposes I assume this layout contains fragments -->
    <LinearLayout  
        Android:background="?attr/colorPrimary"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:id="@+id/fragment_container"
        Android:orientation="horizontal"/>


    <Android.support.v7.widget.Toolbar
       xmlns:app="http://schemas.Android.com/apk/res-auto"
       Android:id="@+id/toolbar"
       app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
       Android:layout_width="match_parent"
       Android:layout_height="200dp"
       Android:minHeight="?attr/actionBarSize"
       Android:background="@Android:color/transparent">
        </Android.support.v7.widget.Toolbar>

</FrameLayout>
22
Nikola Despotoski

Après un peu d'exercice, je le réalise. J'espère que ça aide les autres. ici, je ne mets pas élévation pour appbarlayout 

 <Android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@drawable/background_gradiant"
    Android:fitsSystemWindows="true"
    tools:context=".activity.AddMembersActivity">


    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@Android:color/transparent"
        app:elevation="0dp">

        <Android.support.v7.widget.Toolbar

            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize" />

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


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

</Android.support.design.widget.CoordinatorLayout>
7
Shihab Uddin

Vous devez définir la transparence sur AppBarLayout au lieu de Toolbar et supprimer le app:layout_behavior si vous souhaitez que le contenu soit superposé.

3
carvaq

En XML, l'ordre des mises en page détermine la "profondeur". En déplaçant la barre d'outils sous les autres éléments, vous les superposerez.

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:context=".MainActivity">

<Android.support.v4.widget.DrawerLayout
    Android:id="@+id/drawer_layout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <!-- Main layout -->
    <FrameLayout
        Android:id="@+id/main_fragment_container"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent" />

    <Android.support.v7.widget.Toolbar
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/actionBarSize"
    Android:background="@Android:color/transparent"/>

    <!-- Nav drawer -->
    <fragment
        Android:id="@+id/fragment_drawer"
        Android:name="rsay.Android.scrollbanner.NavigationDrawerFragment"
        Android:layout_width="@dimen/navigation_drawer_width"
        Android:layout_height="match_parent"
        Android:layout_gravity="left|start" />    

</Android.support.v4.widget.DrawerLayout>
2
Patrick Dattilio

CollapsingToolbar introduit dans la bibliothèque de support 22.2.0 (mai 2015), offre un effet de superposition par défaut:

<Android.support.design.widget.CoordinatorLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">

        <Android.support.design.widget.AppBarLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="@color/transparent">

            <Android.support.v7.widget.Toolbar
                Android:layout_width="match_parent"
                Android:layout_height="?actionBarSize"/>

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

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

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

 enter image description here

dans styles.xml: 

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
</style>

<style name="ActionBar.SemiTransp" parent="Base.Widget.AppCompat.ActionBar">
    <item name="displayOptions">showHome|showTitle</item>
    <item name="background">@drawable/gray_to_transp</item>
</style>

<style name="AppTheme.SemiTranspActionBar" parent="@style/AppTheme">
    <item name="actionBarStyle">@style/ActionBar.SemiTransp</item>
    <item name="windowActionBarOverlay">true</item>
</style>

et dans le manifeste:

<activity
        Android:name=".MainActivity"
        Android:theme="@style/AppTheme.SemiTranspActionBar">
0
Dan Alboteanu

Vous pouvez utiliser CoordinatorLayout comme ci-dessous

<Android.support.design.widget.CoordinatorLayout
Android:id="@+id/coordinatorLayout"
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true"
tools:context="com.epbit.itattooz.MainActivity">

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    Android:orientation="vertical">

    <Android.support.v7.widget.Toolbar
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?android:attr/actionBarSize"
        Android:background="?attr/colorPrimary"
        Android:minHeight="?android:attr/actionBarSize"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark"
        Android:titleTextAppearance="@style/ToolbarTitle"/>

    <FrameLayout
        Android:id="@+id/containerView"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"/>
</LinearLayout>

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

Où frameLayout est destiné aux fragments utilisés.

0
Soni Kumar

Peut-être que cela peut vous aider, Ryan.

toolbar.getBackground().setAlpha(0);
0
Marco Vignoli