material-components / material-components-android

Modular and customizable Material Design UI components for Android
Apache License 2.0
16.38k stars 3.07k forks source link

Add Views to Toolbar added to CollapsingToolbarLayout #1867

Open DHosseiny opened 4 years ago

DHosseiny commented 4 years ago

Description: The problem is when I add a view for Exmaple an ImageButton to toolbar that is direct child of CollapsingToolbarLayout that ImageButton's layout_gravity is not true in Rtl languages. When I set layout_gravity to start for exmaple, this ImageButton's is sticked to left of toolbar in English language(as a Ltr language) but in persian language(as a Rtl language) it is sticked to left of toolbar again(as this means end not start).

Expected behavior: layout_gravity="start" of direct child of toolbar in CollapsingToolbarLayout should stick to right of toolbar and vice versa.

Source code:

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="128dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:collapsedTitleGravity="end"
            app:expandedTitleGravity="center"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="@string/app_name">

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end"
                    android:src="@drawable/ic_adb_24dp" />

            </androidx.appcompat.widget.Toolbar>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:lineSpacingExtra="8dp"
            android:padding="@dimen/activity_horizontal_margin"
            android:text="@string/lorem"
            android:textSize="20sp" />
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Android API version: Any but tested in 29

Material Library version: 1.2.1 latest stable right now

Device: Nexus 4 emulator

DHosseiny commented 4 years ago

I tested toolbar's titleMarginStart attr and it has the same bug(start converts to left in Rtl languages).

matpag commented 4 years ago

Can you try using MaterialToolbar and inflating a menu instead of adding ImageViews as Toolbar's children? For example, check the toolbar layout here and the inflation code here

DHosseiny commented 3 years ago

@matpag I fixed my own issue but I am looking for a fix on this.

matpag commented 3 years ago

If you are referring to Toolbar icons, I don't think there is something to fix here. Adding ImageViews directly inside Toolbar is not supported and not suggested anywhere I can find online, pretty every tutorial suggest you to add icons via menu inflation.

If you are talking about titleMarginStart being bugged in RTL, I did not verified it yet.

DHosseiny commented 3 years ago

Yes, titleMarginStart being bugged in RTL.(I think if this get fixed the main problem will be fixed too)