I have a PlayerView that takes up the top half of the Activity in portrait orientation with the bottom half of the screen showing some text.
I need to have the controller under the video without overlapping the video content (it will always be shown). By default when a user touches the video the controller appears at the bottom of the video covering the bottom part of the video. I my case I need the controller to stick under the video with no intersections with the video content.
I went through SimpleExoPlayer and PlayerView APIs but I haven't found any way to do so.
Question: How can I place the controller under the video with ExoPlayer?
Here is how the layout looks like:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.exoplayer2.ui.PlayerView
android:id="#+id/video_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#id/video_view"
android:scrollbars="vertical" />
</RelativeLayout>
This will push the controls down to the bottom of the screen:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.exoplayer2.ui.PlayerView
android:id="#+id/video_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:use_controller="false" />
<com.google.android.exoplayer2.ui.PlayerControlView
android:id="#+id/controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/video_view"
app:show_timeout="0" />
</RelativeLayout>
Then in Java:
PlayerView videoView = findViewById(R.id.video_view);
PlayerControlView controls = findViewById(R.id.controls);
controls.setPlayer(videoView.getPlayer());
Edit: Modified my answer to suggestion from #RashimiGautam
Refer to the answer by #Pierre.
Also to remove controller from above PlayerView, in that case, #id/video_view by writing player.showController(false) in java file.
You can also use app:use_controller:false in the xml.
So you will the only the video without controller on top. And link it to a new controller, in that case, #id/controls at the bottom of the video.
This might give you an idea, also have you tried to override the controls?
As an example, suppose we want our playback controls to consist of only a play/pause button positioned in the center of the view. We can achieve this by creating exo_playback_control_view.xml file in the application’s res/layout directory, containing:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton android:id="#id/exo_play"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#CC000000"
style="#style/ExoMediaButton.Play"/>
<ImageButton android:id="#id/exo_pause"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#CC000000"
style="#style/ExoMediaButton.Pause"/>
</FrameLayout>
Note that in the layout #id/exo_play and #id/exo_pause are standard ids defined by the ExoPlayer library. Use of standard ids is required so that child views can be identified, bound to the player and updated in an appropriate way. A full list of the standard ids for each view can be found in the Javadoc for PlaybackControlView and SimpleExoPlayerView. Use of each standard id is optional.
https://medium.com/google-exoplayer/customizing-exoplayers-ui-components-728cf55ee07a
Related
I'm creating an free Android application and I'm using OpenStreetMap (OSMdroid library). I have a question. On the webpage: https://www.openstreetmap.org/copyright
I have read, that I should put a text in the corner of map activity (#OpenStreetMap contributors).
How to do this?
I'd like my app to be comply with the OSM license.
Regards
There is a built in copyright overlay for displaying the notice based on the current tile source.
Edit, sample code is below
//Copyright overlay
mCopyrightOverlay = new CopyrightOverlay(context);
mMapView.getOverlays().add(this.mCopyrightOverlay);
Basically, whatever the current tile source is, the text overlay will be drawn.
When you have your layout file simply add a TextView with "#OpenStreetMap contributors" to it. (I recommend to use a RelativeLayout)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<org.osmdroid.views.MapView android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:text="OpenStreetMap Contributors" />
</RelativeLayout>
I saw in other apps that on startup they all show this and a few seconds later it is fading out so you can use a delayed animation for that.
textView.animate().setStartDelay(3000).alpha(0).setDuration(1000).start();
So when I click on an activity I want to show a loading gif, instead of a: 'ProgessDialog', but how can I bring this in the center of the screen and to the front without replacing other objects?
<FrameLayout
android:id="#+id/scrim"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/dark_translucent"
android:visibility="gone">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="24dp"/>
</FrameLayout>
</FrameLayout>
Add to your build.gradle(Module.app)
dependencies {
compile 'com.github.bumptech.glide:glide:3.6.1'
}
In your Activity
Glide.with(this)
.load(imageGif)
.asGif()
.fitCenter()
.crossFade()
.into(imageView);
There's an excellent library for this called andorid-gif-drawable
You'd want to do this, after adding the library to your project:
<pl.droidsonroids.gif.GifImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:src="#drawable/src_drawable_here"
/>
Make sure it's inside a layout that allows center in parent (which means center horizontally and vertically), such as a RelativeLayout.
This is how I do it:
<FrameLayout> <!-- this can also be a CoordinatorLayout -->
... (content)
<FrameLayout
android:id="#+id/scrim"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/dark_translucent"
android:visibility="gone">
<ProgressBar
android:id="#+id/progressBar"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="24dp"
android:indeterminate="true"/>
</FrameLayout>
</FrameLayout>
This is used in conjunction with a loader. When the loader is started, I set the scrim visibility to visible. When the loader completes, I set the scrim visibility back to gone.
A couple things:
You should track whether the scrim is visible or not in the saved instance state, so if the user rotates the device while the loader is in progress, you can show the scrim again immediately in onCreate.
If you are covering touchable controls, you should make all your controls disabled until completion. Alternatively, you could set an onTouchListener on the scrim layout to consume the touch events so the content controls are effectively disabled.
I have two Buttons nested in a LinearLayout. Between these Buttons are two TextViews. In the Xml, I have set the foreground to an image for each of these Buttons.
It runs fine on my device for Api 23. But on other devices below Api 23, the foreground image does not display and instead results in a default white solid color. Is there any way to make these images show using foreground below Api 23?
We have tried FrameLayout but it does not do what we want it to do. Would ImageButtons be a better way to solve this issue?
One of the core functions of our app is that every time a user taps a Button, the size increases and the image stretches accordingly. This is done dynamically in code. If I were to use ImageButtons, I would need to set the layout parameters every time for height and width, rather than one line of code that sets the height.
Any tips would be appreciated!
EDIT: Code I am working with -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="11"
android:background="#android:color/black">
<Button
android:layout_weight="5"
android:id="#+id/firstP"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:foreground="#drawable/icebutton"
android:scaleX="1"
android:scaleY="1"/>
<TextView
android:layout_weight="0.5"
android:id="#+id/firstPlayer"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:rotation="180"
android:textColor="#android:color/white"
android:background="#android:color/transparent"/>
<TextView
android:layout_weight="0.5"
android:id="#+id/secondPlayer"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:background="#android:color/transparent"/>
<Button
android:layout_weight="5"
android:id="#+id/secondP"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:foreground="#drawable/firebutton"
android:scaleX="1"
android:scaleY="1"/>
</LinearLayout>
We found out that there were two issues causing the images to not be shown.
1. The size of the image file was too big, creating an outOfMemory error which in turn resulted in the buttons not displaying the images.
2. The foreground attribute does not work for API 22 and below.
Steps to solving these issues:
1. We reduced the size of the image files.
2. We replaced Button with ImageButton
3. In the XML file we removed the foreground attribute, added a black background, and added the image via the src attribute. The following is a snippet.
<ImageButton
android:layout_weight="5"
android:id="#+id/firstP"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:src="#drawable/icebutton"
android:scaleType="fitXY"
android:background="#android:color/black"/>
We then had to change our code to dynamically adjust the height of the buttons to match the new image buttons with the help of this link by setting the LayoutParams:
how to change size of button dynamic in android
Now everything works perfectly!
I'm working on a information orientated app using the master/detail flow and so far, so good. I would like to add images to the TextView, but it's formatted differently then what I've experienced in the past and I'm lost. from my understanding of what I've read while searching is that the scrolling text is "newer" when generating the Master/detail activity, therefore I haven't found any information on this specific issue. I would also like to pass the images in using the content activity, so it would be-
addItem(new Item(ID,Name,Detail,Image1,Image2));
what the detail XML file looks like
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/bobblehead_detail"
style="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:textIsSelectable="true"
tools:context="com.example.johnson.fallout4bobbleheadlocations.BobbleheadDetailFragment" />
I tried adding ImageView's under it, but I received errors.
tl;dr I would like to add 2 images under the scrolling TextView.
I am not sure if I clearly understand what you mean but looking at your xml it seems to me that you need to add a layout (either relative or linear) to your xml file and then add a textview and two imageviews (or whatever you want) into that layout.
Something 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"
android:padding="16dp" tools:context="com.example.somefragment">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/some_id2"
android:text="Here is your text"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/some_id"
android:src="#drawable/image1"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/some_id3"
android:src="#drawable/image2"/>
</RelativeLayout>
I am developing an android application,That has a buttons and images.I need to make it responsive.If i use bigger devices like tablets,it displays the controls very small.And when i used in landscape mode,it displays half of the controls or items.How can i overcome this and make my application responsive to all devices.I attached one of my XML code below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:orientation="vertical"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="125dp"
android:layout_marginTop="50dp"
android:layout_weight="0.01"
android:adjustViewBounds="true"
>
</ImageView>
<LinearLayout
android:id="#+id/layButtonH"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.01"
android:layout_marginTop="20dp"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/addnew"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" ADD NEW "
android:background="#drawable/button_shape"
android:textColor="#FFFFFF"/>
<Button
android:id="#+id/open"
android:background="#drawable/button_shape_cancel"
android:layout_marginTop="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" OPEN "
android:textColor="#FFFFFF" />
<Button
android:id="#+id/Register"
android:background="#drawable/button_shape_cancel"
android:layout_marginTop="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" LOGIN "
android:textColor="#FFFFFF" />
</LinearLayout>
You can start off with below mentioned resources. Making an app available for all screen sizes needs certain consideration while designing and developing the app.
You will have to work on your images to make them consistent with different screen sizes. This will solve the issue with very small controls in tablets.
Also, it looks like in landscape mode your widgets are going beyond the screen height. A quick solution would be to put the LinearLayout within a ScrollView so that it scrolls when in landscape and you see all of your controls. But ideal way would be to have different layouts for landscape and portrait modes.
If you use ScrolLView the code will look like:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Your remaining xml elements -->
</ScrollView>
Ref:
Design for multiple screens
Supporting different screen sizes
Supporting multiple screens
For responsive design take
1) Don't give hard code values like as 125dp rather than user wrap_content or match_parent property
2) Put images under res drawable as per resolution OS take images suited for its resolution, e.g for tablet design create drawable-sw600 folder under res and put tablet images under it.
3) Same for values->dimension create different dimens file with specific folder name. e.g values-sw600 which is used for tablet
4) Use ScrollView control for avoiding screen cutting in landscape mode.
For more details and guideline please visit http://developer.android.com/guide/practices/screens_support.html and http://developer.android.com/training/multiscreen/screendensities.html