Просмотр с эффектом «пресс»

Question

Android Studio 3.6

в моем макете xml:

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/feedbackContainer"
        android:layout_width="0dp"
        android:layout_height="174dp"
        app:layout_constraintEnd_toEndOf="@+id/checkContainer"
        app:layout_constraintStart_toStartOf="@+id/checkContainer"
        app:layout_constraintTop_toBottomOf="@+id/checkContainer">

        <ImageView
            android:id="@+id/feedbackViewCircle"
            android:layout_width="124dp"
            android:layout_height="124dp"
            android:background="@drawable/circle_bg"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.498"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@+id/heartOutlineNotMadeContainer"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:background="@drawable/feedback_outline_bg"
            app:layout_constraintBottom_toBottomOf="@+id/feedbackViewCircle"
            app:layout_constraintEnd_toEndOf="@+id/feedbackViewCircle"
            app:layout_constraintStart_toStartOf="@+id/feedbackViewCircle"
            app:layout_constraintTop_toTopOf="@+id/feedbackViewCircle" />

        <TextView
            android:id="@+id/feedbackTextView"
            style="@style/defaultTextStyle2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:gravity="center"
            android:text="@string/feedback"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/feedbackViewCircle" />

    </androidx.constraintlayout.widget.ConstraintLayout>

/ circle_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/circle_paint_dark" android:state_enabled="false" />
    <item android:drawable="@drawable/circle_paint" />
</selector>

/ feedback_outline_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_heartoutlinemade" android:state_enabled="false" />
    <item android:drawable="@drawable/ic_heartoutlinenotmade" />
</selector>

здесь background / feedbackViewCircle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/circle_paint_dark" android:state_enabled="false" />
    <item android:drawable="@drawable/circle_paint" />
</selector>

И вот результат:

OK. Это работа.

Но мне нужен эффект "нажатия". Smt как это:

Answer 1

Предполагая, что я понимаю вопрос, я советую вам использовать стиль, который расширяет Widget.Design.FloatingActionButton , а затем применить его к вашему представлению следующим образом:

<style name="FeedbackAppearance" parent="Widget.Design.FloatingActionButton">
    <item name="android:layout_width">@dimen/some_width</item>
    <item name="android:layout_height">@dimen/some_height</item>
    <item name="android:layout_margin">@dimen/std_gap</item>
    <item name="layout_anchorGravity">end|bottom</item>
    ...
</style>

// inside layout file
<View 
   style="@style/FeedbackAppearance"
   ...
/>

Вы можетеизмените любой из следующих атрибутов стиля или добавьте другие.

 <style name="Widget.Design.FloatingActionButton" parent="android:Widget">
    <item name="android:background">@drawable/design_fab_background</item>
    <item name="android:clickable">true</item>
    <item name="android:focusable">true</item>
    <item name="backgroundTint">?attr/colorAccent</item>
    <item name="fabSize">auto</item>
    <item name="elevation">@dimen/design_fab_elevation</item>
    <item name="hoveredFocusedTranslationZ">@dimen/design_fab_translation_z_hovered_focused</item>
    <item name="pressedTranslationZ">@dimen/design_fab_translation_z_pressed</item>
    <item name="rippleColor">?attr/colorControlHighlight</item>
    <item name="borderWidth">@dimen/design_fab_border_width</item>
    <item name="maxImageSize">@dimen/design_fab_image_size</item>
    <item name="showMotionSpec">@animator/design_fab_show_motion_spec</item>
    <item name="hideMotionSpec">@animator/design_fab_hide_motion_spec</item>
  </style>

Answer 2

Сделайте View активируемым и добавьте селектор для фона в нормальном и нажатом состоянии, который отлично работает.

<View
    android:id="@+id/feedbackViewCircle"
    android:layout_width="124dp"
    android:layout_height="124dp"
    android:clickable="true"
    android:background="@drawable/circle_bg"
    ...
/>

circle_bg.xml для селектора фона

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/circle_paint_dark" android:state_pressed="true" />
    <item android:drawable="@drawable/circle_paint" />
</selector>