1

I am creating an app and re-building a control in Xamarin.Android. The control works as expected, but I noticed if I choose android:layout_height="wrap_content" the Elevation is gone:

preview1

But if I choose the android:layout_height="match_parent" it works as expected:

preview 2

You might ask, then why don't you use match_parent and the reason is that this control is a Search Bar and part of blocks its regular working:

preview 3

Since all buttons that you saw they became inaccessible because the Search Bar took full ownership of the view and it's irrelevant where I click I can see only the options:

preview options

The code of the CardView or that section of the code is the following one:

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:ignore="ContentDescription"
    xmlns:tools="http://schemas.android.com/tools">

    <android.support.v7.widget.CardView
        android:id="@+id/mt_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        app:cardBackgroundColor="@color/searchBarPrimaryColor"
        app:cardCornerRadius="2dp"
        app:cardElevation="2dp"
        app:cardPreventCornerOverlap="false">

        <RelativeLayout
            android:id="@+id/root"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/mt_menu"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:clickable="true"
                android:padding="12dp"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_dots_vertical_black_48dp"
                android:visibility="gone"
                android:focusable="true" />

            <ImageView
                android:id="@+id/mt_nav"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:background="?selectableItemBackgroundBorderless"
                android:clickable="true"
                android:scaleType="center"
                android:visibility="visible"
                app:srcCompat="@drawable/ic_menu_black_24dp"
                android:focusable="true" />

            <TextView
                android:id="@+id/mt_placeholder"
                android:layout_width="wrap_content"
                android:layout_height="48dp"
                android:layout_marginLeft="16dp"
                android:layout_toLeftOf="@+id/mt_search"
                android:layout_toRightOf="@+id/mt_nav"
                android:fontFamily="sans-serif"
                android:gravity="center_vertical"
                android:maxLines="1"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/searchBarPlaceholderColor"
                android:textStyle="bold"
                android:visibility="visible"
                tools:text="PlaceHolder"
                android:layout_marginStart="16dp"
                android:layout_toStartOf="@+id/mt_search"
                android:layout_toEndOf="@+id/mt_nav" />

            <LinearLayout
                android:id="@+id/inputContainer"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_toStartOf="@+id/mt_menu"
                android:layout_toLeftOf="@+id/mt_menu"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:visibility="gone">

                <ImageView
                    android:id="@+id/mt_arrow"
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:background="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:padding="12dp"
                    android:src="@drawable/ic_arrow_left_black_48dp"
                    android:visibility="visible"
                    android:focusable="true" />

                <EditText
                    android:id="@+id/mt_editText"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="8dp"
                    android:layout_marginRight="8dp"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:hint="@string/action_search"
                    android:imeOptions="flagNoExtractUi|actionSearch"
                    android:inputType="text"
                    android:maxLines="1"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:visibility="visible"/>

                <ImageView
                    android:id="@+id/mt_clear"
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:background="?selectableItemBackgroundBorderless"
                    android:padding="12dp"
                    android:src="@drawable/ic_close_black_48dp" />

            </LinearLayout>

            <RelativeLayout
                android:id="@+id/last"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_alignParentStart="true"
                android:layout_alignParentLeft="true"
                android:layout_marginTop="48dp">

                <View
                    android:id="@+id/mt_divider"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/searchBarDividerColor" />

                <android.support.v7.widget.RecyclerView
                    android:id="@+id/mt_recycler"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </RelativeLayout>

            <ImageView
                android:id="@+id/mt_search"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:background="?selectableItemBackgroundBorderless"
                android:clickable="false"
                android:padding="12dp"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_magnify_black_48dp"
                android:visibility="visible" />

            <View
                android:id="@+id/mt_menu_divider"
                android:layout_width="1dp"
                android:layout_height="48dp"
                android:layout_alignParentRight="true"
                android:layout_marginRight="48dp"
                android:background="@color/searchBarDividerColor"
                android:clickable="false"
                android:visibility="gone"
                android:layout_alignParentEnd="true"
                android:layout_marginEnd="48dp" />

        </RelativeLayout>
    </android.support.v7.widget.CardView>
</merge>

And this is how I invoke the control in my XML:

<tk.supernovaic.MaterialSearchBar.MaterialSearchBar
    android:id="@+id/searchBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:mt_navIconEnabled="true"
    app:mt_placeholder="@string/HeaderByTime" />

were*What have I tried so far?**

I tried to add the elevation manually to the previous control and it didn't work:

android:elevation="9dp"

Also, I tried to set a specific height:

 android:layout_height="52dp"

And then the results were not displayed.

If you want to go deeper into the control you can check my repository:

https://github.com/FANMixco/Xamarin-SearchBar/tree/master/tk.supernovaic.MaterialSearchBar

Also, this is the code where I based my own version:

https://github.com/mancj/MaterialSearchBar

Federico Navarrete
  • 3,069
  • 5
  • 41
  • 76

2 Answers2

1

Add some margin. The dropshadow actually occurs outside of the card, outside of it. If you add a margin you'll see it again.

Gabe Sechan
  • 90,003
  • 9
  • 87
  • 127
  • +1 for Gabe, try with more, sometimes it changes. Set a real value for your searchbar, for example android:layout_height="40dp". Probably android needs to know the real height in order to draw the view correctly – Turvy Jul 01 '19 at 22:06
  • Hi @FlorentBreton nice idea, but if I do that then the results are not displayed (I already tried in the past) and only the bar is visible then it doesn't work as expected. – Federico Navarrete Jul 02 '19 at 09:42
1

Take a look at android:clipToPadding (docs) and android:clipChildren (docs).

Raimo
  • 1,494
  • 1
  • 10
  • 19