Android layout collapse

Question

I use a XWalkView to load webpage and a IjkVideoView to play live video in my app. I want the IjkVideoView playing the video in front the XwalkView, so I put these two view in a relativelayout and IijVideoView behind the XWalkView.

In the android studio's Component Tree of Design window the layout seems ok as below image,

While when I run the app in my device, the layout is in mess as below image. You can see the background of IjkVieoView is in front of XWalkView, but the video playing in the IjkVideoView is behind the XWalkView, as the upper part of the video has been covered by the XWalkView.

layout xml,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:ignore="UselessParent">

        <!-- This could be your fragment container, or something -->

        <org.xwalk.core.XWalkView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/xWalkView"
            android:layout_width="fill_parent"
            android:layout_height="160dp"
            android:background="@color/blue"
            android:isScrollContainer="true">

        </org.xwalk.core.XWalkView>

        <com.xxxxxx.app.widget.media.IjkVideoView
            android:id="@+id/video_view"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="72dp"
            android:background="@color/colorAccent" />

        <com.roughike.bottombar.BottomBar
            android:id="@+id/bottomBar"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_alignParentBottom="true"
            app:bb_tabXmlResource="@xml/web_tabs" />

    </RelativeLayout>
</LinearLayout>

activity java code,

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.d("INFO", "entered");
        setContentView(R.layout.activity_web);
        mXWalkView = (XWalkView) findViewById(R.id.xWalkView);
        XWalkSettings webSettings = mXWalkView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        mXWalkView.addJavascriptInterface(new JsInterface(), "NativeInterface");

        videoView = (IjkVideoView) findViewById(R.id.video_view);
        videoView.setAspectRatio(IRenderView.AR_ASPECT_FILL_PARENT);
        videoView.setVideoURI(Uri.parse("http://live.xxxxxx.com/live/40xx27.flv"));
        videoView.start();

        final Bundle extras = getIntent().getExtras();
        mXWalkView.load("http://xxxxxxxxxxxxxx", null);
}

@Kris Roofe mention elevation for views,put less elevation for below views and high for above which you want to display above of the view. — YBDevi, Jul 14 '17 at 07:29
For days, with the comments and answers, I get no progress. And I guess it may be caused by the surfaceview. — LF00, Jul 14 '17 at 09:16

UmAnusorn · Accepted Answer · 2017-07-13T07:12:00.597

3

Your layout seems to be correct. It might be broken from the libs. It already has 1k+ issues.

Maybe you can use a custom dialog that has the video in it and show that dialog. This way the video will be in front of the images. Then you can try to remove the shadow or bgColor = transparent, so that the user might not realise that is a dialog. This hack may work.

edited Jul 13 '17 at 07:12

answered Jul 07 '17 at 11:49

UmAnusorn

10,420
10
72
100

score 1 · Answer 2 · answered Jul 14 '17 at 08:49

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:ignore="UselessParent">

        <!-- This could be your fragment container, or something -->

        <org.xwalk.core.XWalkView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/xWalkView"
            android:layout_width="fill_parent"
            android:layout_height="160dp"
            android:background="@color/blue"
            android:elevation="5dp"
            android:isScrollContainer="true">

        </org.xwalk.core.XWalkView>

        <com.xxxxxx.app.widget.media.IjkVideoView
            android:id="@+id/video_view"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:elevation="10dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="72dp"
            android:background="@color/colorAccent" />

        <com.roughike.bottombar.BottomBar
            android:id="@+id/bottomBar"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:elevation="5dp"
            android:layout_alignParentBottom="true"
            app:bb_tabXmlResource="@xml/web_tabs" />

    </RelativeLayout>
</LinearLayout>

Try this layout i modify it with elevation may it will help you.I have same problem by using elevation it solve.

I test it. The upper background of IjkViewoView is also covered by the XWalkView. And I flip the selevation setting, nothing changes. — LF00, Jul 14 '17 at 09:14
try to remove elevation form other views mention only for video. — YBDevi, Jul 14 '17 at 09:17
you can do one more thing mention IjkVideoView bellow of BottomBar in layout. — YBDevi, Jul 14 '17 at 09:20

score 0 · Answer 3 · answered Jul 14 '17 at 07:36

I think it is due to relative layout. Why don't you try this code by using the Frame Layout. The most convenient and maintainable way to design application user interfaces is by creating XML layout resources. This method greatly simplifies the User Interface design process, moving much of the static creation and layout of user interface controls and definition of control attributes, to the XML, instead of littering the code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >
    <org.xwalk.core.XWalkView 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/xWalkView"
        android:layout_width="fill_parent"
        android:layout_height="160dp"
        android:background="@color/blue"
        android:isScrollContainer="true">
    </org.xwalk.core.XWalkView>

    <com.xxxxxx.app.widget.media.IjkVideoView
        android:id="@+id/video_view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="72dp"
        android:layout_gravity="Bottom"
        android:gravity="center"
        android:background="@color/colorAccent" />

    <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        app:bb_tabXmlResource="@xml/web_tabs" />

       </FrameLayout>
  </LinearLayout>

Thank you, I've test. It's the same, nothing changed. – LF00 Jul 14 '17 at 08:05 — LF00, Jul 14 '17 at 08:05
To IjkVideoView add layout_gravity and gravity – Sai Eswar Jul 14 '17 at 08:34 — Sai Eswar, Jul 14 '17 at 08:34

Android layout collapse

3 Answers3

Linked