CODEWITHSUNDEEP
androidandroid-layoutandroid-fragmentsandroid-linearlayout
user2386226
user2386226

Reputation:

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

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>

Upvotes: 1

Views: 1434

Answers (6)

SHASHIDHAR MANCHUKONDA
SHASHIDHAR MANCHUKONDA

Reputation: 3322

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

Upvotes: 1

Invader
Invader

Reputation: 679

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

Upvotes: 2

GrIsHu
GrIsHu

Reputation: 23638

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.

Upvotes: 0

umair.ali
umair.ali

Reputation: 2714

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...:)

Upvotes: 1

Pierry
Pierry

Reputation: 989

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

Upvotes: 0

Arvind Kanjariya
Arvind Kanjariya

Reputation: 2097

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

android:drawableLeft="@drawable/YOURIMAGE"

Upvotes: 0

Related Questions