android add view over surfaceView - android

i just want to make an video call layout and i faced this problem
i want to add some of imageView and button over surfaceView for swithc camera , mute , end call and some information and this is my xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<org.webrtc.SurfaceViewRenderer
android:id="#+id/preview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/rind"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- here my ImageView and button -->
</LinearLayout>
</RelativeLayout>
SurfaceViewRenderer its extend surfaceView
now when i run this i cant see my camera in surfaceView and i add red background for my SurfaceViewRenderer and its appear without my camera display i just search and i found mySurfaceView.setZOrderOnTop(true); i add its and now its show the display of camera but i can't see my view (mute, end call ...)
also i try
mySurfaceView.setZOrderMediaOverlay(true);
mySurfaceView.getHolder().setFormat(PixelFormat.TRANSPARENT);
no effect
i just want to make layout like this
before i use surfaceView i tried glsurfaceview but its same and i read i can't do it (add view over glsurfaceview) in glsurfaceview

Try this hope this will help you
and set for the top serface setZOrderMediaOverlay(true) and setZOrderMediaOverlay(false) for the next one
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"
tools:context="com.discuss.app.call.CallScreen" android:id="#+id/backgroundImage" android:background="#color/black" android:windowSoftInputMode="stateHidden">
<LinearLayout android:layout_width="wrap_content" android:id="#+id/remoteVideoContainer" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent" android:background="#color/black">
<org.webrtc.SurfaceViewRenderer android:layout_width="match_parent" android:layout_height="match_parent" android:id="#+id/remoteVideoViewSurface" android:visibility="gone" android:backgroundTint="#color/darkBackgroundColor" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintEnd_toStartOf="parent" app:layout_constraintStart_toEndOf="parent" app:layout_constraintBottom_toTopOf="parent" app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.284" app:layout_constraintVertical_bias="0.492" android:id="#+id/localVideoContainer" android:elevation="7dp" android:background="#color/black">
<org.webrtc.SurfaceViewRenderer android:layout_width="100dp" android:layout_height="100dp" android:id="#+id/localVideoViewSurface" android:visibility="gone" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Try this hope this will help you:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:clipChildren="false"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--local view-->
<com.example.gwl.apprtc.PercentFrameLayout
android:id="#+id/local_video_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<org.webrtc.SurfaceViewRenderer
android:id="#+id/local_video_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<!--remote View -->
</com.example.gwl.apprtc.PercentFrameLayout>
<com.example.gwl.apprtc.PercentFrameLayout
android:id="#+id/remote_video_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<org.webrtc.SurfaceViewRenderer
android:id="#+id/remote_video_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</com.example.gwl.apprtc.PercentFrameLayout>
<!---->
</FrameLayout>
<FrameLayout
android:id="#+id/buttons_call_container"
android:orientation="horizontal"
android:layout_marginBottom="#dimen/marginBottom_32dp"
android:layout_gravity="bottom|center"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/button_call_disconnect"
android:background="#drawable/disconnect"
android:contentDescription="#string/disconnect_call"
android:layout_width="#dimen/layoutWidth_48dp"
android:layout_height="#dimen/layoutHeight_48dp"/>
<ImageButton
android:id="#+id/button_call_toggle_mic"
android:background="#android:drawable/ic_btn_speak_now"
android:contentDescription="#string/toggle_mic"
android:layout_marginRight="#dimen/marginRight_10dp"
android:layout_width="#dimen/layoutWidth_48dp"
android:layout_height="#dimen/layoutHeight_48dp"/>
<ImageButton
android:id="#+id/button_call_switch_camera"
android:background="#android:drawable/ic_menu_camera"
android:layout_marginEnd="8dp"
android:layout_width="48dp"
android:layout_height="48dp"/>
</LinearLayout>
</FrameLayout>
</FrameLayout>

Related

adjustResize not working with EditText view inside a fragment layout

I have a full-screen activity with certain layout elements that hide to give way to a fragment inside a container (FrameLayout). Layout is as shown below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="#+id/home_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/closing_background"
android:orientation="vertical"
tools:context="com.example.activities.MainActivity">
<FrameLayout
android:id="#+id/dim"
android:alpha="0"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/dimBg" />
<RelativeLayout
android:id="#+id/header_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:layout_alignParentTop="true">
<ImageView
android:id="#+id/menu"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="24dp"
android:background="#drawable/ic_menu_black_24dp"/>
<ImageView
android:id="#+id/logo_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:src="#drawable/ic_app_logo_black" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/header_layout"
android:orientation="vertical"
android:layout_marginTop="26dp">
<FrameLayout
android:id="#+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<LinearLayout
android:id="#+id/first_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/header_layout"
android:visibility="gone"
android:orientation="vertical"
android:layout_marginTop="93dp">
<--other layout elements here-->
</LinearLayout>
</RelativeLayout>
The fragment layout is as shown below:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/parentLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:background="#android:color/transparent">
<RelativeLayout
android:id="#+id/rootView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false">
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:layout_alignParentTop="true"
android:textSize="18sp"
android:lineSpacingMultiplier="1.5"/>
<com.example.MyCustomRecyclerView
android:id="#+id/customRecyclerView"
android:layout_below="#id/description"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="72dp"
android:clipToPadding="false">
</com.example.MyCustomRecyclerView>
<include layout="#layout/input_view"
tools:visibility = "gone"/>
</RelativeLayout>
</ScrollView>
As you can see, in my fragment layout, I am including another layout called input_view. The layout file for this is shown below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="#+id/content_slide_up_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.activities.MainActivity"
tools:showIn="#layout/activity_main">
<RelativeLayout
android:id="#+id/slideResponseView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="26dp"
android:background="#drawable/rounded_up_corners_bg">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/pullDownArrow"
android:text="#string/response_view_title"
android:gravity="center_horizontal"
android:layout_marginTop="16dp"
android:textAllCaps="false"/>
**<EditText
android:id="#+id/response_view_input"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/title"
android:layout_margin="10dp"
android:gravity="top"
android:padding="10dp"/>**
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
app:srcCompat="#drawable/ic_keyboard_arrow_down_black_24dp"
android:id="#+id/pullDownArrow"
android:layout_marginTop="15dp"/>
</RelativeLayout>
</RelativeLayout>
This is a slideUp panel obtained from this source: https://github.com/mancj/SlideUp-Android, which largely is an edittext view that slides up on click event on the recyclerview item. The slider panel occupies 2/3rd of the screen space in portrait mode (and my app is portrait only). Now when I click on the EditText view on this slider panel to enter any text, I want this view to resize when the soft keyboard opens up from below it. I tried a few things suggested on SO like wrapping the root layout with a ScrollView but still doesn't work.
Also, the activity in manifest file includes the below:
android:windowSoftInputMode="adjustResize"
As mentioned above, the activity is a full screen activity which I am programmatically handling using below code:
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
View decorView = getWindow().getDecorView();
int uiOptions = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY | View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
decorView.setSystemUiVisibility(uiOptions);
Can someone please guide me here? If the question or part of my code is not clear, please let me know so I can elaborate a little more.
Thanks,
AB
Replace ScrollView with NestedScrollView.
Also replace RelativeLayout with ConstraintLayout.
Other code is ok.

How to make a dynamically moving View float on top of a ViewGroup?

I'm currently using a library that allows me to move freely a CardView in my screen, based on the user's finger. Here's my problem: I have a view Group on top that needs to stay below that CardView, but I'm not managing to do so.
I've tried using Frame Layout, but it didn't work as planned. The best I could do was that
but still, not what I meant to dO (card view completely floating around the "toolbar")
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
android:id="#+id/framelayout"
android:background="#color/verdeClaro"
tools:context=".View.Activity.LeitorMbookActivity"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:isScrollContainer="true"
>
<com.wenchao.cardstack.CardStack
android:elevation="4dp"
android:layout_marginTop="32dp"
android:id="#+id/cardStackContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding = "20dp"
android:clipChildren="false"
android:clipToPadding="false"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="64dp"
android:layout_gravity="top"
android:background="#android:color/transparent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="15"
android:gravity="center_vertical|right"
>
<ImageView
android:id="#+id/home_icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#drawable/ic_home"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center_vertical"
>
<com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar
android:id="#+id/progress_bar"
android:layout_height="6dp"
android:layout_width="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="24dp"
app:rcProgressColor="#color/white"
app:rcBackgroundColor="#color/verde_musgo"
app:rcRadius="2dp"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
The library I'm using to move the card is that.

Animate view resize

I need to dynamically resize central view, when keyboard (or another view) opens up from the bottom of the screen. I set android:windowSoftInputMode="stateHidden|adjustResize" in manifest, bit it doesn't helps. When keyboard opens, view is cropped from top and bottom. I need to get it scaled like on this picture.
It's name SnappingRecyclerView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
tools:context=".activity.MainActivity">
<LinearLayout
android:id="#+id/show_camera"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f4f5f7">
<ImageButton
android:id="#+id/btn_camera"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:background="#f4f5f7"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/camera59" />
...
</RelativeLayout>
...
</LinearLayout>
<com.superup.smartshelf.view.SnappingRecyclerView
android:id="#+id/item_list"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_above="#id/show_camera" />
</RelativeLayout>

Background image for a button in android

I am trying to add a background image for a button and it is working, but not as I expected.
1st picture (without background)
2nd picture (with background)
I would like the background to cover only the button. In other words, the image should have the same form as the 2 buttons from above (I'm talking about the round corners and a bit smaller size).
Here is the xml of the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main" tools:context=".MainActivity"
android:orientation="vertical">
<LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent">
<Button
android:onClick="playerStats"
android:text="#string/plStats"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent">
<Button
android:text="#string/comp"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent">
<Button
android:background="#drawable/calendar"
android:text="#string/calendar"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
its easy to do that
you should use ImageButton and remove those Buttons for example
<ImageButton
android:src="#drawable/calendar"
android:text="#string/calendar"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
also if you want to remove the background of that button you can use :
android:background="#null"
Replace your layout with these layout...It can be helpfil for you
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main" tools:context=".MainActivity"
android:orientation="vertical">
<LinearLayout android:layout_weight="1" android:layout_height="match_parent" android:layout_width="match_parent">
<Button
android:onClick="playerStats"
android:text="#string/plStats"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<View ////I HAVE ADDED VIEW WHICH IS TRASNPARENT TO SEPRATE THE BUTTONS
android:layout_width="fill_parent"
android:layout_height="10dp"
android:background="#android:color/transparent" >
</View>
<LinearLayout android:layout_weight="1" android:layout_height="match_parent" android:layout_width="match_parent">
<Button
android:text="#string/comp"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<View ////I HAVE ADDED VIEW WHICH IS TRASNPARENT TO SEPRATE THE BUTTONS
android:layout_width="fill_parent"
android:layout_height="10dp"
android:background="#android:color/transparent" >
</View>
<LinearLayout android:layout_weight="1" android:layout_height="match_parent" android:layout_width="match_parent">
<Button
android:background="#drawable/calendar"
android:text="#string/calendar"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<View ////I HAVE ADDED VIEW WHICH IS TRASNPARENT TO SEPRATE THE BUTTONS
android:layout_width="fill_parent"
android:layout_height="10dp"
android:background="#android:color/transparent" >
</View>
The simplest solution is: You need to edit your image background (make it a little smaller and have corner) - it can be done easily by using Photoshop
Than use 9-patch tool for make 9-patch image (9-patch images can automatically resize to accommodate the contents of the view and the size of the screen)
The "without background" button is actually displaying it default background, so setting new background will override that corner-rounded-gray thing...
Check this question.
I recommend using ImageButton with android:src instead.

Android - Scrollview don't push up when keyboard appear

My app have an activity with layuot like this
<RelativeLayout
android:id="#+id/layoutMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/backgroundchatfixed">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layoutKhungChat"
android:id="#+id/svChat">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/layoutChat">
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_khungchat"
android:layout_alignParentBottom="true"
android:id="#+id/layoutKhungChat">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/khungchat_chat"
android:layout_centerVertical="true"
android:id="#+id/etChatbox"/>
</RelativeLayout>
</RelativeLayout>
When i touch my Edittext, only layout "layoutKungChat" push up.
Any solution to push up also Scrollview above it?
Thanks.
Try adding this to the activity tag in the manifest:
android:windowSoftInputMode="adjustPan"
use this code
<RelativeLayout
android:id="#+id/layoutMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/backgroundchatfixed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_khungchat"
android:layout_alignParentBottom="true"
android:id="#+id/layoutKhungChat">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/khungchat_chat"
android:layout_centerVertical="true"
android:id="#+id/etChatbox"/>
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layoutKhungChat"
android:id="#+id/svChat">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/layoutChat">
</LinearLayout>
</ScrollView>
the one in the last always be written over the other layouts so if you want like buttons to be above an image layout as an example write it inside of layout below the image

Categories

Resources