导航操作栏上的布局设计

Question

我正在寻找在导航操作栏顶部设计元素的解决方案，以及增加操作栏大小的方法。我能想到的一种方法是禁用导航操作栏，然后进行设计。有什么办法可以在不禁用操作栏的情况下实现吗？

这是设计模板：

澄清一下，我正在寻找设计 connect 选项卡的想法，其中一半在导航操作栏上，而另一半在滚动视图上

xml for main 

        <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context=".MainActivity"
        android:background="#696969">
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <include layout="@layout/toolbar" />
    
            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="80dp"
                android:background="#696969">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_marginTop="15dp">
                    <Button
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Filter"
                        android:layout_marginLeft="20dp"
                        android:textSize="26sp"
                        android:textColor="@color/white"
                        >
    
                    </Button>
                    <Button
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="scan"
                        android:textSize="26sp"
                        android:layout_marginLeft="20dp"
                        android:textColor="@color/white"
                        >
    
                    </Button>
                </LinearLayout>
            </ScrollView>
    
        </RelativeLayout>
    
    
    
    
    </androidx.coordinatorlayout.widget.CoordinatorLayout>


here is xml for toolbar

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/backkground">

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="10dp"
        app:cardElevation="10dp"
        android:layout_marginEnd="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"
        android:background="@color/black">
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:padding="2dp"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="8dp"
                android:src="@drawable/ic_baseline_cast_connected_24">

            </ImageView>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:text="Connected"
                android:textSize="44sp">

            </TextView>
        </LinearLayout>

    </androidx.cardview.widget.CardView>



</RelativeLayout>

恐怕我可以将所有代码显示为它的专有代码，但我只是写了一些代码来通过划分背景来缓解我当前的解决方案 colo.lol。

Answer 1

经过30分钟的努力。我得到了你的答案。在您的图像中，Toolbar 已经与 backButton, refreshButton, BluetothButton, and locationButton 一起使用，他们在 TabLayout 中创建了 Connect 按钮，这就是为什么它在 TabLayout 上显示一半，在 Blank Spaces.

我按照模板中所示创建了它。

这是我的 XML 布局代码。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <!--    Your ToolBar Code or Other Code-->
    
    <TableLayout
        android:id="@+id/myTooBar"
        android:layout_width="match_parent"
        android:layout_gravity="top"
        android:layout_height="?actionBarSize">
<!--    Here is sample textView with color-->
        <TextView
            android:background="@color/purple_500"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </TableLayout>
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="10dp"
        app:layout_anchor="@+id/myTooBar"
        app:layout_anchorGravity="bottom|center"
        android:layout_height="wrap_content">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="bottom"
        android:background="@color/white"
        android:padding="15dp"
        android:gravity="left"
        android:text="@string/connect"
        android:textColor="@color/gray"
        android:textSize="22sp"
        android:textStyle="bold"
        app:drawableLeftCompat="@drawable/ic_baseline_cell_wifi_24"
        app:drawableTint="@color/gray" />
    </androidx.cardview.widget.CardView>
    
<!--    Your more code of Activity-->
</androidx.coordinatorlayout.widget.CoordinatorLayout>

这是结果

希望对你有所帮助

编辑 -1：为 cardView

添加了更多半径

导航操作栏上的布局设计

Layout design over navigation action bar

android

xml

android-studio

android-layout