Align imageView and textView (and overflow text with border)

Question

I had saw many ways to align a textview with an imageview, but I didn´t find how to make when the text is bigger than the image, and when you want that text occupy all the parent layout. My layout is this:

<RelativeLayout
    android:id="@+id/accordion_toogle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:visibility="gone">
    <ImageView
        android:id="@+id/accordion_image"
        android:layout_width="@dimen/accor_img_wid"
        android:layout_height="@dimen/accor_img_hei" />

    <TextView
        android:id="@+id/accordion_msg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/accordion_image"
        android:paddingLeft="5dp"/>
</RelativeLayout>

In this case, assuming that the image occupy the half of the RelativeLayout, the accordion_msg continues to occupy the half of the relativeLayout once the imageView finish.

Do you understand me?? Have I expressed well?? Any suggestion??

Thank you.

EDIT A picture to help what I try to do: the desired design

The pink square is the picture, the purple and white rectangles are where the text must to be, but until now, the purple is empty. The text only occupy the white square.

EDIT 2

I am trying what @Elltz says... but I cannot make what I want, I have this code:

draw.setBounds(0, 0, width, height); //width: 128 height: 172 in this case
textview.setCompoundDrawablesRelative(draw, null, null, null);

But no image is shown, I try other many things, like:

textview.setCompoundDrawablesRelative(null, draw, null, null);

And the image stays on the top of the text. Other diferent this I tried was:

textview.setCompoundDrawables(draw, null, null, null);

And the image is on the left... but it is vertically align at center, and top and bottom of image are blank (no text, no picture... no nothing). I try changing the parent to LinearLayout, using gravity left, gravity top, RelativeLayout...

Oooppsss!!! now the layout is this:

<RelativeLayout
    android:id="@+id/accordion_toogle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="gone">
    <TextView
        android:id="@+id/accordion_msg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/accordion_image"
        android:paddingLeft="5dp"/>
</RelativeLayout>

*The visibility gone on the parent is not important, I change it programmatically.

Thank you.

I'm afraid this is confusing. If you could add images of what you are getting and what you want it would help quite a bit. — codeMagic, Feb 19 '15 at 01:22
Myself to have such control I prefer to use LinearLayouts instead and set Gravity property on the parent layout so that children conform. — J.Vassallo, Feb 19 '15 at 01:55

score 0 · Accepted Answer · edited May 23 '17 at 11:43

Ok... after a hard job of experimentation, searching-> attempting-> failing-> searching-> attempting-> failing-> searching-> attempting-> success ;) In this stack question @K_Anas gives the solution... I will type what I do for the next case on this situation (Furthermore, it is possible process a link on the text, resolving it with Html.fromHtml and preserving the link property after the SpannableString):

The Layout

 <RelativeLayout
    android:id="@+id/accordion_toogle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="6dp"
    android:visibility="gone"
    android:gravity="top">

    <ImageView
        android:id="@+id/accordion_image"
        android:layout_width="@dimen/img_width"
        android:layout_height="@dimen/img_height"
        android:src="@drawable/default_image"/>
    <TextView
        android:id="@+id/accordion_msg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"/>
</RelativeLayout>

The Java code

final TextView msgView = (TextView)view_aux.findViewById(R.id.accordion_msg);
String msg_text = dbStructure.getMsg();
if(msg_text.contains("href=\"")) {
    String[] msg_aux = msg_text.split("href=\"");
    if (!msg_aux[1].toLowerCase().startsWith("http"))
        msg_aux[1] = "http://" + msg_aux[1];
    msg_text = msg_aux[0] + "\"href=\"" + msg_aux[1];
}

msgView.setText(Html.fromHtml(msg_text));
msgView.setMovementMethod(LinkMovementMethod.getInstance());

int lines = (int)Math.round(height / msgView.getLineHeight());
SpannableString ss = new SpannableString(msgView.getText());
ss.setSpan(new MyLeadingMarginSpan2(lines, width+10), 0, ss.length(), 0);

msgView.setText(ss);

In this case the width and height are the meassures of the ImageView.

Align imageView and textView (and overflow text with border)

1 Answers1