Clever Geek Handbook

ConstraintLayout: align top of text with image preview

I tried to align the top of the image and textview in constraints layout by providing

<ImageView
    android:id="@+id/img_medal"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:layout_marginStart="24dp"
    android:layout_marginTop="16dp"
    android:contentDescription="@string/default_content_description"
    android:src="@drawable/medal_gold"
    app:layout_constraintLeft_toLeftOf="@+id/view_award_region"
    app:layout_constraintTop_toTopOf="@+id/view_award_region" />

<TextView
    android:id="@+id/txt_medal_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginTop="0dp"
    android:text="You are gold now."
    app:layout_constraintLeft_toRightOf="@+id/img_medal"
    app:layout_constraintTop_toTopOf="@+id/img_medal"
    style="@style/SettingsMedalTitle"
    />

but the tops of these views are aligned and not the content as there is white space at the top and bottom of the font. does anyone know how to solve this problem? (The problem can be seen in the picture below)

enter image description here

+4


source to share


3 answers


Try this hack:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img_medal"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="16dp"
        android:paddingTop="6dp"
        android:contentDescription="@string/app_name"
        android:src="@android:drawable/sym_def_app_icon"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txt_medal_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="You are gold now."
        android:textSize="20sp"
        app:layout_constraintStart_toEndOf="@+id/img_medal"
        app:layout_constraintTop_toTopOf="@+id/img_medal" />

</android.support.constraint.ConstraintLayout>

Now it will look like the image below:



enter image description here

Hope this helps you. Happy coding.

0


source


You can do this by adding

android:padding|start|Top|End|Bottom="XXdp"

Padding creates white space around the view, mostly creating the desired effect.



Keep in mind that this can make the image look smaller, especially if you set a width / height value.

For example, right now the image view has 32dp -> has 32dp image space. If you add padding like 4dp, you get a 32dp view, but the actual image will have a comfortable 24dp (4 + 24 + 4) visual representation .

0


source


You will need to set a negative border for txt_medal_title

it to move slightly up the screen.

There are 2 ways in which you can set the size of this margin.

  • Exact: You have to do it in code. It will be something like the following:
TextView medalTitle = findViewById(R.id.txt_medal_title);
MarginLayoutParams params = (MarginLayoutParams) medalTitle.getLayoutParams();
FontMetrics fm = medalTitle.getTextPaint().getFontMetrics();
params.marginTop = (int) (fm.top - fm.ascent);
  • Visual fitting: You can use a negative margin in your layout using sp

    units. You will have to try different values ​​several times to get the desired result. Note that you will have to recheck this value every time you change the text size or the font you use.
0


source






More articles:


All Articles