How do I move the image to the left and text alongside on the right?

Question

I am using a fragment in which I have a layout consisting on text on top(headline) and an image below it followed by another chunk of text below it. I want to make it such that the image goes to the left and the text including the headline and the rest goes to the right and once the image boundaries are over it starts from left, more so like wraps around like on a webpage( excuse me for my terrible explanation, hope i was able to put it well). Any clue how to rearrange my existing code or make changes to serve the purpose?

Thanks! Here's my code (the autoresizeimage is the image code):

 <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:foo="http://schemas.android.com/apk/res/com.cookie.halloween"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/login_background_gradient" >

        <ScrollView
            android:id="@+id/news_details_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" 
                android:padding="6dp ">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/background_article_body"
                    android:orientation="vertical"
                    android:paddingLeft="10dp"
                    android:paddingTop="@dimen/common_top_padding"
                    android:paddingRight="10dp"
                    android:paddingBottom="10dp" >

                    <com.cookie.halloween.utils.FontTextView
                        android:id="@+id/news_headline"
                        foo:customFont="Cabin-Medium.ttf"
                        android:textSize="18sp"
                        android:textColor="@color/article_headline"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content" />

                    <com.cookie.halloween.utils.FontTextView
                        android:id="@+id/news_timestamp_and_source"
                        foo:customFont="Roboto-Regular.ttf"
                        android:textSize="11sp"
                        android:textColor="@color/article_source"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                    <com.cookie.halloween.views.AutoResizeImageView
                        android:id="@+id/news_image"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="@dimen/common_top_padding"
                        android:layout_marginBottom="@dimen/common_bottom_padding" />

                    <com.cookie.halloween.views.LinkableTextView
                        android:id="@+id/news_body"
                        foo:customFont="Roboto-Regular.ttf"
                        android:textSize="13sp"
                        android:lineSpacingExtra="3dp"
                        android:textColor="@color/article_body"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/related_container"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="9dp"
                    android:background="@drawable/background_article_body"
                    android:orientation="vertical" >

                    <TextView
                        android:id="@+id/related_articles"
                        style="@style/related_buttons"
                        android:layout_width="match_parent"
                        android:layout_height="50dp"
                        android:contentDescription="@string/content_description_related_articles"
                        android:text="@string/content_description_related_articles" />

                    <View
                        android:id="@+id/related_divider"
                        android:layout_width="match_parent"
                        android:layout_height="1dp"
                        android:background="@color/related_divider"
                        android:layout_marginLeft="1dp"
                        android:layout_marginRight="1dp"
                        android:visibility="gone" />

                    <TextView
                        android:id="@+id/related_quotes"
                        style="@style/related_buttons"
                        android:layout_width="match_parent"
                        android:layout_height="50dp"
                        android:contentDescription="@string/content_description_related_quotes"
                        android:text="@string/content_description_related_quotes" />
                </LinearLayout>
            </LinearLayout>
        </ScrollView>

        <include layout="@layout/loading_no_results" />

    </FrameLayout>

@Justice it will be comfortable for us, if you provide a pictorial diagram for this — Akhilesh Sk, Nov 08 '13 at 06:38
How about this one? : http://stackoverflow.com/questions/13526949/how-to-fill-the-empty-spaces-with-content-below-the-image-in-android — M-Wajeeh, Nov 12 '13 at 06:17
@M-WaJeEh I added flowtextview jar to my project under libs and to build path, now how do i import it in my project? as in what do i call? com.cookie.flowtextview? not sure how to go about this — , Nov 13 '13 at 21:26
@JusticeBauer Usage is explained here http://stackoverflow.com/a/13527178/1112882 — M-Wajeeh, Nov 14 '13 at 06:20
I looked it up, however, what do I need to call in my mainactivity, I am not able to ,so confused. I tried setting it to r.id.tv giving the — , Nov 18 '13 at 20:39

Invader · Answer 1 · 2013-11-13T08:49:11.473

2

enter image description here @justice i understand what you need this and try this

flowtextview

its a jar file used for proper alignment of image and text view download from here flowtextview

FlowTextView textviewname = new com.pagesuite.flowtext.FlowTextView(
            context);

try using this

edited Nov 13 '13 at 08:49

answered Nov 13 '13 at 08:38

Invader

679
3
10

I added flowtextview jar to my project under libs and to build path, now how do i import it in my project? as in what do i call? com.cookie.flowtextview? not sure how to go about this – Nov 13 '13 at 16:42

score 1 · Answer 2 · answered Nov 12 '13 at 08:05

Its not much clear what you want, because I can't test it on my side due to some external layouts you used along with dimenstions and strings...

But I'm still trying to guess what you actuall wants to ask.

Like an image along with two text view on its right like this image...

enter image description here

Here is the source of this layout arangement...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- This is your news item -->
<LinearLayout
    android:id="@+id/news_item_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <ImageView
        android:id="@+id/news_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/image_description"
        android:src="@drawable/ic_launcher" />
    <LinearLayout
        android:id="@+id/news_text_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >
        <TextView
            android:id="@+id/news_headline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/your_headline_"
            android:textAppearance="?android:attr/textAppearanceLarge" />
        <TextView
            android:id="@+id/news_timestamp_and_source"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/your_text_here_"
            android:textAppearance="?android:attr/textAppearanceMedium" />
    </LinearLayout>
</LinearLayout>
<!-- Here you can put your other stuff -->
</LinearLayout>

Hope this helps you a bit...:)

score 1 · Answer 3 · edited May 23 '17 at 12:08

1

Since api 8 (Android 2.2) has a new interface LeadingMarginSpan2

Refer

How to align TextView around an ImageView?

How to make layout of an image and text left and under it?

example source code here

edited May 23 '17 at 12:08

Community

1
1

answered Nov 13 '13 at 16:07

SHASHIDHAR MANCHUKONDA

3,302
2
19
40

score 0 · Answer 4 · answered Nov 01 '13 at 04:14

0

use below property in textview for set image left side of textview.

android:drawableLeft="@drawable/YOURIMAGE"

answered Nov 01 '13 at 04:14

Arvind Kanjariya

2,089
1
18
23

score 0 · Answer 5 · answered Nov 07 '13 at 18:31

0

Use RelativeLayout for handler your LinearLayouts, if you want, replace all your linearlayouts, and use for textviews too.

answered Nov 07 '13 at 18:31

Pierry

979
7
17

score 0 · Answer 6 · answered Nov 12 '13 at 13:17

Since api 8 (Android 2.2) has a new interface LeadingMarginSpan2, which allows you to create text indent for the first N rows. In the image created by the indentation of 50 pixels for the first 3 rows.

Check out How to wrap text around a picture of text.

How do I move the image to the left and text alongside on the right?

6 Answers6