Android LinearLayoutグラデーション背景


246

LinearLayoutにグラデーション背景を適用できません。

これは私が読んだことから比較的簡単なはずですが、うまくいかないようです。参考のために、私は2.1-update1で開発しています。

header_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:startColor="#FFFF0000"
        android:endColor="#FF00FF00"
        android:type="linear"/>
</shape>

main_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:orientation="horizontal"
    android:background="@drawable/header_bg">
</LinearLayout>

@ drawable / header_bgを色に変更すると、たとえば#FF0000で問題なく動作します。ここに明らかな何かが欠けていますか?


android:backgroundTint android:backgroundTintMode stackoverflow.com/a/43341289/3209132
Pramod Garg

回答:


406

さて、セレクタを使用してこれを解決することができました。以下のコードを参照してください:

main_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:orientation="horizontal"
    android:background="@drawable/main_header_selector">
</LinearLayout>

main_header_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape>
        <gradient
            android:angle="90"
            android:startColor="#FFFF0000"
            android:endColor="#FF00FF00"
            android:type="linear" />
    </shape>
</item>
</selector>

うまくいけば、これは同じ問題を抱えている誰かを助けるでしょう。


5
すごい。FYI、他のグラデーションの種類を参照してください。developer.android.com/reference/android/graphics/drawable/...
Bamaco

86

3番目の色(中央)にすることもできます。そして、さまざまな種類の形。

たとえば、drawable / gradient.xmlの場合:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#000000"
        android:centerColor="#5b5b5b"
        android:endColor="#000000"
        android:angle="0" />
</shape>

これにより、黒-グレー-黒(左から右)が得られます。これは、私のお気に入りの暗い背景のATMです。

レイアウトxmlの背景としてgradient.xmlを追加することを忘れないでください。

android:background="@drawable/gradient"

以下を使用して回転することもできます。

angle = "0"

垂直線を与えます

angle = "90"

水平線を与えます

可能な角度は次のとおりです。

0、90、180、270。

また、いくつかの異なる種類の形状があります。

android:shape = "rectangle"

丸みのある形状:

android:shape = "oval"

そしておそらくもう少し。

よろしくお願いいたします。


40

XML Drawableファイル:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:angle="90"
                android:endColor="#9b0493"
                android:startColor="#38068f"
                android:type="linear" />
        </shape>
    </item>
</selector>

レイアウトファイル:android:background = "@ drawable / gradient_background"

  <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gradient_background"
        android:orientation="vertical"
        android:padding="20dp">
        .....

</LinearLayout>

ここに画像の説明を入力してください


こんにちは、どのようにして透明なステータスバーを実現しましたか?styles.xmlで透明に設定すると、黒になります..
kironet

21

android:gradientRadius = "90"を削除してみてください。ここに私のために働くものがあります:

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
>
    <gradient
        android:startColor="@color/purple"
        android:endColor="@color/pink"
        android:angle="270" />
</shape>

残念ながらそれは私のために働いていません。元の質問を現在の質問で更新しました。
創世記

レイアウトにウィジェットを追加してもまだ機能しません(たとえば、TextViewですか?)
Vincent Mimoun-Prat '12

正解-レイアウト内のTextViewではまだ機能しません。繰り返しますが、ドローアブルではなくスタティックカラーを適用すると、うまく機能します。私が気づいたことの1つは、セレクターを使用して(時々)機能させることができることですが、私の理解からはそれは必要ではありません。
ジェネシス

6

私の問題は、新しく作成されたXMLファイルのファイル名に.xml拡張子が追加されなかったことでした。.xml拡張子を追加すると問題が解決しました。


3

Kotlinを使用すると、2行でそれを行うことができます

配列の色の値を変更する

                  val gradientDrawable = GradientDrawable(
                        GradientDrawable.Orientation.TOP_BOTTOM,
                        intArrayOf(Color.parseColor("#008000"),
                                   Color.parseColor("#ADFF2F"))
                    );
                    gradientDrawable.cornerRadius = 0f;

                   //Set Gradient
                   linearLayout.setBackground(gradientDrawable);

結果

ここに画像の説明を入力してください


1

これが誰かに役立つかどうかはわかりませんが、私の問題は、グラデーションを次のようにImageViewの「src」プロパティに設定しようとしていたことでした:

<ImageView 
    android:id="@+id/imgToast"
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    android:src="@drawable/toast_bg"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"/>

それがうまくいかなかった理由は100%わかりませんが、今度は変更して、DrawableをImageViewの親の "background"プロパティに入れます。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/custom_toast_layout_id"
    android:layout_height="match_parent"
    android:background="@drawable/toast_bg">

0

グラデーションカラーでアルファチャンネルをチェックします。私の場合、コードをテストしていたときに、色のアルファチャネルが正しく設定されていなかったため、機能しませんでした。アルファチャネルセットを取得したら、すべてうまくいきました!


0

そのためにカスタムビューを使用できます。このソリューションにより、プロジェクト内のすべての色のグラデーション形状が完成しました。

class GradientView(context: Context, attrs: AttributeSet) : View(context, attrs) {

    // Properties
    private val paint: Paint = Paint()
    private val rect = Rect()

    //region Attributes
    var start: Int = Color.WHITE
    var end: Int = Color.WHITE
    //endregion

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        // Update Size
        val usableWidth = width - (paddingLeft + paddingRight)
        val usableHeight = height - (paddingTop + paddingBottom)
        rect.right = usableWidth
        rect.bottom = usableHeight
        // Update Color
        paint.shader = LinearGradient(0f, 0f, width.toFloat(), 0f,
                start, end, Shader.TileMode.CLAMP)
        // ReDraw
        invalidate()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawRect(rect, paint)
    }

}

このカスタムビューを使用して、オープンソースプロジェクトのGradientViewも作成します。

https://github.com/lopspower/GradientView

implementation 'com.mikhaellopez:gradientview:1.1.0'

面白いですね。これは、以降のバージョンのAndroidで機能しますか?他の回答は非推奨となったため、他の回答に問題がありました:issuetracker.google.com/issues/37114374
trees_are_great
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.