Search code examples
androidandroid-layoutandroid-linearlayouttextviewandroid-relativelayout

increase the length of layout with increase in size of text(multi-line)


This is the layout preview i get with the followed code

I want to increase the height of green line with increase in size of aa length of aa(suppose aa is of multiline around 7 line, then the green line should automatically gets increased), i had tried my effort but failed, and now i have no more idea to achieve the above mentioned, following is my xml for the above mentioned layout,

//My root layout, which/who contain all the two child layouts(relative and linear layout)
<RelativeLayout android:layout_width="match_parent"
                android:layout_height="wrap_content">

   //Layout for image and line, here i want to increase the height of "profile_view_line(green line)" with increase in size of text "profile_tv_descriptionName"
    <RelativeLayout android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/profile_layout_relDescription">

        //This is the imageview,whose background is tranparent, so if i remove "layout below " property from "profile_view_line", then "profile_view_line" 
        //appear behind imageview(profile_img_description),which must/should not happen, but here i fail as well (as i don't want to appear this behind imageview)
        <ImageView android:id="@+id/profile_img_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/description_icon"
            android:layout_alignParentLeft="true"/>

            //This is the line to be expanded with increase in size of "profile_tv_descriptionName" but with minimum size of 30dp as height 
            //and must grow with the "profile_tv_descriptionName" if (profile_tv_descriptionName) is multi-line

            //i can't set property depending on "profile_tv_descriptionName"
            as it is in another viewgroup(relativeayout), due to which i can't set property on this one
        <View android:layout_below="@id/profile_img_description"
            android:layout_width="@dimen/1dp"
            android:id="@+id/profile_view_line"
            android:layout_height="@dimen/30dp"
            android:background="@color/colorGreen"
            android:layout_centerHorizontal="true" />
     </RelativeLayout>

     //Layout for description title and description text "aa" which exapnds as expected, here the dependincy is based on above maintained relative layout "profile_layout_relDescription"
    <LinearLayout android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_toRightOf="@id/profile_layout_relDescription"
                android:layout_alignBottom="@id/profile_layout_relDescription">

        //This is the title, useless in this case but need for appearance
        <TextView
            android:id="@+id/profile_tv_description"
            android:text="@string/profile_description"
            android:textSize="@dimen/8dp"
            android:gravity="left"/>

         //this is the dependency factor which can increase and according to which "profile_view_line" green line must expand but i can't do 
         //that because it is in another viewgroup(linearlayout), due to which i can't set property on this one
        <TextView
            android:layout_height="wrap_content"
            android:id="@+id/profile_tv_descriptionName"
            android:text="Vikram"
            android:textSize="@dimen/13dp"
            android:gravity="left"/>
      </LinearLayout>
</RelativeLayout>

Solution

  • Try a layout like this:

    <LinearLayout, horizontal>
        <LinearLayout, vertical, width wrap_content, height match_parent, gravity center_horizontal>
            <ImageView set width, set height>
            <View, greeen line, height 0, weight 1>
        </LinearLayout>
        <LinearLayout, vertical, width 0, height wrap_content, weight 1>
            <TextView title, wrap_content>
            <TextView description, wrap_content>
        </LinearLayout>
    </LinearLayout>
    

    Explanation:

    You need 4 things in a square:

    AB
    CD
    

    where A is the image, B is the title, C is the line, and D is the text.

    B and D need to be aligned vertically with each other, and next to A and C, so that says to me that each of those pairs should be in a vertical linear layout, and then those two should be aligned in a horizontal one to line them up.

    A and C together have the width that A has, but the other two need to take up the remaining space. That means width of 0, and weight 1.

    Now we have:

    A B----------------------
    C D----------------------
    

    Now we need to deal with height. A has a fixed height. B and D have a fixed height, defined by the text in them. That leaves C as having a variable height, taking up the rest of the space. So we say that AC has height matching the parent, which is then defined by the height of BD. Then C has a height 0 and weight 1, making it fill all the remaining height. This gives us:

    A B----------------------
    C D----------------------
    - -----------------------