2016-02-12 641 views
8

私はAndroidが初めてで、これが私の最初の質問です。cardviewに色付きの枠線を追加するにはどうすればよいですか?

私は、カードビューの冒頭にカラーの垂直ボーダーを追加しようとしています。どうすればxmlでそれを達成できますか?私は空のtextviewでそれを追加しようとしましたが、それはcardview全体を台無しにしています。例えば下記の画像リンクを確認してください。

Colored Border on 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> 

感謝

+0

ここでカードビューを使用する必要がありますか?あなたのリサイクラビューにItemDecorationを追加するだけではどうでしょうか? –

+0

私はAndroidの初心者です。私のcurentスキルのために、recyclerviewは少し進んでいます。だから、私はここでcardviewを使用しています。 –

+0

大丈夫、あなたのために解決策を投稿しました –

答えて

15

やってみてください。これはcardviewからパディングを削除してでframeLayoutを追加

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

列または。その後、他のフィールド

更新のために、その後のLinearLayoutでパディングを修正する必要が

あなたはカードのコーナー半径が描画可能なフォルダに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"

+0

@GeorgeForsterは、カードコーナーを保存するためにドロアブルバックグラウンドを使用するように更新しましたが、まだそれらを持っていたい場合は –

+0

が私のために働きませんでした。なぜフレームレイアウトの4 dp幅ですか? –

13

このソリューションは効率的ではないかもしれませんが、目的に合っており、境界線の幅に柔軟性があると思います。

<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> 
+4

これは悪い解決策です。ビューの階層レベルを追加していますが、これにはパフォーマンス上のペナルティがあります。 – Sadegh

+0

はい、それは私からのちょうど怠け者の解決策だったことに同意します。 – Amit

+0

利用可能な内部機能があることをお勧めします – Sam