CODEWITHSUNDEEP
androidxml
MKK
MKK

Reputation: 2753

How can I show an icon next to Text in xml file?

I tried to code like this

    <ImageView android:id="@+id/ivIcon"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@android:drawable/ic_btn_speak_now" />

    <TextView
        style="@style/behindMenuItemLabel"
        android:text="Item0" />

But it outputs like this. It's not in the same line :(

enter image description here

My whole xml code is just like this. (icon) item will be a set, which will be clicked by a user to move on activity.
So I need grouping them together. 

<LinearLayout style="@style/behindMenuScrollContent"
    android:paddingTop="25dp" >

    <TextView
        style="@style/behindMenuItemTitle"
        android:text="Subject" />

    <TextView
        style="@style/behindMenuItemLabel"
        android:text="Item0" />

    <TextView
        style="@style/behindMenuItemLabel"
        android:text="Item1" />

    <TextView
        style="@style/behindMenuItemLabel"
        android:text="Item2" />

    <TextView
        style="@style/behindMenuItemLabel"
        android:text="Item3" />

    <TextView
        style="@style/behindMenuItemLabel"
        android:text="Item4" />

    <TextView
        style="@style/behindMenuItemLabel"
        android:text="Item5" />

    <TextView
        style="@style/behindMenuItemTitle"
        android:text="Subject2" />

    <TextView
        style="@style/behindMenuItemLabel"
        android:text="Item6" />

    <TextView
        style="@style/behindMenuItemLabel"
        android:text="Item7" />

    <TextView
        style="@style/behindMenuItemLabel"
        android:text="Item8" />

    <TextView
        style="@style/behindMenuItemLabel"
        android:text="Item9" />

    <TextView
        style="@style/behindMenuItemLabel"
        android:text="Item10" />


    <Button
        android:id="@+id/behind_btn"
        style="@style/behindMenuItemLabel"
        android:text="BUTTON" />

</LinearLayout>

UPDATE: I don't need margin between icon and text but need margin only on left!

enter image description here

style.xml

<style name="behindMenuItemLabel">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_marginLeft">20dp</item>
    <item name="android:layout_marginBottom">4dp</item>
    <item name="android:textSize">30sp</item>
    <item name="android:textColor">#d2d2d2</item>
</style>

Upvotes: 2

Views: 8378

Answers (5)

Harish Godara
Harish Godara

Reputation: 2386

Try something like this : 

<TextView
    android:id="@+id/behindMenuItemLabel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:layout_weight="40"
    android:drawablePadding="-5dp"
    android:gravity="center_vertical"
    android:text="Speak Now"
    android:textColor="#000000"
    style="@style/behindMenuItemLabel" />

And this is your style.xml

<style name="behindMenuItemLabel">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_marginLeft">20dp</item>
    <item name="android:layout_marginBottom">4dp</item>
    <item name="android:textSize">30sp</item>
    <item name="android:drawableLeft">@drawable/your_icon</item>
    <item name="android:textColor">#d2d2d2</item>
</style>

Upvotes: 5

Yakiv Mospan
Yakiv Mospan

Reputation: 8224

You can use this attr android:drawableLeft="your_drawable_id" to set image left of text so the xml tag will be like this :

<TextView
    android:id="@+id/bookTitle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center_horizontal"
    android:drawableLeft="@drawable/icon"
    android:text="Item 0"
    style="@style/behindMenuItemLabel"/>

You can also set image right,top or bottom. Best wishes.

Upvotes: 1

T_V
T_V

Reputation: 17580

Do not use separate imageView for icon. In your textview set the drawable in right (or left,top,bottom)

 android:drawableRight="@android:drawable/ic_btn_speak_now"

Upvotes: 2

SilentKiller
SilentKiller

Reputation: 6942

you can set icon at all four side of a text in TextView

Right :

android:drawableRight="@drawable/icon"

Top :

android:drawableTop="@drawable/icon"

Bottom :

android:drawableBottom="@drawable/icon"

Left :

android:drawableLeft="@drawable/icon"

Upvotes: 4

Android Killer
Android Killer

Reputation: 18499

your need be full filled using the drawable attribute of textview, below i am giving one example:

<TextView
        android:id="@+id/bookTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:drawableBottom="@drawable/icon"
        android:text="Item 0"
        style="@style/behindMenuItemLabel"/>

Hope it helps

Upvotes: 4

Related Questions