Agung
Agung

Reputation: 13803

how to set constraint layout width that inside toolbar to be match parent?

enter image description here

I have a toolbar, and inside that toolbar I place constraintlayout. I want to set that constraintlayout width to match_parent. but as you can see in the image above, even though I have set the layout_width to be match_parent, but in the start (left side) it doesn't match the parent. you can see the blue outline box in that green toolbox, the left side is not match the parent.

because I want place some views inside that toolbar, like searchbar, text etc. and it is hard to make it right in the center if constraintlayout width not match_parent.

here is the xml I use:

<?xml version="1.0" encoding="utf-8"?>


<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Activities.MainActivity">


    <androidx.appcompat.widget.Toolbar
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:theme="?attr/actionBarTheme"
            android:minHeight="?attr/actionBarSize"
            android:id="@+id/top_toolbar"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            android:elevation="4dp">

        <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                tools:context=".Fragments.Search.SearchFragment"
                android:id="@+id/constraintLayout_toolbar" tools:layout_editor_absoluteY="8dp"
                tools:layout_editor_absoluteX="16dp">

            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:id="@+id/destination_label_text_view"
                    tools:text="Text View"
                    app:layout_constraintStart_toStartOf="parent"
                    android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="parent"
                    android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="parent"
                    android:textAlignment="viewStart" android:layout_marginEnd="8dp"
                    app:layout_constraintEnd_toEndOf="parent"/>



        </androidx.constraintlayout.widget.ConstraintLayout>


    </androidx.appcompat.widget.Toolbar>


    <fragment
            android:id="@+id/nav_host_fragment"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/bottom_nav"
            app:layout_constraintTop_toBottomOf="@+id/top_toolbar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:name="androidx.navigation.fragment.NavHostFragment"
            app:navGraph="@navigation/main_graph"
            app:defaultNavHost="true"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:layout_width="0dp"
            android:layout_height="50dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:background="@color/colorPrimary"
            app:itemIconTint="@color/bottom_navigation_color"
            app:itemTextColor="@color/bottom_navigation_color"
            app:menu="@menu/bottom_navigation_menu"
            app:labelVisibilityMode="unlabeled"
            android:id="@+id/bottom_nav"/>


    <ProgressBar
            style="?android:attr/progressBarStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/progressBar_main_activity"
            app:layout_constraintTop_toBottomOf="@id/top_toolbar"
            app:layout_constraintBottom_toTopOf="@+id/bottom_nav"
            app:layout_constraintStart_toStartOf="@+id/nav_host_fragment"
            app:layout_constraintEnd_toEndOf="@+id/nav_host_fragment"
            android:visibility="gone"/>

Upvotes: 0

Views: 645

Answers (2)

Umair
Umair

Reputation: 6426

You need to add ContentInset attribute to your toolbar like below:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Activities.MainActivity">


<androidx.appcompat.widget.Toolbar
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:theme="?attr/actionBarTheme"
        android:minHeight="?attr/actionBarSize"
        android:id="@+id/top_toolbar"
        android:contentInsetLeft="0dp"
        android:contentInsetStart="0dp"
        android:contentInsetRight="0dp"
        android:contentInsetEnd="0dp"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetRight="0dp"
        app:contentInsetEnd="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        android:elevation="4dp">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            tools:context=".Fragments.Search.SearchFragment"
            android:id="@+id/constraintLayout_toolbar" tools:layout_editor_absoluteY="8dp"
            tools:layout_editor_absoluteX="16dp">

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:id="@+id/destination_label_text_view"
                tools:text="Text View"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="parent"
                android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="parent"
                android:textAlignment="viewStart" android:layout_marginEnd="8dp"
                app:layout_constraintEnd_toEndOf="parent"/>



    </androidx.constraintlayout.widget.ConstraintLayout>


</androidx.appcompat.widget.Toolbar>

Upvotes: 1

Priyanka
Priyanka

Reputation: 3699

this is not an issue of ConstraintLayout

toolbar has default left & right margin

you can remove it by the following code

android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp"

Upvotes: 1

Related Questions