How to add header and image in CardView Material Design

NewImage

 

Cardview is a new addition in Material Design. It is best way to display data and a good alternative to a list view. You can add the Cardview code in the xml layout.  Here is the code to add Header in the cardview or add a image and align to the left.

 



<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:cardElevation="8dp"
card_view:cardCornerRadius="2dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<LinearLayout
android:id="@+id/heading_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#009688"
android:padding="5dp"
android:orientation="vertical">



<TextView
android:id="@+id/tv_subheading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_below="@+id/tv_heading"
android:text="Header"
android:textColor="#80CBC4"
android:textSize="24sp" />

</LinearLayout>


<TextView
android:id="@+id/tv_footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_below="@+id/tv_heading"
android:text="CardView"
android:textColor="#9E9E9E"
android:textStyle="bold"
android:textSize="24sp" />

</LinearLayout>
</android.support.v7.widget.CardView>





<android.support.v7.widget.CardView
android:id="@+id/card_view"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#FFFFFF"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="true">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>

<ImageView
android:id="@+id/imageView"
android:tag="image_tag"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:src="@drawable/ic_launcher"/>

<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:layout_weight="2"
android:orientation="vertical"
>

<TextView
android:id="@+id/textViewName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:text="Android Name"
android:textAppearance="?android:attr/textAppearanceLarge"/>

<TextView
android:id="@+id/textViewVersion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"

android:text="Android Version"
android:textAppearance="?android:attr/textAppearanceMedium"/>

</LinearLayout>
</LinearLayout>

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

1 comment:

  1. Greate pieces. Keep posting such kind of information on your site. Im really impressed by your site.
    Hello there, You have performed a great job. I'll definitely digg it and personally recommend to my friends. I'm sure they'll be benefited from this website. paypal login my account

    ReplyDelete