first of all I am new to Android-Development.
My question is regards alignment of different views in Android Studio/Development.
Specifically the properly height-alignment of an icon and text.
As you can see, I tried to align the text with the icon. However the result looks slightly different in the emulator.
Here is my .xml-file:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DashboardActivity">
<TextView
android:id="@+id/textView3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginBottom="352dp"
android:fontFamily="@font/poppins_medium"
android:text="Dashboard"
android:textAlignment="viewStart"
android:textColor="@color/colorText"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/imageView10"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.04" />
<ImageView
android:id="@+id/imageView10"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="32dp"
app:layout_constraintBottom_toBottomOf="@+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView3"
app:layout_constraintTop_toTopOf="@+id/textView3"
app:srcCompat="@drawable/ic_settings_black_24dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
My questions are:
1. How can i fix the alignment of these two views?
2. Why is the result in the emulator different?
3. Is there a best-practice to align views properly?
So I dig into the alignment issue a little further and came up with a few "solutions". Generally speaking and to answer my questions the "Custom Toolbar" is not the right solution to align the views.
The problem lies in the padding of fonts. Android take the whole view to align views and not as assumed the "text" only. Therefore the alignment looks off.
The bottom-padding can be eliminated with the following code:
android:includeFontPadding="false"
Or check this thread for more in-depth knowledge of the issues of font-padding.
To align views, now I am using Chain-Constraints and do it without padding. It looks like the best-way to align views, especially Text-Views. However, I have to say that despite the deleting of the bottom padding it is necessary to adjust the alignment a littlebit with the vertical-bias.
For reference: