I'm trying to make the following 'card' layout which shows how an image and everything contained in a layout is set in to a fixed height, which mimics a real life horizontal card.
What I have made so far:
The following XML is the single grid item I inflate in to a GridView adapter; which is ONE of the above mentioned 'cards'.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginLeft="@dimen/feed_item_margin"
android:layout_marginRight="@dimen/feed_item_margin"
android:background="@drawable/bg_card"
android:orientation="vertical"
android:paddingBottom="@dimen/feed_item_padding_top_bottom"
android:paddingTop="@dimen/feed_item_padding_top_bottom" >
<ImageView
android:id="@+id/grid_banner"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:background="@drawable/ic_launcher"/>
<TextView
android:id="@+id/bannerTitle"
android:layout_width="285dp"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/grid_image"
android:layout_alignLeft="@id/grid_image"
android:layout_alignRight="@id/grid_image"
android:layout_alignTop="@id/grid_image"
android:layout_marginLeft="15sp"
android:layout_marginTop="300sp"
android:shadowColor="#000000"
android:shadowDx="1.0"
android:shadowDy="1.0"
android:shadowRadius="5.0"
android:textColor="#FFFFFF"
android:textSize="25sp" />
</LinearLayout>
</LinearLayout>
I understand that I can set a fixed value for the root LinearLayout but would that affect when viewed through different mobile devices? As in, 50dp could look small on a tablet? Am I wrong?
You have four elements to show for one card
Because title and description overlapping the image at some points so, I would suggest you to use RelativeLayout
and also set
the height of the card at runtime depending on the screen width of the device so that it looks similar on all devices.
Use Values folder for different type of devices and set the size in dp from there.