Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android layout unwanted padding

So i am having this layout file (below). As you can see, there is no padding or margin. The dimen.xml files also dont have any padding/margin. Finally, i do NOT change the layout programmatically at all.

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/root"
            android:padding="0dp"
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:id="@+id/toolbarholder"
                android:layout_alignParentTop="true"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardElevation="16dp"
                app:cardCornerRadius="0dp">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">



            </android.support.v7.widget.Toolbar>
            </android.support.v7.widget.CardView>


            <ListView
                android:layout_below="@+id/toolbarholder"
                android:layout_above="@+id/cardroot"
                android:id="@+id/listView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:divider="@null"
                android:dividerHeight="0dp"
                android:layout_marginTop="0dp" />


            <android.support.v7.widget.CardView
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/cardroot"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="@color/transparentblack"
                app:cardCornerRadius="0dp"
                app:cardElevation="16dp"
                android:layout_alignParentBottom="true">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <LinearLayout
                        android:id="@+id/buttonholder"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="20dp"
                        android:weightSum="3">

                        <ImageView
                            android:id="@+id/previous"
                            android:layout_width="35dp"
                            android:layout_height="35dp"
                            android:src="@drawable/previous"
                            android:layout_weight="1"/>
                        <ImageView
                            android:id="@+id/play"
                            android:layout_width="35dp"
                            android:layout_height="35dp"
                            android:src="@drawable/play"
                            android:layout_weight="1"/>
                        <ImageView
                            android:id="@+id/next"
                            android:layout_width="35dp"
                            android:layout_height="35dp"
                            android:src="@drawable/next"
                            android:layout_weight="1"/>

                    </LinearLayout>

                    <SeekBar
                        android:id="@+id/seekbar"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/buttonholder" />

                </RelativeLayout>

            </android.support.v7.widget.CardView>

        </RelativeLayout>

Below are two screenshots from two different devices.

Lenovo k3 Note:

enter image description here

HTC Desire 550:

enter image description here

Any ideas what might be the cause of this?

like image 853
DimitrisCBR Avatar asked Aug 25 '15 13:08

DimitrisCBR


1 Answers

Ok Guys... thanks for your input. Turns out the "Cardview Documentation" mentions that:

Before L, CardView adds padding to its content and draws shadows to that area. This padding amount is equal to maxCardElevation + (1 - cos45) * cornerRadius on the sides and maxCardElevation * 1.5 + (1 - cos45) * cornerRadius on top and bottom.

This means that the Margin is intended behavior to draw the shadows and simulate elevation. One possible solution for everyone having the same problem, is use the attribute cardUseCompatPadding in your layout as follows:

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="0dp"
    app:cardUseCompatPadding="true">
</android.support.v7.widget.CardView>

This will cause your layout to be "rendered" the same way (the pre-Lollipop way //sad ) in every device regardless of the API. At least this way we can fix a common layout that works for all versions given this restriction.

Hope it helps.

UPDATE: If you decide to go for "app:cardUseCompatPadding=true" here is another advice. Use negative layout_margin, to balance-out the unwanted padding from the compat library. Example below:

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="-10dp"
    app:cardCornerRadius="0dp"
    app:cardUseCompatPadding="true"
    app:cardElevation="8dp">
</android.support.v7.widget.CardView>

This way your layout can get rid of unwanted padding AND look the same pre-lollipop and after lollipop.

Hope this helps even more. :)

like image 58
DimitrisCBR Avatar answered Nov 07 '22 03:11

DimitrisCBR