web-dev-qa-db-ja.com

カードビューに色付きの境界線を追加する方法は？

私はAndroidが初めてで、これがここでの最初の質問です。

カードビューの先頭に色付きの垂直ボーダーを追加しようとしています。 xmlでどのように達成できますか？空のテキストビューで追加しようとしましたが、カードビュー全体が台無しになっています。たとえば、下に掲載されている写真のリンクを確認してください。

Cardviewの色付きボーダー

activity_main.xml

<Android.support.v7.widget.CardView
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    card_view:contentPadding="16dp"
    card_view:cardElevation="2dp"
    card_view:cardCornerRadius="5dp">

    <LinearLayout
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:orientation="vertical">

        <TextView
            style="@style/Base.TextAppearance.AppCompat.Headline"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:text="Title" />

        <TextView
            style="@style/Base.TextAppearance.AppCompat.Body1"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:text="Content here" />

    </LinearLayout>

</Android.support.v7.widget.CardView>

どうもありがとう

androidxmlandroid-cardview
27
George Forster

やってみてください：

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.CardView xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    xmlns:card_view="http://schemas.Android.com/apk/res-auto"
    card_view:cardElevation="2dp"
    card_view:cardCornerRadius="5dp">

    <FrameLayout
        Android:background="#FF0000"
        Android:layout_width="4dp"
        Android:layout_height="match_parent"/>

    <LinearLayout
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:padding="16dp"
        Android:orientation="vertical">

        <TextView
            style="@style/Base.TextAppearance.AppCompat.Headline"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:text="Title" />

        <TextView
            style="@style/Base.TextAppearance.AppCompat.Body1"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:text="Content here" />

    </LinearLayout>

</Android.support.v7.widget.CardView>

これにより、カードビューからパディングが削除され、色付きのFrameLayoutが追加されます。次に、LinearLayoutのパディングを修正してから、他のフィールドを修正する必要があります

更新

カードコーナーの半径を保持する場合は、drawableフォルダーにcard_Edge.xmlを作成します。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <solid Android:color="#F00" />
    <size Android:width="10dp"/>
    <padding Android:bottom="0dp" Android:left="0dp" Android:right="0dp" Android:top="0dp"/>
    <corners Android:topLeftRadius="5dp" Android:bottomLeftRadius="5dp"
        Android:topRightRadius="0.1dp" Android:bottomRightRadius="0.1dp"/>
</shape>

フレームレイアウトではAndroid:background="@drawable/card_Edge"を使用します

29
kandroidj

開始材料設計の更新から、app:strokeColorおよびapp:strokeWidthもサポートします。 詳細

材料設計の更新を使用します。次のコードをbuild.gradle（：app）に追加します

dependencies {
    // ...
    implementation 'com.google.Android.material:material:1.0.0'
    // ...
  }
45
Aung Myo Lwin

このソリューションは効率的ではないかもしれませんが、目的に役立ち、境界線の幅に柔軟性を追加します。

 <Android.support.v7.widget.CardView
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_margin="40dp"
    Android:layout_gravity="center"
    card_view:cardBackgroundColor="@color/some_color"
    card_view:cardCornerRadius="20dp"
    card_view:contentPadding="5dp"> <!-- Change it to customize the border width -->

    <Android.support.v7.widget.CardView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_gravity="center"
        card_view:cardCornerRadius="20dp"
        card_view:contentPadding="5dp">

        <RelativeLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">

         <!-- Add your UI elements -->

        </RelativeLayout>
    </Android.support.v7.widget.CardView>
</Android.support.v7.widget.CardView>
12
Amit

Amitが提案したソリューションを改善したいと思います。 shapesまたはViewsを追加せずに、指定されたリソースを利用しています。 CardViewに背景色を指定してから、入れ子になったレイアウト、白い色をオーバープリントしますが、いくつかのleftMargin...

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.CardView 
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    xmlns:card_view="http://schemas.Android.com/apk/res-auto"
    card_view:cardElevation="2dp"
    card_view:cardBackgroundColor="@color/some_color"
    card_view:cardCornerRadius="5dp">


    <!-- The left margin decides the width of the border -->

    <LinearLayout
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:padding="16dp"
        Android:layout_marginLeft="5dp"
        Android:background="#fff"
        Android:orientation="vertical">

        <TextView
            style="@style/Base.TextAppearance.AppCompat.Headline"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:text="Title" />

        <TextView
            style="@style/Base.TextAppearance.AppCompat.Body1"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:text="Content here" />

    </LinearLayout>

</Android.support.v7.widget.CardView>
0
Mirwise Khan