0


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.

Icon-Text-Alignment

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?

li.shdw
  • 1
  • 2

4 Answers4

0
 <?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>
ygngy
  • 3,630
  • 2
  • 18
  • 29
0

You can do this simply by using a custom toolbar and adding a menu to it.

gcantoni
  • 727
  • 6
  • 13
0

Try using 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>
Amitoz singh
  • 144
  • 1
  • 7
0

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.

Different paddings/fonts

  1. Poppinsmedium: without padding
  2. Poppinsmedium: with padding; normal state
  3. Android-Font: with padding; normal state

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:

constraintlayout.com

Android-Doc: constrain-chain

li.shdw
  • 1
  • 2