example - Barra de herramientas de superposición transparente de Android

toolbar dinamico android

Question

ActionBar una ActionBar ToolBar que establecí como mi ActionBar y la tengo transparente, mi pregunta es que quiero que se superponga al resto del contenido, ahora mismo está actuando como una ActionBar normal donde mi LinearLayout "se detiene" debajo de ella. ¿Cómo hago que mi ToolBar superponga mi diseño y haga que el diseño llene toda la pantalla?

El estilo de la ActionBar original es solo:

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

Mi 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"/>

y mi declaración de la ToolBar :

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

Siento que me estoy perdiendo algo realmente simple pero después de buscar no pude encontrar la solución que estaba buscando. ¡Cualquier ayuda sería apreciada!

EDITAR: Aquí está mi diseño principal XML completo:

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

Answer 1

Debería establecer la transparencia en AppBarLayout lugar de la Toolbar de Toolbar y eliminar la app:layout_behavior si desea que se superponga al contenido.

Answer 2

Después de algún ejercicio lo hago pasar. Espero que ayude a los demás. Aquí, no configuro ninguna elevación para 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>

Answer 3

En xml, el orden de los diseños determina la "profundidad". Al mover la barra de herramientas debajo de los otros elementos, los superpondrá.

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

Answer 4

Estás en el camino correcto. La forma más sencilla de hacerlo es usar FrameLayout donde el contenido del ViewGroup se match_parent mientras que la Toolbar está en la parte superior de este 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>

Answer 5

Puede utilizar CoordinatorLayout como a continuación

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

Donde frameLayout es para fragmentos usados.

Answer 6

Tal vez esto pueda ayudarte, Ryan.

toolbar.getBackground().setAlpha(0);

Answer 7

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

y en el manifiesto:

<activity
android:name=".MainActivity"
android:theme="@style/AppTheme.SemiTranspActionBar">

Answer 8

CollapsingToolbar introducido en la biblioteca de soporte 22.2.0 (mayo de 2015), ofrece el efecto de superposición de forma predeterminada:

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