Skip to content

Instantly share code, notes, and snippets.

@yaraki
Last active June 25, 2018 05:51
Show Gist options
  • Save yaraki/24c94955f82f1d182d0f7fffa120c2fd to your computer and use it in GitHub Desktop.
Save yaraki/24c94955f82f1d182d0f7fffa120c2fd to your computer and use it in GitHub Desktop.
Place an icon at the end of a "wrap_content" text view
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#9f9"
android:text="It is fine today."
android:textAppearance="@style/TextAppearance.AppCompat.Large"
app:layout_constraintEnd_toStartOf="@id/icon"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap"/>
<ImageView
android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_android"
android:tint="?attr/colorAccent"
app:layout_constraintBottom_toBottomOf="@id/message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/message"
app:layout_constraintTop_toTopOf="@id/message"/>
</android.support.constraint.ConstraintLayout>
@yaraki
Copy link
Author

yaraki commented Jun 25, 2018

Notice that the TextView has

  • layout_width="0dp": This makes the width to match the constraint.
  • layout_constraintWidth_default="wrap": This makes the width to be like "wrap_content" when it is not bound by the constraints.

@toyamah
Copy link

toyamah commented Jun 25, 2018

Thank you very much.
But I'm afraid that this layout is not the one I want πŸ™‡β€β™‚οΈ :
How do we build the following layout using ConstraintLayout?

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:flexDirection="row"
  >


  <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
    tools:text="asfaf"
    />

  <ImageView
    android:id="@+id/imageView"
    android:layout_width="60dp"
    android:layout_height="100dp"
    android:src="@android:color/black"
    />
</com.google.android.flexbox.FlexboxLayout>

@yaraki
Copy link
Author

yaraki commented Jun 25, 2018

Revision 2 has:

  • layout_constraintHorizontal_bias="0": To make things left-aligned.
  • layout_constraintHorizontal_chainStyle="packed": To remove unnecessary margins.

@yaraki
Copy link
Author

yaraki commented Jun 25, 2018

Short text

long

Long text

short

@toyamah
Copy link

toyamah commented Jun 25, 2018

That's perfect!!! πŸ‘ πŸ‘ πŸ‘
Thank you so much! πŸ™‡β€β™‚οΈ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment