Wednesday, June 19, 2013

Google Now Card : XML Layout


As we can see the Google Now card is a refreshing UI to represent content with Image, text and link , so I have stolen many thing from various resources like github and here is the card finall  UI






cards_ui_layout.xml 

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dip"
    android:background="@drawable/card_background"
    android:padding="10dip" >

    <TextView
        android:id="@+id/text_head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_margin="5dip"
        android:text="@string/heading"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/text_desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/text_head"
        android:layout_margin="5dip"
        android:ellipsize="end"
        android:maxLines="5"
        android:text="@string/lorem"
        android:textSize="14sp" />

    <LinearLayout
        android:id="@+id/seperator"
        android:layout_width="fill_parent"
        android:layout_height="1dip"
        android:layout_below="@+id/text_desc"
        android:background="#C7C7C7" >
    </LinearLayout>

    <TextView
        android:id="@+id/explore_more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/seperator"
        android:layout_marginBottom="20dip"
        android:layout_marginLeft="30dip"
        android:layout_marginRight="5dip"
        android:layout_marginTop="5dip"
        android:text="@string/explore"
        android:textColor="#ff0099cc"
        android:textSize="16sp" >
    </TextView>

    <ImageView
        android:layout_width="22dip"
        android:layout_height="22dip"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/seperator"
        android:layout_marginBottom="5dip"
        android:layout_marginLeft="2dip"
        android:layout_marginRight="5dip"
        android:layout_marginTop="5dip"
        android:src="@drawable/location_web_site" />

</RelativeLayout>


Two Images that i have used


 
 

No comments:

Post a Comment