android - 如何制作类似whatsapp的工具栏

Question

我正在尝试制作类似于 appbar 的 whatsapp

我的代码

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:navigationIcon="@drawable/abc_vector_test"
        app:logo="@drawable/ic_baseline_edit_24"
        app:subtitle="Me, You"
        app:title="Group Name"
        app:menu="@menu/chat_room_app_bar"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
        >

    </com.google.android.material.appbar.MaterialToolbar>


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

问题是我无法像在whatsapp appbar中那样将显示图片与navigationIcon结合起来

以及当我们点击如下所示的应用栏时如何添加涟漪效果

标签： androidmaterial-components-android

Answer 1

这对我有用。我已经制作了带有 imageView 的自定义工具栏。

<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=".ui.chatroom.ChatRoomActivity">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/topAppBar"
            style="@style/Widget.MaterialComponents.Toolbar.Primary"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:orientation="vertical"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp"
            app:menu="@menu/chat_room_app_bar"
            app:title="@null">
            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/navigationBackButtonChatRoom"
                style="@style/Widget.AppCompat.Toolbar.Button.Navigation"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/bg_dp"
                android:clickable="true">
                <ImageView
                    android:id="@+id/chatRoomDisplayImageView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/abc_vector_test"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
                <com.google.android.material.imageview.ShapeableImageView
                    android:layout_width="32dp"
                    android:layout_height="32dp"
                    android:layout_marginTop="4dp"
                    android:layout_marginEnd="4dp"
                    android:layout_marginBottom="4dp"
                    android:background="@null"
                    android:scaleType="fitXY"
                    android:src="@drawable/p_p"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toEndOf="@+id/chatRoomDisplayImageView"
                    app:layout_constraintTop_toTopOf="parent"
                    app:shapeAppearanceOverlay="@style/roundedImageViewRounded" />
            </androidx.constraintlayout.widget.ConstraintLayout>
            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/chatInfoConstraintLayout"
                style="@style/Widget.MaterialComponents.Toolbar.Primary"
                android:layout_width="wrap_content"
                android:layout_height="?attr/actionBarSize"
                android:layout_margin="0dp"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:minWidth="540dp">
                <TextView
                    android:id="@+id/titleTextViewChatRoom"
                    style="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="2dp"
                    android:text="Group Name"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
                <TextView
                    android:id="@+id/subtitleTextViewChatRoom"
                    style="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Me, You"
                    android:visibility="gone"
                    app:layout_constraintStart_toStartOf="@+id/titleTextViewChatRoom"
                    app:layout_constraintTop_toBottomOf="@+id/titleTextViewChatRoom" />
            </androidx.constraintlayout.widget.ConstraintLayout>
        </com.google.android.material.appbar.MaterialToolbar>
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/messageRecyclerView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:scrollbars="vertical"
            app:layout_constraintBottom_toTopOf="@+id/footerConstraintLayout"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:itemCount="100"
            tools:listitem="@layout/chat_row_left_head" />
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/footerConstraintLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="6dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">
            <ImageButton
                android:id="@+id/sendButtonMain"
                android:layout_width="47dp"
                android:layout_height="47dp"
                android:layout_marginEnd="4dp"
                android:background="@drawable/input_circle"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/input_send" />
            <LinearLayout
                android:id="@+id/input_layout"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:background="@drawable/ib_new_round"
                android:gravity="bottom"
                android:minHeight="47dp"
                android:orientation="vertical"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/sendButtonMain"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                >
                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="4dp">
                    <ImageButton
                        android:id="@+id/emojiButtonChatRoom"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="8dp"
                        android:background="@android:color/transparent"
                        android:src="@drawable/ib_emoji"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:tint="@color/ibEmojiIconTint" />
                    <EditText
                        android:id="@+id/mainEditText"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_marginStart="8dp"
                        android:layout_marginEnd="8dp"
                        android:autoText="true"
                        android:background="@null"
                        android:capitalize="sentences"
                        android:hint="Type a message"
                        android:imeOptions="actionSend"
                        android:maxLines="6"
                        android:paddingTop="4dp"
                        android:paddingEnd="8dp"
                        android:paddingBottom="4dp"
                        android:scrollbarAlwaysDrawVerticalTrack="true"
                        android:scrollbarDefaultDelayBeforeFade="200"
                        android:scrollbarFadeDuration="300"
                        android:scrollbarStyle="outsideOverlay"
                        android:scrollbars="vertical"
                        android:textColor="@color/primary_text"
                        android:textColorHint="@color/hint_text"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toStartOf="@+id/attachButton"
                        app:layout_constraintStart_toEndOf="@+id/emojiButtonChatRoom"
                        app:layout_constraintTop_toTopOf="parent" />
                    <ImageView
                        android:id="@+id/attachButton"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="14dp"
                        android:layout_marginEnd="24dp"
                        android:layout_marginBottom="14dp"
                        android:rotation="-45"
                        android:visibility="invisible"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toStartOf="@+id/cameraButton"
                        app:layout_constraintTop_toTopOf="parent"
                        app:srcCompat="@drawable/ib_attach" />
                    <ImageView
                        android:id="@+id/cameraButton"
                        android:layout_width="24dp"
                        android:layout_height="24dp"
                        android:layout_marginEnd="12dp"
                        android:visibility="invisible"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:srcCompat="@drawable/ic_baseline_photo_camera_24" />
                </androidx.constraintlayout.widget.ConstraintLayout>
            </LinearLayout>
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/scrollToBottomFab"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="12dp"
        android:layout_marginBottom="72dp"
        android:clickable="true"
        app:fabCustomSize="32dp"
        app:maxImageSize="24dp"
        app:srcCompat="@drawable/ic_baseline_keyboard_arrow_down_24" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>