带有搜索栏的折叠工具栏布局

时间:2019-11-28 07:08:23

标签: android android-layout

我在折叠的工具栏上创建诸如搜索栏之类的问题。

问题出在这里

Reality and Expectation

首先,我创建一个折叠式工具栏

<android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="240dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleTextAppearance="@android:color/transparent"
        android:fitsSystemWindows="true"> 
    ... 
</android.support.design.widget.CollapsingToolbarLayout>

在CollapsingToolbarLayout内,我添加了一些分层图像,后退按钮和标题。 看起来像这样:

<!-- Background on Verified Store -->
<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:background="@drawable/verifiedkosong"
        app:layout_collapseMode="parallax"
        android:scaleType="centerCrop">

    <!-- Back arrow -->
    <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/arrow_back_white"
            android:layout_margin="16dp"
            android:id="@+id/close" />

    <!-- Activity title on center -->
    <LinearLayout
            android:gravity="center_horizontal|left"
            android:layout_marginEnd="-23dp"
            android:layout_marginTop="-15dp"
            android:id="@+id/viewtext"
            android:layout_below="@+id/close"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        <!-- Text image -->
        <ImageView
                android:layout_marginTop="20dp"
                android:id="@+id/imgVerifIcon"
                android:layout_width="match_parent"
                android:layout_height="32dp"
                android:src="@drawable/textshadow"
                android:layout_gravity="bottom" />

    </LinearLayout>

    <!-- Layered image for background -->
    <ImageView
            android:layout_marginTop="110dp"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:src="@drawable/detail_verified"
            android:layout_gravity="bottom"
            android:layout_marginLeft="8dp"/>

</RelativeLayout>

然后,我添加一个搜索栏。我让它像按钮一样工作。如果点击,它将进入另一个活动(样品的搜索活动)

<RelativeLayout
        android:layout_marginTop="185dp"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@drawable/backallborderradiusstore">

    <!-- SearchBar LinearLayout -->
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
        My SearchBar is here
    </LinearLayout>
</RelativeLayout>

在那之后,我添加了一个工具栏。我仍然不知道如何在此工具栏上添加搜索栏。这是我的工具栏:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="Verified Store"
        app:layout_collapseMode="pin"/>

1 个答案:

答案 0 :(得分:1)

尝试以下适用于我的代码

 <?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"
    android:background="@android:color/white"
    android:fitsSystemWindows="true"
    tools:context=".fragments.HomeFragment">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/home_appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="110dp" (here you can adjust your height as your desire)
            android:animateLayoutChanges="true"
            android:background="@color/blue"
            android:fitsSystemWindows="true"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:titleEnabled="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="horizontal">

                ----you have to setOnclicklistner as backbutton from java------

                <ImageView
                    android:id="@+id/hamburger_icon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="10dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="10dp"
                    android:src="@drawable/back_icon" />

               <ImageView
                here ImageView
                ......./>

            </LinearLayout>


            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar_home"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                android:layout_marginBottom="3dp"
                android:background="@color/blue"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:contentInsetStartWithNavigation="0dp">

                ----custom search view-----


                 <LinearLayout
                     android:layout_width="match_parent"
                     android:layout_height="40dp"
                     android:layout_marginStart="10dp"
                     android:layout_marginEnd="10dp"
                     android:background="@drawable/background_btn_profile"
                     android:gravity="center_vertical"
                     android:orientation="horizontal"
                     android:layout_marginLeft="10dp">

                     <ImageView
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:background="@android:color/white"
                         android:padding="8dp"
                         android:src="@drawable/ic_search_black_24dp" />

                     <EditText
                         android:layout_width="0dp"
                         android:layout_height="wrap_content"
                         android:padding="8dp"
                         android:layout_weight="1"
                         android:background="#ffffff"
                         android:gravity="center_vertical" />

                     <ImageView
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:background="@android:color/white"
                         android:padding="8dp"
                         android:src="@drawable/ic_mic_black_24dp" />
                 </LinearLayout>

                 -------------end here------------
            </androidx.appcompat.widget.Toolbar>


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

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


    <androidx.core.widget.NestedScrollView
        android:id="@+id/nested_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="15dp"
            android:orientation="vertical">


            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/location_based_places"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="2dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="2dp"
                android:background="@color/white" />



            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/exclusive_deals_recycle_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="2dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="2dp"
                android:background="@color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10dp"
                android:drawableStart="@drawable/ic_recommended"
                android:drawableLeft="@drawable/ic_recommended"
                android:drawablePadding="5dp"
                android:gravity="center"
                android:text="Recommended for you"
                android:textColor="@color/blue"
                android:textSize="18sp"
                android:textStyle="bold" />

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recommend_recycle_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="2dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="2dp"
                android:background="@color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10dp"
                android:drawableStart="@drawable/ic_hot_air_balloon"
                android:drawableLeft="@drawable/ic_hot_air_balloon"
                android:drawablePadding="5dp"
                android:gravity="center"
                android:text="Explore"
                android:textColor="@color/blue"
                android:textSize="18sp"
                android:textStyle="bold" />

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/explore_recycle_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="2dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="2dp"
                android:background="@color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10dp"
                android:drawableStart="@drawable/ic_discount"
                android:drawableLeft="@drawable/ic_discount"
                android:drawablePadding="5dp"
                android:gravity="center"
                android:text="Special Offers"
                android:textColor="@color/blue"
                android:textSize="18sp"
                android:textStyle="bold" />

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/specials_recycle_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="2dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="2dp"
                android:background="@color/white" />

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>


</androidx.coordinatorlayout.widget.CoordinatorLayout>