Misplaced icon

[merlin-zaraza]

I'm using Community Material font inside my TextViews:

<TextView
        android:id="@+id/about_fb_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center"
        android:padding="5dp"
        android:tag="https://www.facebook.com/"
        android:text="{cmd-facebook} Facebook"
        android:textAlignment="center"
        android:textColor="?attr/textColor"
        android:textSize="16sp"
/>
<TextView
        android:id="@+id/about_twitter_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center"
        android:padding="5dp"
        android:tag="https://twitter.com/"
        android:text="{cmd-twitter} Twitter"
        android:textAlignment="center"
        android:textColor="?attr/textColor"
        android:textSize="16sp"
/>
<TextView
        android:id="@+id/about_youtube_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:clickable="true"
        android:drawablePadding="5dp"
        android:focusable="true"
        android:gravity="center"
        android:padding="5dp"
        android:tag="https://www.youtube.com/"
        android:text="{cmd-youtube} Youtube"
        android:textAlignment="center"
        android:textColor="?attr/textColor"
        android:textSize="16sp"
/>

And then I'm running this in onCreateView:
Iconics.Builder().on(child as TextView).build()

Result:

Why Twitter icon is placed in the end of text?

Library version is 5.0.3

[mikepenz]

That's very strange. :/

I suppose the twitter icon by coincidence uses some control character which reverses the text:

<com.mikepenz.iconics.view.IconicsTextView
                    android:id="@+id/about_twitter_tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="         {cmd-twitter} Twitter ABCDEFG"
                    android:textColor="#FFF"
                    android:textSize="16sp"
                    />

Doing the above will actually also put the spaces to the back :/

[mikepenz]

it seems this is some arabic sequence forcing it to the right :/

[mikepenz]

I'd propose to have a look into the preferred usage of iconics via the Drawable

you can set the Drawable as a compound icon to the view. This will make sure your text is independent of the icon.

binding.aboutTwitterTv.setCompoundDrawables(
            IconicsDrawable(this, CommunityMaterial.Icon3.cmd_twitter).apply {
                sizeDp = 24
                paddingDp = 4
                colorInt = Color.BLUE
            },
            null, null, null
)

Alternative you could also set the drawable as a custom spannable.

val sb = SpannableString(binding.test5.text)
val d = IconicsDrawable(this, FontAwesome.Icon.faw_android).apply {
            sizeDp = 48
            paddingDp = 4
            colorInt = themeValue1
}
sb.setSpan( ImageSpan(d, DynamicDrawableSpan.ALIGN_BOTTOM), 1, 2,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE )

[merlin-zaraza]

Thank you @mikepenz. Actually the same issue for cmd-thumb-up, maybe more. I'll try you advice with compound drawables.

[mikepenz]

@merlin-zaraza sadly the community icon set is soo big that it is almost impossible to not result in falling into sections already RTL :(

[mikepenz]

@merlin-zaraza did the approach using compound drawables work for your requirement?

[merlin-zaraza]

@mikepenz Yes. Thank you!

[mikepenz]

Glad this helped :)

As I don't think we can nicely solve this problem (and ensure it won't pop up again) I will close it.

the real solution is to use iconics as drawable which will always ensure it works for all situations :)