android - tareas - Hacer transparente la barra de herramientas

como hacer la barra de tareas transparente en windows 10

Question

create_account.xml

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="io.sleeko.board.CreateAccountActivity">

<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="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

<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"
    android:src="@android:drawable/ic_dialog_email" />

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

Necesito hacer transparente la ToolBar anterior. para que podamos ver la imagen de fondo. He intentado diferentes métodos. pero no pudo encontrar la solución correcta.

por favor ayuda. gracias

Answer 1

Aquí está mi solución.

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    android:background="#00000000">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

Answer 2

La mayoría de las veces queremos que la barra de herramientas sea translúcida porque queremos mostrar el contenido detrás de ella. El problema es que los colores del contenido detrás de la barra de herramientas pueden colisionar con el color de los elementos / texto de la barra de herramientas (por ejemplo, la flecha arriba / atrás).

Por esa razón, verá en muchas implementaciones que la barra de herramientas en realidad no es transparente, sino translúcida con un degradado.

Puedes obtener esto con el siguiente código:

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar
    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/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@drawable/background_toolbar_translucent" />

background_toolbar_translucent.xml

<?xml version="1.0" encoding="utf-8"?>

<shape
    xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:angle="270"
        android:endColor="@android:color/transparent"
        android:startColor="@color/black_alpha_40"/>
</shape>

colores.xml

<color name="black_alpha_40">#66000000</color>

Puedes jugar con diferentes valores en el gradiente, lo que he encontrado es que para los elementos blancos, el 40% negro funciona bien.

Otra cosa que puede hacer es ocultar el título de la barra de herramientas.

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

Y mostrar el aumento de la capacidad ...

getSupportActionBar().setDisplayShowTitleEnabled(false);

No se preocupe si ve algo como esto en el panel de vista previa del diseño ...

Se ve muy diferente cuando en realidad se superpone el contenido:

Answer 3

Trata eso:

<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:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

y quita eso con la etiqueta final:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

Pero no lo hagas completamente transparente, puedes usar el color que tiene la transparencia como #93000000 para que sea así:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#93000000"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />