Android ui with complex layout

Question

I am trying to achieve the following complex layout in my android app but with no luck enter image description here

for that i have wrote the following layout xml:

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    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"
    android:layout_margin="6dp"
    card_view:cardCornerRadius="2dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_margin="8dip"
        android:layout_toRightOf="@+id/list_item_title">

            <ImageView
                android:layout_weight="0.6"
                android:id="@+id/list_item_image"
                android:layout_width="90dp"
                android:layout_height="72.0dip"
                android:contentDescription="@string/app_name"
                android:scaleType="centerCrop" />

        <LinearLayout
            android:layout_weight="0.6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:id="@+id/linearLayout">
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingRight="8dp"
                android:paddingLeft="8dp"
                android:layout_alignParentTop="true"
                android:layout_above="@+id/list_item_title" >
                <ImageView
                    android:id="@+id/feedIcon"
                    android:layout_width="16dp"
                    android:layout_height="16dp"
                    android:src="@drawable/cnn"
                    android:layout_alignParentLeft="true"
                    android:layout_centerHorizontal="true" />
                <TextView
                    android:id="@+id/feedName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@+id/feedIcon"
                    android:text="CNN International"
                    android:layout_centerHorizontal="true"
                    android:textSize="@dimen/abc_text_size_caption_material"
                    android:paddingLeft="4dp" />
                <ImageButton
                    android:id="@+id/btnOverFlow"
                    android:layout_width="16dp"
                    android:layout_height="16dp"
                    android:background="@drawable/btn_feed_action"
                    android:src="@drawable/ic_more_grey"
                    android:layout_alignParentRight="true"
                    android:paddingRight="4dp"
                    android:paddingLeft="8dp" />
                <ImageView
                    android:id="@+id/timeIcon"
                    android:layout_width="16dp"
                    android:layout_height="16dp"
                    android:src="@drawable/time"
                    android:layout_toLeftOf="@+id/timeStamp"
                    android:paddingLeft="4dp" />
                <TextView
                    android:id="@+id/timeStamp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toLeftOf="@+id/btnOverFlow"
                    android:text="Yesterday"
                    android:layout_centerHorizontal="true"
                    android:textSize="@dimen/abc_text_size_caption_material"
                    android:paddingLeft="4dp" />
            </RelativeLayout>
            <TextView
                android:id="@+id/list_item_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginLeft="8.0dip"
                android:text="Why women's watches are having a moment"
                android:ellipsize="end"
                android:maxLines="3"
                android:minLines="1"
                android:textIsSelectable="false"
                android:textSize="@dimen/abc_text_size_subhead_material"
                android:paddingTop="4dp" />
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="4dp"
                android:layout_below="@+id/list_item_title">
                <ImageButton
                    android:id="@+id/btnComments"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:padding="6dp"
                    android:background="@drawable/btn_feed_action"
                    android:src="@drawable/ic_comment_outline_grey"
                    />
                <ImageButton
                    android:id="@+id/btnLike"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:padding="6dp"
                    android:layout_toRightOf="@+id/btnComments"
                    android:background="@drawable/btn_feed_action"
                    android:src="@drawable/ic_heart_outline_grey"
                    android:layout_centerHorizontal="true" />
            </RelativeLayout>
        </LinearLayout>
    </LinearLayout>
</android.support.v7.widget.CardView >

the top most Relative layout that contains feed source icon, feed source name, timestamp and ovweflow icon is not appearing at all either in xml editor design mode nor during my app run time. Moreover, i feel my code is not provisionally written.

UPDATE: - I have followed the solution given by r7v , i got the following layout which is fine but still have problem with post image as it has to shrink to the size similar to the red box shown on the screenshot enter image description here

Also, i think the layout padding , margins as not as material design standards

Can you please help me on how achieve layout similar as in the attached image?

Thank You

rahul.ramanujam · Answer 1 · 2015-06-10T18:53:21.997

check this out cardview

 -- linearlayout (horizontal) 
         --- imageview (height match parent , weight 0.4 )
         ---- Linear layout (weight 0.6 , orientation vertical)
              ------ <relative layout>
              ------- textview
              ------- relative layout

xml layout :

<?xml version="1.0" encoding="utf-8"?><!-- item_feed.xml --> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        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_margin="8dp"
        card_view:cardCornerRadius="2dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:layout_height="match_parent">

            <ImageView
                android:layout_weight="0.4"
                android:id="@+id/list_item_image"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:contentDescription="@string/app_name"
                android:scaleType="centerCrop" />

            <LinearLayout
                android:layout_weight="0.6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:id="@+id/linearLayout">
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="8dp"
                    android:paddingRight="8dp"
                    android:layout_alignParentTop="true"
                    android:layout_above="@+id/list_item_title" >
                    <ImageView
                        android:id="@+id/feedIcon"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:src="@drawable/ic_search_grey" />
                    <TextView
                        android:id="@+id/feedName"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:layout_toRightOf="@+id/feedIcon"
                        android:text="CNN International"
                        android:layout_centerHorizontal="true" />
                    <ImageButton
                        android:id="@+id/btnOverFlow"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:src="@drawable/ic_search_grey" />
                    <ImageView
                        android:id="@+id/timeIcon"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:src="@drawable/ic_search_grey" />
                    <TextView
                        android:id="@+id/timeStamp"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:layout_toRightOf="@+id/feedIcon"
                        android:text="Yesterday"
                        android:layout_centerHorizontal="true" />
                </RelativeLayout>
                <TextView
                    android:id="@+id/list_item_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_marginLeft="8.0dip"
                    android:text="Why women's watches are having a moment"
                    android:ellipsize="end"
                    android:maxLines="3"
                    android:minLines="2"
                    android:textIsSelectable="false"/>
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="8dp"
                    android:paddingRight="8dp"
                    android:layout_below="@+id/list_item_title">
                    <ImageButton
                        android:id="@+id/btnComments"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:src="@drawable/ic_search_grey" />
                    <ImageButton
                        android:id="@+id/btnLike"
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:layout_toRightOf="@+id/btnComments"
                        android:src="@drawable/ic_search_grey"
                        android:layout_centerHorizontal="true" />
                </RelativeLayout>
            </LinearLayout>
        </LinearLayout>

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

Thanks for your answer. but still have problem with the imageView (in the left) it has to fill the left part of the card just similar to the sketch above — Fshamri, Jun 09 '15 at 21:19
I have updated the answer , how is the view being displayed now — rahul.ramanujam, Jun 09 '15 at 21:21
I have attached a screenshot for the view i have got. still have problem in the post image as it has to shrink to the size similar to the red box shown on the screenshot. also i think the layout padding , margins as not as material design standards — Fshamri, Jun 10 '15 at 18:49
the imageview has fixed width and height , change height to matchparent and width to wrap content and try — rahul.ramanujam, Jun 10 '15 at 18:52
I know that will fix the problem only if i know that the image size is fit otherwise images will be shown on their original size, but what if i don't know the image size in advance and want to scale down to 90dp * 72dp? is there any solution? — Fshamri, Jun 11 '15 at 17:03
use one of the scale types to scale your image https://developer.android.com/reference/android/widget/ImageView.ScaleType.html — rahul.ramanujam, Jun 11 '15 at 17:09
also , check this out http://stackoverflow.com/questions/2521959/how-to-scale-an-image-in-imageview-to-keep-the-aspect-ratio — rahul.ramanujam, Jun 11 '15 at 17:10

score 0 · Answer 2 · answered Jun 10 '15 at 19:18

I havent worked with card view, but i assume you can stick a RelativeLayout inside a card view, and the following XML layout should work.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:layout_width="90dp"
    android:layout_height="72.0dp"
    android:id="@+id/imageView2"
    android:src="@drawable/ic_launcher"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<ImageView
    android:layout_width="16dp"
    android:layout_height="16dp"
    android:src="@drawable/ic_launcher"
    android:id="@+id/imageButton2"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@+id/imageView2" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Text"
    android:id="@+id/textView3"
    android:layout_alignBottom="@+id/imageButton2"
    android:layout_toRightOf="@+id/imageButton2"
    android:layout_toEndOf="@+id/imageButton2" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Thing1"
    android:ellipsize="end"
    android:maxLines="3"
    android:minLines="1"
    android:textIsSelectable="false"
    android:textSize="@dimen/abc_text_size_subhead_material"
    android:paddingTop="4dp"
    android:layout_below="@+id/imageButton2"
    android:layout_toRightOf="@+id/imageView2"
    android:layout_toEndOf="@+id/imageView2"
    android:id="@+id/" />

<ImageButton
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:id="@+id/imageButton3"
    android:src="@drawable/ic_launcher"
    android:layout_alignBottom="@+id/imageView2"
    android:layout_toRightOf="@+id/imageView2"
    android:layout_toEndOf="@+id/imageView2" />

<ImageButton
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:id="@+id/imageButton4"
    android:src="@drawable/ic_launcher"
    android:layout_alignBottom="@+id/imageButton3"
    android:layout_alignLeft="@+id/textView3"
    android:layout_alignStart="@+id/textView3" />

<ImageButton
    android:layout_width="16dp"
    android:layout_height="16dp"
    android:id="@+id/imageButton5"
    android:src="@drawable/ic_launcher"
    android:layout_alignParentTop="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Text"
    android:id="@+id/textView6"
    android:layout_alignBottom="@+id/imageButton5"
    android:layout_toLeftOf="@+id/imageButton5"
    android:layout_toStartOf="@+id/imageButton5" />
</RelativeLayout >

enter image description here

Android ui with complex layout

2 Answers2