Android ui with complex layout

Question

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

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

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

Answer 1

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 >

Answer 2

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 >