Эффект тени в предметах Recyclerview - PullRequest
Новая
       79

Эффект тени в предметах Recyclerview

0 голосов
/ 02 июня 2019

Я хочу создать дизайн с линейным макетом и несколькими виджетами, а также с эффектом тени, например, с возвышением, но я не могу получить правильные тени.

Я пытался добавить высоту no к линейному макету, но это не дает никакого эффекта в дизайне.

Я также пробовал просмотр карты, но у меня не получается нужный эффект тени.

My Recylerview Item XML: 

<LinearLayout
    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="wrap_content"
    android:elevation="10dp"
    android:outlineProvider="bounds">

    <LinearLayout
      android:id="@+id/layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:background="@drawable/shape_rectangle_rounded_corner_black"
      android:orientation="vertical">

      <RelativeLayout
        android:id="@+id/rl_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="20dp"
        android:paddingStart="20dp">

        <de.hdodenhof.circleimageview.CircleImageView
          android:layout_width="13dp"
          android:layout_height="13dp"
          android:background="@color/colorPrimary"
          android:visibility="gone"
          app:civ_border_width="1dp"/>

        <TextView
          android:id="@+id/tv_time"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:fontFamily="@font/font_avenirltstd_book"
          android:textColor="@color/color_light_grey"
          android:textSize="14sp"
          tools:text="12 PM"/>

        <TextView
          android:id="@+id/tv_distance"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginEnd="15dp"
          android:layout_alignParentEnd="true"
          android:fontFamily="@font/font_avenirltstd_book"
          android:text="2.1 mi."
          android:textColor="@color/color_light_grey"
          android:textSize="14sp"/>

      </RelativeLayout>

      <TextView
        android:id="@+id/tv_workout_Name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"
        android:paddingStart="20dp"
        android:fontFamily="@font/font_avenirltstd_heavy"
        android:textColor="@color/color_black_1"
        android:textSize="24sp"
        tools:text="HIIT Workout"/>


      <TextView
        android:id="@+id/tv_type_of_booking"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"
        android:paddingBottom="20dp"
        android:paddingStart="20dp"
        android:fontFamily="@font/font_avenirltstd_book"
        android:text="One-Time Booking"
        android:textColor="@color/color_light_grey"
        android:textSize="14sp"/>

    </LinearLayout>
  </LinearLayout>

My RecyclerПосмотреть предмет: 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/white"
  android:clipToPadding="false">


  <ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false">

    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#F3f3f3"
      android:clipToPadding="false">

        <com.marcohc.robotocalendar.RobotoCalendarView
          android:id="@+id/robotoCalendarView"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:elevation="10dp"
          android:visibility="visible"
          app:mcv_calendarMode="month"
          app:mcv_dateTextAppearance="@style/CalendarDateTextAppearance"
          app:mcv_headerTextAppearance="@style/CalendarHeaderTextAppearance"
          app:mcv_leftArrow="@drawable/mcv_action_previous"
          app:mcv_monthLabels="@null"
          app:mcv_rightArrow="@drawable/mcv_action_next"
          app:mcv_selectionColor="@color/color_red"
          app:mcv_selectionMode="single"
          app:mcv_showOtherDates="out_of_range"
          app:mcv_weekDayTextAppearance="@style/CalendarWeekTextAppearance"/>

      <View
        android:id="@+id/view_1"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_below="@+id/msvw"
        android:background="@drawable/shadow"/>

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

  </ScrollView>

</RelativeLayout>

Токовый выход:

image

Ожидаемый результат:

image

Ответы [ 3 ]

1 голос
/ 02 июня 2019

Вам нужно будет использовать CardView, чтобы получить эффект тени. Попробуйте следующий макет как элемент RecyclerView и посмотрите, работает ли он. 

<android.support.v7.widget.CardView
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="wrap_content"
app:cardElevation="10dp"
app:cardUseCompatPadding="true"
app:cardCornerRadius="10dp">

<LinearLayout
  android:id="@+id/layout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_margin="5dp"
  android:background="@drawable/shape_rectangle_rounded_corner_black"
  android:orientation="vertical">

  <RelativeLayout
    android:id="@+id/rl_time"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="20dp"
    android:paddingStart="20dp">

    <de.hdodenhof.circleimageview.CircleImageView
      android:layout_width="13dp"
      android:layout_height="13dp"
      android:background="@color/colorPrimary"
      android:visibility="gone"
      app:civ_border_width="1dp"/>

    <TextView
      android:id="@+id/tv_time"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:fontFamily="@font/font_avenirltstd_book"
      android:textColor="@color/color_light_grey"
      android:textSize="14sp"
      tools:text="12 PM"/>

    <TextView
      android:id="@+id/tv_distance"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginEnd="15dp"
      android:layout_alignParentEnd="true"
      android:fontFamily="@font/font_avenirltstd_book"
      android:text="2.1 mi."
      android:textColor="@color/color_light_grey"
      android:textSize="14sp"/>

  </RelativeLayout>

  <TextView
    android:id="@+id/tv_workout_Name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="10dp"
    android:paddingStart="20dp"
    android:fontFamily="@font/font_avenirltstd_heavy"
    android:textColor="@color/color_black_1"
    android:textSize="24sp"
    tools:text="HIIT Workout"/>


  <TextView
    android:id="@+id/tv_type_of_booking"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="10dp"
    android:paddingBottom="20dp"
    android:paddingStart="20dp"
    android:fontFamily="@font/font_avenirltstd_book"
    android:text="One-Time Booking"
    android:textColor="@color/color_light_grey"
    android:textSize="14sp"/>

</LinearLayout>

Замените тег android.support.v7.widget.CardView на тег AndroidX CardView, если вы используете библиотеки AndroidX. Используя тег cardCornerRadius, вам не нужно давать собственный фон для вашего LinearLayout.

Кроме того, не забудьте проверить, есть ли hardwareAccelerated = true в вашем файле манифеста. Это уже верно, если вы ориентируетесь на API 14+. Вы не увидите теней, если для него установлено значение false.

0 голосов
/ 03 июня 2019

Android CardView - это то, что вы ищете.Поместите свой календарь и каждый элемент в карточку.

Изменение высоты карты для изменения размера тени.

0 голосов
/ 02 июня 2019

Вот мое предложение для вас, основываясь на том, что я знаю:

  1. Установите для вашего верхнего уровня RelativeLayout, чтобы отступы были равны полям, которые вы установили для относительного макета, который вы хотитечтобы показать тень;

  2. Установите android:clipToPadding="false" для того же RelativeLayout;

  3. Удалите поле из RelativeLayout, для которого также задана высота;

  4. Вам также может понадобиться установить непрозрачный цвет фона для дочернего макета, который требует повышения.

...