Search code examples
androidandroid-layoutandroid-relativelayoutandroid-percentrelativelayout

how to align a view below centered in parent view in a relative layout


I want to align a Framelayout below a view which has centerInParent attribute set to true in a relative layout. I've tried layout_below but it doesn't work. then I tried to remove centerInParent and tried center_horizontal and center_vertical but it doesn't help also, the FrameLayout still stuck to the top of the layout. Here is my layout code:

<android.support.percent.PercentRelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="?actionBarSize"
            android:layout_marginTop="?actionBarSize"
            android:background="@android:color/transparent">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/white"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0"
                tools:src="@drawable/car_engine" />

            <View
                android:id="@+id/center_point"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:background="@color/g" />

            <View
                android:id="@+id/tab_scrim"
                android:layout_width="match_parent"
                android:layout_height="@dimen/gradiant_height"
                android:layout_alignParentBottom="true"
                android:background="@drawable/tab_scrim"
                app:layout_heightPercent="40%" />

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/center_point">

                <TextView
                    android:id="@+id/car_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingBottom="5dp"
                    android:paddingTop="2dp"
                    android:textAlignment="center"
                    android:textColor="@color/w"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    tools:text="@string/car_header_text" />

                <TextView
                    android:id="@+id/car_subtitle"
                    style="@style/TitleWhite"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/car_title"
                    android:paddingBottom="4dp"
                    android:paddingTop="4dp"
                    android:text="@string/car_sub_header"
                    android:textAlignment="center" />
            </FrameLayout>
        </android.support.percent.PercentRelativeLayout>

Solution

  • Set your PercentRelativeLayout height to match_parent.

    <android.support.percent.PercentRelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?actionBarSize"
        android:layout_marginTop="?actionBarSize"
        android:background="@android:color/transparent">