web-dev-qa-db-fra.com

Comment ajouter une bordure de couleur sur cardview?

Je suis nouveau sur Android et ceci est ma première question ici.

J'essaie d'ajouter une bordure verticale colorée au début de la vue de carte. Comment puis-je le réaliser sur XML? J'ai essayé de l'ajouter avec textview vide, mais cela gâche tout le cardview lui-même. S'il vous plaît vérifier le lien de l'image affichée ci-dessous par exemple.

Bordure colorée sur 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>

Merci beaucoup

androidxmlandroid-cardview
14
George Forster

essayez de faire:

<?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>

cela supprime le remplissage de la vue de la carte et ajoute un FrameLayout avec une couleur. Vous devez ensuite corriger le remplissage dans LinearLayout, puis pour les autres champs.

Mettre à jour  

Si vous souhaitez conserver le rayon du coin de la carte, créez card_Edge.xml dans un dossier pouvant être dessiné:

<?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>

et dans la disposition du cadre, utilisez Android:background="@drawable/card_Edge"

27
kandroidj

Je pense que cette solution n’est peut-être pas efficace, mais elle répond à cet objectif et ajoute de la souplesse à la largeur de la bordure.

 <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>
13
Amit

Je voudrais améliorer la solution proposée par Amit. J'utilise les ressources données sans ajouter shapes ou Views supplémentaire. Je donne à CardView une couleur d'arrière-plan, puis une mise en page imbriquée, la couleur blanche à surimprimer tout en conservant un 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>
1
Mirwise Khan

Depuis la mise à jour de la conception du matériel, il prend en charge app:strokeColor et aussi app:strokeWidth. voir plus

utiliser la mise à jour de la conception matérielle. ajouter le code suivant à build.gradle (: app)

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