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>

2 comments:

  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
  2. Great information....i am looking forward for your next topics..i am learning a lot hereCinema App

    ReplyDelete