CODEWITHSUNDEEP
androidtextview
AndroidLove
AndroidLove

Reputation: 123

Title in textview with image

I have a textview defined follows:

 <TextView
    android:id="@+id/message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textSize="16dp"
    android:textStyle="bold"
    android:textColor="#000000"
    android:gravity="center"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="27dp"
    android:background="@drawable/text_pop_up"
    android:clickable="true"
    android:onClick="onClick" />

My ultimate goal is to divide this textview into two. Top part with a title (just a text with a higher font size and an small thumbnail to the left of it.

This is the ultimate design I am trying to achieve (red image being an image). Please advice me on how I could pursue this?

http://i.imgur.com/sdm1fu7.png

Upvotes: 0

Views: 255

Answers (3)

Ritesh Gune
Ritesh Gune

Reputation: 16739

You can do something like :

    <?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="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="27dp"
        android:clickable="true"        
        android:drawableLeft="@drawable/ic_launcher"        
        android:gravity="center_vertical"
        android:onClick="onClick"        
        android:textColor="#000000"
        android:text="Sample"
        android:textSize="16dp"
        android:textStyle="bold" />

    <!-- separator -->

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

    <TextView
        android:id="@+id/message"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"        
        android:layout_marginBottom="27dp"
        android:clickable="true" 
        android:onClick="onClick"        
        android:textColor="#000000"
        android:text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        android:textSize="16dp"
         />

</LinearLayout>

in which

android:drawableLeft will work as an imageview displaying the image on the left of the text.

And android:text will display the title beside the image.

The second TextView will display the message below the image and title.

Both will be placed in a LinearLayout with orientation set to be vertical.

You can use following code as a separator between two TextViews:

res/separotor.xml

<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/separator"
      android:layout_width="match_parent"
      android:layout_height="1dip"
      android:background="@color/black">
</View>

Upvotes: 0

Mallu Don
Mallu Don

Reputation: 112

Use the android:drawableLeft attribute to set the image to left side of the textbox

Upvotes: 0

Steve Benett
Steve Benett

Reputation: 12933

You can use android:drawableLeft/Right/Top/Bottom to place a Drawable in your TextView. This is quite similar as a TextView and an ImageView. To adjust the position of the Drawable you can use android:drawablePadding="10dp" f.e.

 <TextView
    android:id="@+id/message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textSize="16dp"
    android:textStyle="bold"
    android:textColor="#000000"
    android:gravity="center"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="27dp"

    android:drawableLeft="@drawable/text_pop_up"
    android:drawablePadding="10dp"

    android:clickable="true"
    android:onClick="onClick" />

For the text below this TextView I would suggest to use a second TextView for independent formatting of both texts.

You could use a LinearLayout and place both TextViews as childs in it.

Upvotes: 2

Related Questions