Search code examples
androidandroid-studioandroid-layoutmaterial-designandroid-toolbar

Toolbar doesn't allow to use a match-parent layout in it


I've designed a toolbar but it doesn't let me make a match-parented layout. Its left side is locked and it doesn't allow me to put the TextView there, but the right side is doing well;

I've watched too many videos on YouTube about designing toolbar but they didn't have such this problem.

👉 You can see that in this picture.

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar 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="?attr/actionBarSize"
    android:background="@color/colorPrimaryDark"
    android:elevation="10dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.AppCompatImageButton
            android:id="@+id/icon_more"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="?attr/actionBarSize"
            android:layout_height="?attr/actionBarSize"
            android:src="@drawable/ic_more_vert"
            android:tint="@android:color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.appcompat.widget.AppCompatImageButton
            android:id="@+id/icon_search"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="?attr/actionBarSize"
            android:layout_height="?attr/actionBarSize"
            android:src="@drawable/ic_search"
            android:tint="@android:color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/icon_more"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="چی بخوریم ؟"
            android:textColor="@android:color/white"
            android:textSize="18sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.appcompat.widget.Toolbar>

build.gradle (Module: app) :

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.1'
    implementation 'com.google.android.material:material:1.2.1'
    testImplementation 'junit:junit:4.13'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

}

✔ I've got no conflict with AndroidX libraries.

Shall I use fragments to solve the problem? Why does it occur?


Solution

  • It is due to the default content inset in the toolbar. Add app:contentInsetStart="0dp" and app:contentInsetLeft="0dp" in your toolbar

    Code

     <androidx.appcompat.widget.Toolbar 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="?attr/actionBarSize"
            android:background="@color/colorPrimaryDark"
            android:elevation="10dp"
            app:contentInsetStart="0dp"
            app:contentInsetLeft="0dp">
            
            <!-- Your Child views-->
    
        </androidx.appcompat.widget.Toolbar>