How do I achieve this specific design (expanding / weighted sub-view) in Android?

Question

This is what I'm trying to achieve:

However, I don't know how I can tell the left hand side view to grow to at least a minimum height, but also be as the right view. This is what I get when I set height to 'match_parent' and a 'minHeight':

As you can see for the first item the images view is cropped. When I use 'wrap_content', everything is shown from both right and left views, but I can't get the design I want (chart to be put at the bottom, with empty space between images):

What am I missing? This is the XML layout used for list items:

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/list_item_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="4dp">

        <LinearLayout
            android:id="@+id/list_item_left_layout"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:minHeight="98dp"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/avatar"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/avatar"/>

            <LinearLayout
                android:id="@+id/list_item_overlay_layout"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="bottom"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/chart"
                    android:layout_width="40dp"
                    android:layout_height="58dp"
                    android:src="@drawable/chart"/>

            </LinearLayout>

        </LinearLayout>

        <TextView
            android:id="@+id/item_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:maxLines="8"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"/>

    </LinearLayout>

</LinearLayout>

For adding "empty Space" in `LinearLayout`, I would recommend to add a simple, "empty" `View`-object with the required spacing attributes. Else, you could try to use the new [PercentRelativeLayout](http://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html) (if you want to have specific widths) or a `RelativeLayout` to improve performance and avoid nested layouts. — yennsarah, Dec 02 '15 at 07:52
Take a look at this: http://stackoverflow.com/questions/29956014/why-should-we-use-xml-layouts — Nanoc, Dec 02 '15 at 09:25

score 1 · Answer 1 · answered Dec 02 '15 at 08:53

You can use following code for your design.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
android:orientation="vertical">

<RelativeLayout
    android:id="@+id/list_item_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    android:orientation="horizontal"
    android:padding="4dp">

    <RelativeLayout

        android:id="@+id/relativeLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/list_item_left_layout"
        android:layout_toRightOf="@+id/list_item_left_layout"
        android:minHeight="98dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/item_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:maxLines="8"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:text="111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"
            android:textColor="@android:color/darker_gray" />


    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/list_item_left_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_alignBottom="@+id/relativeLayout"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/avatar"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_alignParentTop="true"
            android:src="@drawable/avatar" />


        <ImageView
            android:id="@+id/chart"
            android:layout_width="40dp"
            android:layout_height="58dp"
            android:layout_alignParentBottom="true"
            android:src="@drawable/common_signin_btn_icon_pressed_dark" />

    </RelativeLayout>


</RelativeLayout>


</LinearLayout>

Unfortunately this didn't work either. The left layout doesn't expand to the full available space (I used same image for both image views and a yellow background for more visibility): http://tinypic.com/r/dfca3m/9 — n0rm1e, Dec 02 '15 at 22:04
However, thanks for the tip. Setting min height on the right view might be the workaround until I find the solution. — n0rm1e, Dec 02 '15 at 22:07

score 0 · Answer 2 · answered Dec 02 '15 at 18:02

0

You can use Imageview.setTranslationX() or ImageView.setTranslationY() to move chart Imageview to new position.

Making a layout expandable is explained in this article from the blog. here[enter link description here][1]


  [1]: http://gmariotti.blogspot.in/2013/09/expand-and-collapse-animation.html

Hope it helps ..

answered Dec 02 '15 at 18:02

HourGlass

1,805
1
15
29

Thanks, but I am not looking for a code solution. It has to be simple enough to do with pure XML. – n0rm1e Dec 02 '15 at 22:16

score 0 · Answer 3 · answered Dec 02 '15 at 22:15

I found a trick, thanks to Mayur's answer. This is not the solution, but I can use it as a workaround until I find the right way.

Calculate the minimum height of the left view, and set the minHeight of the right view to it. As a result, if the text in the right hand side is so small it will still use a minimum amount of height.
Set the height of the left layout to match_parent. Now this view will expand to fill all the available space if the right view grows to provide room for bigger text.

This is how it will look like:

And here is the code changes I had to make:

$ diff -U 5 list_item_layout_original.xml list_item_layout.xml 
--- list_item_layout_original.xml   2015-12-03 09:13:35.000000000 +1100
+++ list_item_layout.xml    2015-12-03 09:11:42.000000000 +1100
@@ -45,10 +45,11 @@
         <TextView
             android:id="@+id/item_text"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
+            android:minHeight="98dp"
             android:maxLines="8"
             android:paddingLeft="8dp"
             android:paddingRight="8dp"/>

     </LinearLayout>

How do I achieve this specific design (expanding / weighted sub-view) in Android?

3 Answers3