How to limit the height of SimpleExoPlayerView to take only the height of control buttons instead of taking all the screen height?
Here is the layout of my activity :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.google.android.exoplayer2.ui.SimpleExoPlayerView
android:id="#+id/player_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:show_timeout="0"
app:hide_on_touch="false"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
The result is this :
And I would like something like this without having to manually set SimpleExoPlayerView height in dp:
I managed to do want I needed to do by overriding layout file exo_simple_player_view.xml and keep only the part that contains controls. I have created the layout file in res/layout/exo_simple_player_view.xml (the name must not be changed).
exo_simple_player_view.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<View android:id="#id/exo_controller_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</merge>
you can get the controller_view Height and set it to SimpleExoPlayerView height
playerView.exo_player_control.post {
playerView.layoutParams.height = playerView.exo_player_control.height
podcastFragmentBinding.playerView.requestLayout()
}
Related
I have a simple Fragment that has an ExoPlayer PlayerView.
<androidx.appcompat.widget.LinearLayoutCompat 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:background="#color/black"
android:fitsSystemWindows="false">
<com.google.android.exoplayer2.ui.PlayerView
android:id="#+id/videoView"
app:surface_type="texture_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:controller_layout_id="#layout/custom_player_controls" />
</androidx.appcompat.widget.LinearLayoutCompat>
This is what it looks like when I play a super wide video:
On the left you can see the space for the camera cutout. If I set the LinearLayoutCompat to have a background of some other color then it is really obvious that the LinearLayoutCompat is occupying the entire space, even where the cutout is. So why isn't the PlayerView taking that space?
I don't see any calls to set the PlayerView size, I just call setPlayer() and pass it my ExoPlayer instance.
Edit: I did another test. I put a view before the PlayerView and that view doesn't have the gap but PlayerView has a gap before that view.
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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:background="#color/black"
android:fitsSystemWindows="false">
<View
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#color/amber_200"
/>
<com.google.android.exoplayer2.ui.PlayerView
android:id="#+id/videoView"
app:surface_type="texture_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:controller_layout_id="#layout/custom_player_controls" />
</androidx.appcompat.widget.LinearLayoutCompat>
This is what it looks like:
Edit: After a bit of playing around I figured out the widths of the screen and of the PlayerView are the same. So I checked margins and didn't see a difference but I see there is a padding. No idea whether that is coming from:
Doing this fixes my issue but I'm not sure if that is a good solution:
binding.videoView.setPadding(0,0,0,0)
Add this in your layout file (xml)
android:fitsSystemWindows="false"
And this in your Themes
<item name="android:windowLayoutInDisplayCutoutMode" tools:targetApi="p">shortEdges</item>
I have the following recycler view inside a Constraint Layout (very simple)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".activities.PokemonFavoritesActivity"
tools:showIn="#layout/activity_pokemon_favorites">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_pokemon_favorites"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
And here is the method where I initialize the Recycler View:
private void initializeRecyclerViewComponents() {
favoritesRecyclerView = findViewById(R.id.rv_pokemon_favorites);
layoutManager = new GridLayoutManager(this, 4);
favoritesRecyclerView.setLayoutManager(layoutManager);
pokemonFavoritesAdapter = new PokemonFavoritesAdapter(this, favoritePokemon);
pokemonFavoritesAdapter.setClickListener(this);
favoritesRecyclerView.setAdapter(pokemonFavoritesAdapter);
}
And here is the item_layout:
<?xml version="1.0" encoding="utf-8"?>
<com.mikhaellopez.circularimageview.CircularImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/civ_pokemon_favorite"
android:layout_width="100dp"
android:layout_height="100dp" />
However , as you can see in the image , the view is not "centered" (there is a lot of extra margin at the end of each row in comparison to the start)
How can I do to center the 4 columns in order to have the same start and end spacing ?
Try wrapping your item view in a linearlayout and center the image in this. That should fix it.
I want to use autosizing TextView for dynamic text content.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="350dp"
android:autoSizeTextType="uniform"
android:hint="hint"
android:text="some dynamic text" />
</LinearLayout>
This works so far:
But there is an issue if the dynamic text content is empty. The TextView wraps each character of the hint content to a new line:
I expect hint to behave like text. How to resolve this without hacks like setting text content to hint content if the former is empty.
The same event happened to me.
I defined this and it fixed it.
app:autoSizeStepGranularity="1dp"
I'd definitely set the minimum and maximum sizes together.
android:hint="no message"
app:autoSizeMaxTextSize="20sp"
app:autoSizeMinTextSize="1sp"
app:autoSizeStepGranularity="1sp"
app:autoSizeTextType="uniform"
layout.xml
<?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:layout_height="match_parent"
android:layout_width="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/show"
android:layout_width="match_parent"
android:layout_height="350dp"
android:hint="no message"
/>
</RelativeLayout>
MainActivity.java
TextView shows = findViewById(R.id.show);
TextViewCompat.setAutoSizeTextTypeWithDefaults(shows,
TextViewCompat.AUTO_SIZE_TEXT_TYPE_UNIFORM);
if(message.isEmpty()){
shows.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);
}else{
shows.setText(message);
shows.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
}
if you add this code please run the code.
I need to hide the visibility of my layout but because it's an included layout with the merge tag I'm not being able to do it. I'm using kotlin and keep getting a null pointer exception when trying to hide the view by using
layout_bookings_past.visibility = View.GONE
with this import
import kotlinx.android.synthetic.main.layout_bookings_past.*
but tried also with
import kotlinx.android.synthetic.main.fragment_bookings.*
That's my code:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/layout_bookings_past"
layout="#layout/layout_bookings_past" />
</android.support.constraint.ConstraintLayout>
And for the merge layout I have something like:
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
Thanks very much.
Ps: I've a sample app that simulates the structure of my project here
When you use <merge> tag, merged views are actually merged right into parent ConstraintLayout, so ViewGroup with id layout_bookings_past doesn't exist.
To make sure you can check your layout in Layout Inspector:
You can notice, that tv_past and rv_past are childs of ConstraintLayout that is root layout of FragmentBookings.
The solution would be to add actual ViewGroup instead of <merge> like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
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">
<TextView
android:id="#+id/tv_past"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Past bookings"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ll_buttons" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_past"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_past"
tools:itemCount="2"/>
</android.support.constraint.ConstraintLayout>
There's another option, if we assume, that we always include this layout to ConstraintLayout. You can add android.support.constraint.Group (more info) as a child of <merge> and reference it in your code. Like this:
<android.support.constraint.Group
android:id="#+id/merged_layout"
android:layout_width="0dp"
android:layout_height="0dp"
app:constraint_referenced_ids="tv_past,rv_past"/>
And just reference it as usually:
merged_layout.visibility = View.GONE
But I guess it is just easier to add ConstraintLayout as parent of the layout. Getting rid of redundant layouts is good, but not worth it in that case.
I am working in an Android app,In this I want to make set full width for bottom navigation tabs when I rotate the screen to landscape mode.
activit_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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/Conslayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:animateLayoutChanges="true"
android:layoutMode="opticalBounds"
android:background="?android:attr/windowBackground"
app:itemBackground="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation"
app:itemIconTint="#color/color_selector"
app:itemTextColor="#color/color_selector" />
</android.support.constraint.ConstraintLayout>
In this view I want to set the bottom navigation tabs to take full with like the Tab layout in the screen.
Thanks.
I have a BottomNavigationView that fits the whole screen in landscape mode, I believe the key is to set android:background and app:itemBackground to the same color.
Here is my BottomNavigationView that fits the whole screen in landscape mode:
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorBottomBar"
app:itemBackground="#color/colorBottomBar"
app:itemIconTint="#drawable/bottom_navigation_toolbar"
app:itemTextColor="#drawable/bottom_navigation_toolbar"
app:menu="#menu/bottom_bar"/>
EDIT:
I misunderstood your question, so basically you want to stretch your buttons, I copied your layout exactly, and in the folderres in the subfolder values I created a file named dimens.xml, inside this file put this:
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen name="design_bottom_navigation_item_max_width" tools:override="true">600dp</dimen>
<dimen name="design_bottom_navigation_active_item_max_width" tools:override="true">600dp</dimen>
</resources>
And just run your project again, the buttons will stretch. This is a quick solution, make sure that you check out this answer, because you need to take care of other screen sizes, the answer in this link gives a full and detailed solution.
Try this it works for me in mobile as well as tab. Just set your own colors.
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:animateLayoutChanges="true"
android:background="#color/light_blue_500"
android:layoutMode="opticalBounds"
android:theme="#style/BottomNavAppTheme"
app:itemBackground="#color/light_blue_500"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
app:menu="#menu/bottom_navigation_main" />
This is my nav_item_color_state.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/white" android:state_enabled="true" />
<item android:color="#color/colorPrimaryDark" android:state_enabled="false" />
</selector>
Need to set your width to
"match_parent"