Search code examples
androidandroid-appcompatandroid-buttonandroidx

Android AppCompatButton does look crazy in lower part of the screen


Con somebody explain the following behaviour in viepager2 und why the angle of the pressed button changes like this?

In the first image the first button is pressed. In the second the 6th button (that looks crazy).

In the code there you can see my layout and below the style for the buttons. I did change the buttons to material buttons, but this didn't solve the problem.

I don't know where this change of point of view/angle comes from.

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="17">

    <com.google.android.material.textview.MaterialTextView
        android:gravity="center"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:text="@string/app_name"
        android:layout_weight="1" />

    <androidx.appcompat.widget.AppCompatTextView
        style="@style/rv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textAlignment="center"
        android:gravity="center" />

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="7"
        android:orientation="vertical"
        android:layout_marginHorizontal="8dp">


        <androidx.appcompat.widget.AppCompatButton
            style="@style/style" />

        <androidx.appcompat.widget.AppCompatButton
            style="@style/style" />

        <androidx.appcompat.widget.AppCompatButton
            style="@style/style" />

    </androidx.appcompat.widget.LinearLayoutCompat>


    <androidx.appcompat.widget.AppCompatTextView
        style="@style/rv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textAlignment="center"
        android:gravity="center" />

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="7"
        android:orientation="vertical"
        android:layout_marginHorizontal="8dp">

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/isearch_button0"
            style="@style/style" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/isearch_button1"
            style="@style/style" />

        <androidx.appcompat.widget.AppCompatButton
            style="@style/style" />

        <androidx.appcompat.widget.AppCompatButton
            style="@style/style" />


    </androidx.appcompat.widget.LinearLayoutCompat>

</androidx.appcompat.widget.LinearLayoutCompat>

<style name="style">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">@android:color/black</item>
    <item name="android:text">@string/templateTypeAnswer_male</item>
    <item name="android:backgroundTint">@android:color/transparent</item>
</style>

first image seccond image


Solution

  • in your style you have set backgroundTint as transparent, thats not supported with shadow added by default to every AppCompatButton, thus you can see some glitches. if you need really transparent Button then use background attribute, but you will lose shadow (as there is no shadow under transparent objects in "material" world). if you need gray fuzzed background (aka. "only shadow") then use some custom drawable for this purpose, also set as background attribute. and then you may also set StateListAnimator as null - this attribute is "adding" shadow (not background or backgroundTint) and also an animation with elevation change when pressed. null will remove this feature (put below in your style)

    <item name="android:stateListAnimator">@null</item>