Android Layout прозрачный фон макета с подчеркиванием

Question

Я пытаюсь нарисовать фон макета, который будет только подчеркиванием градиента с высотой 1-2 dp, а остальное прозрачно, поэтому в верхней части будет фон родительского элемента.

Вот что яhave.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android>

<!-- underline color -->
<item>
    <shape>
        <gradient
            android:startColor="@color/colorPrimaryDark"
            android:endColor="#FFFFFFFF"
            android:centerY="0.5"
            android:angle="0"/>


    </shape>
</item>


<!-- main color -->
<item android:bottom="2.5dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/white" />
        <padding
            android:top="4dp"
            android:bottom="4dp" />
    </shape>
</item>

Если я изменю сплошной цвет в «основном цвете» на прозрачный, весь фон будет использовать настройки «подчеркивания цвета».

Answer 1

Техника, которую вы используете для создания линии в нижней части вида, работает, если цвет слоя, наложенного на слой градиента, непрозрачен.То, что вы пытаетесь сделать, это применить прозрачный слой, который заменяет (стирает) основной градиент.Это не так: прозрачное наложение оставляет базовый цвет, здесь градиент, нетронутым.

Вот альтернативный список слоев, который можно использовать для API 23 +:

underline_drawable.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="bottom">
        <shape>
            <size android:height="2dp" />
            <gradient
                android:angle="0"
                android:centerY="0.5"
                android:endColor="#FFFFFFFF"
                android:startColor="@color/colorPrimaryDark" />
        </shape>
    </item>
</layer-list>

Вот как это выглядит:

До API 23Вы можете использовать следующую настраиваемую отрисовку, но она должна быть задана в коде.

GradientUnderline.java

public class GradientUnderline extends Drawable {
    private Shader mShader;
    private final Paint mPaint;
    private int mHeight = -1;
    private int mStartColor = Color.BLACK;
    private int mEndColor = Color.WHITE;
    private int mLastWidth;

    public GradientUnderline() {
        mPaint = new Paint();
    }

    public GradientUnderline(int lineHeight, int startColor, int endColor) {
        mPaint = new Paint();
        mHeight = lineHeight;
        mStartColor = startColor;
        mEndColor = endColor;
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        if (mShader == null || getBounds().width() != mLastWidth) {
            mLastWidth = getBounds().width();
            mShader = new LinearGradient(0, 0, getBounds().width(), mHeight, mStartColor,
                                         mEndColor, Shader.TileMode.CLAMP);
            mPaint.setShader(mShader);
        }
        canvas.drawRect(0, getBounds().height() - mHeight, getBounds().width(),
                        getBounds().height(), mPaint);
    }

    @Override
    public void setAlpha(int alpha) {

    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {

    }

    @Override
    public int getOpacity() {
        return PixelFormat.OPAQUE;
    }
}

Я изначально пропустил наличие android:gravityпотому что это не упоминается на странице "Drawable Resources" .Это упоминается, однако, в документации LayerDrawable;

Answer 2

Почему возникает проблема: форма первого элемента нарисует градиент во всей области.После установки цвета для второго элемента будет скрываться область верхнего элемента, за исключением 2,5 дп внизу.Поэтому, когда вы устанавливаете прозрачный цвет для второго элемента, он автоматически показывает элемент верхнего уровня, который является областью градиента.

Здесь я предлагаю способ использования, но вы можете установить значение фиксированная высота в поле зрения.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="47dp">
<shape>
<gradient
    android:startColor="@color/colorPrimaryDark"
    android:endColor="#FFFFFFFF"
    android:centerY="0.5"
    android:angle="0"/>

</shape>
</item>

</layer-list>

View.xml

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/bottom_line">

</RelativeLayout>

Изменить размер в соответствии с вашими потребностями ..!

ВЫХОД