wake-up-neo.net

Wie kann man die Symbolleiste transparent machen?

Es ist selbst Fragen und Antworten nach Ich habe eine transparente ActionBar, die das Layout überlagert. Nach der Migration zur neuesten Support-Bibliothek musste ich mich für die Toolbar von der ActionBar trennen. Die alten Möglichkeiten, das Layout transparent zu machen und dieses Layout zu überlagern, funktionieren nicht mehr.

<style name="CustomActionBarTheme" parent="@Android:style/Theme.AppCompat">
    <item name="Android:windowActionBarOverlay">true</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="Android:actionBarStyle">@style/TransparentActionBar</item>
</style>

<style name="TransparentActionBar" parent="@Android:style/Widget.Holo.Light.ActionBar">
    <item name="Android:background">@Android:color/transparent</item>
</style>
51
Gleichmut

Sie müssen lediglich ein Thema definieren, das die Aktionsleiste ausblenden soll, den Aktionsleistenstil mit transparentem Hintergrund definieren und diesen Stil auf das Symbolleisten-Widget setzen. Bitte beachten Sie, dass die Symbolleiste als letzte Ansicht (über den gesamten Ansichtsbaum) gezeichnet werden sollte. 

<style name="Theme.Custom" parent="@Android:style/Theme.AppCompat">
    <item name="windowActionBar">false</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="Android:windowActionBarOverlay">true</item>
</style>

<style name="CustomActionBar" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="Android:windowActionBarOverlay">true</item>
    <!-- Support library compatibility -->
    <item name="windowActionBarOverlay">true</item>
</style>

Layout:

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:orientation="vertical"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <!-- Toolbar should be above content-->
    <include layout="@layout/toolbar" />

</RelativeLayout>

Werkzeugleistenlayout:

<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"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:theme="@style/CustomActionBar"/>
31
Gleichmut

Erstellen Sie Ihre toolbar.xml-Datei mit dem Hintergrund von AppBarLayout: @null.

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.AppBarLayout
    Android:id="@+id/general_appbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="@null"
    xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <Android.support.v7.widget.Toolbar
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize">
        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:gravity="center_horizontal"
            Android:text="Login"
            Android:textSize="20sp"/>
    </Android.support.v7.widget.Toolbar>

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

und hier ist das Ergebnis:

 enter image description here

33
TranVo

Google-Beispielcode überprüfen Ich habe herausgefunden, wie Sie die Symbolleiste vollständig transparent machen können. Es war einfacher als ich dachte. Wir müssen nur eine einfache, so gezeichnete Form erstellen.

Der Name des Drawable ist toolbar_bg

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<gradient
    Android:angle="90"
    Android:startColor="@Android:color/transparent"
    Android:endColor="@Android:color/transparent"
    Android:type="linear" />
</shape>

Und dann im Fragment oder in der Aktivität. Fügen Sie die Symbolleiste wie folgt hinzu. 

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

Und hier haben wir eine vollständig transparente Symbolleiste.

 enter image description here

Fügen Sie nicht den <Android.support.design.widget.AppBarLayout > hinzu, da dies nicht funktioniert.

Note: Wenn Sie AppBarLayout benötigen, setzen Sie die Höhe auf 0, damit der Schatten nicht gezeichnet wird.

26
Pedro Varela

Die Symbolleiste funktioniert wie eine Ansicht, daher ist die Antwort sehr einfach.

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

Fügen Sie die folgende Zeile in style.xml hinzu

<style name="Base.Theme.AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme" parent="Base.Theme.AppTheme">
</style>

Fügen Sie nun in style-v21 die folgende Zeile hinzu:

  <style name="AppTheme" parent="Base.Theme.AppTheme">
    <item name="Android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="Android:statusBarColor">@Android:color/transparent</item>
</style>

und setze das Thema als Android: theme = "@ style/AppTheme"

Dadurch wird die Statusleiste transparent.

11
Reprator

Verwenden Sie einfach den folgenden XML-Code:

Code für das Layout:

<Android.support.v7.widget.Toolbar
            xmlns:Android="http://schemas.Android.com/apk/res/Android"
            Android:id="@+id/def_toolbar"
            Android:layout_height="wrap_content"
            Android:layout_width="match_parent"
            Android:minHeight="?attr/actionBarSize"
            Android:background="@color/toolbarTransparent"
            Android:layout_alignParentTop="true" />

Fügen Sie den folgenden Code in die Datei colors.xml ein:

<color name="toolbarTransparent">#00FFFFFF</color>

Dadurch erhalten Sie die gewünschte Ausgabe.

7
V_J

Ich habe die transluzente Symbolleiste implementiert, indem ich zwei Theme.AppCompat.Light.NoActionBar-Designs erstellt und das colorPrimary-Attribut auf transparente Farbe gesetzt habe.

1) Erstellen Sie zwei Themen Erstellen Sie ein Thema mit der undurchsichtigen Symbolleiste:

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

    <!-- Toolbar background color -->
    <item name="colorPrimary">#ff212cff</item>

</style>

Zweites Thema für die Werkzeugleiste "Transparent/Overlay":

<style name="AppTheme.Overlay" parent="AppTheme">
    <item name="colorPrimary">@color/transparent</item>
</style>

2) Platzieren Sie die Symbolleiste in Ihrem Aktivitätslayout hinter dem Inhalt, damit er davor angezeigt werden kann:

<RelativeLayout
    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:orientation="vertical">

    <fragment
        Android:id="@+id/container"
        Android:name="com.test.CustomFragment"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"/>

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

</RelativeLayout>

3) Wenden Sie das transparente Design auf Ihre Aktivität in AndroidManifest.xml an

    <activity
        Android:name="com.test.TransparentActivity"
        Android:parentActivityName="com.test.HomeActivity"
        Android:theme="@style/AppTheme.Overlay" >
        <meta-data
            Android:name="Android.support.PARENT_ACTIVITY"
            Android:value="com.test.HomeActivity" />
    </activity>
5
Andy

Die einfachste Möglichkeit, eine Symbolleiste transparent zu machen, besteht darin, eine Deckkraft im Abschnitt @colors zu definieren, ein TransparentTheme im Abschnitt @styles zu definieren und diese Definitionen dann in die Symbolleiste zu übernehmen.

@ colors.xml

<color name="actionbar_opacity">#33000000</color>

@ styles.xml

<style name="TransparentToolbar" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="Android:windowActionBarOverlay">true</item>
    <item name="windowActionBarOverlay">true</item>
</style>

@ activity_main.xml

<Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:background="@color/actionbar_opacity"
        app:theme="@style/TransparentToolbar"
        Android:layout_height="?attr/actionBarSize"/>

Das ist das Ergebnis:

Screenshot transparente Symbolleiste

5
Jonoid

Fügen Sie einfach Android:background="@Android:color/transparent" wie unten in Ihrem Appbar-Layout hinzu

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

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

</Android.support.design.widget.AppBarLayout>`
4
Rajesh.k

Vielleicht musst du dir diesen Beitrag ansehen transparente Actionbar mit AppCompat-v7 21

Punkte, die der Beitrag vorschlägt, sind

  1. Stellen Sie nur sicher, dass Sie RelativeLayout verwenden, um die Symbolleiste und den Körper zu legen.
  2. Setzen Sie die Symbolleiste in den letzten.
  3. Setzen Sie für Android eine transparente Farbe: Hintergrundattribut der Symbolleiste

Dies sollte das Problem ohne großen Aufwand lösen.

4
sancho21

Fügen Sie einfach Android: background = "# 10000000" in Ihrem AppBarLayout-Tag hinzu. Es funktioniert

2
Abu bakar

Ich weiß, ich komme zu spät zur Party. Ich habe eine einfache Klasse zum Verwalten der Toolbar-Transparenz erstellt.

import Android.annotation.SuppressLint;
import Android.graphics.drawable.ColorDrawable;
import Android.support.v7.widget.Toolbar;



public class TransparentToolbarManager {

    private Toolbar mToolbar;
    private ColorDrawable colorDrawable;
    public static final int MAX_ALPHA = 255, MIN_ALPHA = 0;

    public TransparentToolbarManager(Toolbar mToolbar) {
        this.mToolbar = mToolbar;
        this.colorDrawable = new ColorDrawable(mToolbar.getContext().getResources().getColor(R.color.colorPrimary));
    }

    public TransparentToolbarManager(Toolbar mToolbar, ColorDrawable colorDrawable) {
        this.mToolbar = mToolbar;
        this.colorDrawable = colorDrawable;
    }

    //Fading toolbar
    public void manageFadingToolbar(int scrollDistance) {
        if (mToolbar != null && colorDrawable != null) {
            //FadeinAndOut according to the horizontal scrollValue
            if (scrollDistance <= MAX_ALPHA && scrollDistance >= MIN_ALPHA) {
                setToolbarAlpha(scrollDistance);
            } else if (scrollDistance > MAX_ALPHA) {
                setToolbarAlpha(MAX_ALPHA);
            }
        }
    }


    @SuppressLint("NewApi")
    public void setToolbarAlpha(int i) {
        colorDrawable.setAlpha(i);
        if (CommonHelper.isSupport(16)) {
            mToolbar.setBackground(colorDrawable);
        } else {
            mToolbar.setBackgroundDrawable(colorDrawable);
        }
    }


}

und das CommonHelper.isSupport ()

public static boolean isSupport(int apiLevel) {
        return Build.VERSION.SDK_INT >= apiLevel;
}
2
theapache64

versuche den Code unten

<Android.support.design.widget.AppBarLayout
                    Android:id="@+id/app_bar"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:theme="@style/AppTheme.Transparent"
                    >
                        <Android.support.v7.widget.Toolbar
                            Android:id="@+id/toolbar"
                            Android:layout_width="match_parent"
                            Android:layout_height="?attr/actionBarSize"
                            app:popupTheme="@style/AppTheme.PopupOverlay" />
                </Android.support.design.widget.AppBarLayout>

style.xml

<style name="AppTheme.Transparent" parent="ThemeOverlay.AppCompat.Light">
        <item name="colorPrimary">@Android:color/transparent</item>
        <item name="colorControlActivated">@color/colorWhite</item>
        <item name="colorControlNormal">@color/colorWhite</item>
    </style>
1
Sỹ Phạm

für Support Toolbar v7 Android.support.v7.widget.Toolbar:

code

toolbar.setBackground(null);
// or
toolbar.setBackgroundColor(ContextCompat.getColor(getContext(), Android.R.color.transparent));

xml (Android:background="@null" oder Android:background="@Android:color/transparent")

<Android.support.v7.widget.Toolbar
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_alignParentTop="true"
    Android:background="@null"
    Android:minHeight="?attr/actionBarSize"
    Android:theme="@style/Theme.AppCompat.Light.DarkActionBar">

    <TextView
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:textColor="@Android:color/white"
        Android:ellipsize="start"
        Android:singleLine="true"
        Android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"/>
</Android.support.v7.widget.Toolbar>

wenn der Titel nicht sichtbar ist, setzen Sie textColor.

1
user25

https://stackoverflow.com/a/37672153/2914140 hat mir geholfen. 

Ich habe dieses Layout für eine Aktivität erstellt:

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

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@color/transparent" <- Add transparent color in AppBarLayout.
        Android:theme="@style/AppTheme.AppBarOverlay"
        >

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

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

    <FrameLayout
        Android:id="@+id/container"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        <- Remove app:layout_behavior=...
        />

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

Wenn dies nicht funktioniert, schreiben Sie in onCreate() der Aktivität (wobei die Symbolleiste @ + id/toolbar ist):

toolbar.background.alpha = 0

Wenn Sie eine halbtransparente Farbe festlegen möchten (z. B. # 30ff00ff), legen Sie toolbar.setBackgroundColor(color) fest. Oder legen Sie sogar eine Hintergrundfarbe von AppBarLayout fest.

In meinem Fall spielten die Stile von AppBarLayout und Toolbar keine Rolle.

1
CoolMind

Nur das hat bei mir funktioniert (AndroidX Support Library):

 <com.google.Android.material.appbar.AppBarLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="@null"
            Android:theme="@style/AppTheme.AppBarOverlay"
            Android:translationZ="0.1dp"
            app:elevation="0dp">

            <androidx.appcompat.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                Android:background="@null"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </com.google.Android.material.appbar.AppBarLayout>

Dieser Code entfernt Hintergrund in allen erforderlichen Ansichten und entfernt auch Schatten aus AppBarLayout (was ein Problem war)

Die Antwort wurde hier gefunden: https://code-examples.net/de/q/1ea52cc

0
oxied

Fügen Sie den folgenden Code zur styles.xml -Datei hinzu

<style name="LayoutPageTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="Android:windowActionBarOverlay">true</item>
    <!-- Support library compatibility -->
    <item name="windowActionBarOverlay">true</item>
    <item name="Android:actionBarStyle">@style/TransparentActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="TransparentActionBar"
    parent="@Android:style/Widget.Holo.Light.ActionBar">
    <item name="Android:background">@Android:color/transparent</item>
</style>

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

Vergiss nicht zu schreiben: Android:background="@Android:color/transparent"

0
somya