提问人:user17747424 提问时间:10/9/2023 最后编辑:user17747424 更新时间:10/9/2023 访问量:38
如何使工具栏的背景透明
How to make the background of a toolbar transparent
问:
我设置了一个折叠工具栏,一切都按预期工作。只有一个问题,当工具栏折叠时,工具栏后面有一个白色的矩形视图,如下图所示。以下是activity_home.xml文件的代码
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".HomeActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
app:contentScrim="@drawable/custom_app_bar_background"
app:expandedTitleTextAppearance="@style/expandedTitleTextAppearance"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@drawable/custom_app_bar_background"
android:paddingHorizontal="20dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:text="Empowering Discovery: Search the Database for a World of Information"
android:textColor="@color/white"
android:textSize="30sp"
android:textStyle="bold"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Search The Database"
android:textColor="#c9d3f7"
android:textSize="20sp" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:height="50dp"
android:hint="Search for media..."
android:paddingStart="20dp"
android:textColor="@color/black"
android:layout_marginTop="10dp"
android:drawableEnd="@drawable/search_btn"
android:paddingRight="5dp"
android:background="@drawable/search_bar_background"/>
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@drawable/gradient"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="25sp"
android:text="If you're looking to remove the default white background that appears while your app initializes, there isn't a direct way to remove it completely, as it's part of the Android system behavior. However, you can make it less noticeable or disguise it using various techniques. Here are a few alternatives:
1. Use a Splash Screen:
As mentioned earlier, using a splash screen with your app's branding or logo can provide a smoother transition. The splash screen gives the impression that something is happening during the initialization phase, making the white background less noticeable.
2. Optimize Initialization:
Efficiently optimize your app's initialization process. Load essential resources lazily and asynchronously. Delay resource-heavy operations until after the main activity has started. By optimizing your initialization, the white background period is minimized, making it less noticeable.
3. Set a Theme with Transparent Background:
In your app's theme, set the background to be transparent. This doesn't remove the white background but makes it less noticeable since the default background will be transparent instead of white. Add the following line to your theme in styles.xml:"/>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
以下是用于工具栏背景的渐变 .xml 文件代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="120"
android:endColor="@android:color/transparent"
android:startColor="#3BB1EC" />
</shape>
以下是在折叠工具栏展开时用作 CollapsingToolbarLayout 和 Linear 布局背景的稀松布的 custom_app_bar_background.xml 文件的代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#3BB1EC"
android:endColor="#216CF1"
android:angle="120"/>
<corners
android:bottomRightRadius="40dp"
android:bottomLeftRadius="40dp"/>
</shape>
我尝试将工具栏的背景设置为透明,但不起作用,因为状态栏颜色与工具栏颜色没有顺利混合。目标是删除工具栏后面的白色矩形视图,如上图所示。
答:
这一切都与 AppBarLayout 有关。
您可以通过此方式进行配置。
正如这个问题在这里提到的
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:background="@null"
android:theme="?attr/actionBarTheme"
android:layout_height="wrap_content"
android:id="@+id/AppBarLayout"
android:orientation="vertical"
android:outlineProvider="none"
app:elevation="0dp">
</com.google.android.material.appbar.AppBarLayout>
要删除工具栏后面的白色矩形视图,您可以尝试以下操作:
为折叠工具栏使用自定义背景。这可以是透明的可绘制对象,也可以是具有与状态栏颜色匹配的渐变的可绘制对象。这将在工具栏折叠时隐藏白色背景。 使用初始屏幕。初始屏幕可用于在应用初始化时显示应用的徽标和品牌。这将隐藏白色背景,并给用户留下应用程序正在加载的印象。 优化应用的初始化。这将最大限度地减少白色背景可见的时间。为此,您可以延迟和异步加载基本资源,并将资源密集型操作延迟到主活动启动之后。 以下是如何为折叠工具栏使用自定义背景的示例:
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/custom_collapsing_toolbar_background"
app:contentScrim="@drawable/custom_collapsing_toolbar_background"
app:expandedTitleTextAppearance="@style/expandedTitleTextAppearance"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">
// ...
</com.google.android.material.appbar.CollapsingToolbarLayout>
可绘制对象可以是透明可绘制对象,也可以是渐变与状态栏颜色匹配的可绘制对象。custom_collapsing_toolbar_background.xml
下面是如何使用初始屏幕的示例:
<activity android:name=".SplashActivity"
android:theme="@style/SplashTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
该类可用于在应用初始化时显示应用的徽标和品牌。一旦应用程序初始化,就可以完成并启动主要活动。SplashActivity
SplashActivity
下面是如何优化应用初始化的示例:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Load essential resources lazily and asynchronously.
// ...
// Delay resource-heavy operations until after the main activity has started.
// ...
}
}
评论