Android - макет ограничения - выравнивание текста и значка

Question

Прежде всего, я новичок в Android -Development.
Мой вопрос касается выравнивания различных представлений в Android Studio / Development. В частности, правильное выравнивание по высоте значка и текста.

Icon-Text-Alignment

Как видите, я попытался выровнять текст по значку. Однако результат выглядит немного иначе в эмуляторе.

Вот мой. xml -файл:

    <?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>

Мои вопросы:

1. Как я могу исправить выравнивание этих двух видов?
2. Почему результат в эмуляторе отличается?
3. Существует ли передовая практика для правильного выравнивания видов?

Answer 1

Итак, я углубляюсь в проблему выравнивания и придумаю несколько «решений». Вообще говоря, и чтобы ответить на мои вопросы, «Пользовательская панель инструментов» не является правильным решением для выравнивания представлений.

Проблема заключается в заполнении шрифтов. Android взять весь вид, чтобы выровнять виды, а не как предполагалось, только "текст". Поэтому выравнивание выглядит не так.

Различные отступы / шрифты

1. Poppinsmedium : без отступов
2. Поппинсредий : с подкладкой; нормальное состояние
3. Android -Font : с отступом; нормальное состояние

Нижнее заполнение может быть устранено с помощью следующего кода:

android:includeFontPadding="false"

Или проверьте эту тему для более глубокого знания проблем шрифта -padding .

Чтобы выровнять виды, сейчас я использую Chain-Constraints и делаю это без заполнения. Это выглядит как лучший способ выровнять виды, особенно Text-Views. Однако я должен сказать, что, несмотря на удаление нижнего отступа, необходимо отрегулировать выравнивание с небольшим битом с вертикальным смещением.

Для справки:

constraintlayout.com

Android -Do c: цепочка ограничений

Answer 2

Вы можете сделать это просто с помощью пользовательской панели инструментов и добавив к ней меню.

Answer 3

Попробуйте использовать Custom toolbar:

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".terminalShortActivity">


    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#4EACE2"
        app:popupTheme="@style/ThemeOverlay.AppCompat">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <TextView
                style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Terminal Shortcuts"
                android:textColor="#FFFFFF" />
        </LinearLayout>
</androidx.appcompat.widget.Toolbar>
</LinearLayout>

Answer 4

 <?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_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imageView10" />

    <ImageView
        android:id="@id/imageView10"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginEnd="32dp"
        app:srcCompat="@drawable/ic_settings_black_24dp"

        app:layout_constraintTop_toTopOf="@id/textView3"
        app:layout_constraintBottom_toBottomOf="@id/textView3"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>