Android Lollipop Design Issue

Question

I have a RelativeLayout with height parameter match_parent and in this I have another LinearLayout with property layout_alignParentBottom=true.

I am using this layout to show MediaController buttons.

Below is what I am expecting to have in MediaController

But below is what I am getting on Lollipop 5.1 (I have just added hard coded bottom margin to the layout, which is not at all any solution as it will not work well on all devices.)

The layout hides behind the bottom back button bar.

What will be the best way to only provide the necessary margin from bottom according to height of bottom bar as this layout works fine in other Android versions and earlier Android phones with Hardware back buttons.

My XML file looks like this

<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"
    tools:context="com.mypack.MyActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomLinear"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/albumArt"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:layout_gravity="center"
            android:background="@drawable/default_cover" />

        <TextView
            android:id="@+id/titleOfSong"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="3"
            android:text="Title Of Song"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/albumOfSong"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="3"
            android:text="Album Of Song"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/artistOfSong"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="3"
            android:text="Artist Of Song"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/genreOfSong"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="3"
            android:text="Genre Of Song"
            android:textSize="18sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/bottomLinear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >
    </LinearLayout>

</RelativeLayout>

App Theme

<style name="AppBaseTheme" parent="Theme.AppCompat"></style>
<style name="AppTheme" parent="AppBaseTheme">
    <item name="android:windowDisablePreview">true</item>
    <item name="android:windowAnimationStyle">@null</item>
</style>

Answer 1

It seems that your Activity is somehow using transparent navigation bar theme or something similar that allows to render view outside of the visible area.

Maybe giving some context about your Activity will help to figure out what is exactly happening.

That being said, you should use this attribute android:fitsSystemWindows in the root of your XML layout to force views to render only in the visible area of the window.

Answer 2

If you want to keep everything else the same and just add a bottom margin, this answer describes a way to get the height of the bottom soft key bar by subtracting getRealMetrics() and getMetrics() and using the difference to imply the height dimension.

Not tested the method myself, but the feedback seems positive.

Answer 3

You can use the defaultDisplay height and width in your Layout like this : For you it's RelativeLayout params.

    DisplayMetrics metrics = new DisplayMetrics();
    getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);
    android.widget.FrameLayout.LayoutParams params = (android.widget.FrameLayout.LayoutParams) yourUI.getLayoutParams();
    params.width = metrics.widthPixels;
    params.height = metrics.heightPixels;
    params.leftMargin = 0;
    yourUI.setLayoutParams(params);

Answer 4

I solved this problem by setting programmatically the layout height equals the display height.

Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int height = size.y;
int statusBarHeight = 0;
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
      statusBarHeight = getResources().getDimensionPixelSize(resourceId);
}
RelativeLayout relativeLayout =(RelativeLayout)findViewById(R.id.relativeLayout);
RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams)relativeLayout.getLayoutParams();
lp.height = height - statusBarHeight;
relativeLayout.setLayoutParams(lp);

Answer 5

Hi @gprathour try this

<LinearLayout
        android:id="@+id/bottomLinear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="?attr/actionBarSize"
        android:orientation="horizontal" >
    </LinearLayout>

Hope this helps.