Mapbox is not fully showing in viewpager in android - android

I'm using mapbox in my application, normal fragment page full mapview showing,but when using viewpager in that fragment, mapview is not showing full in bottom its showing black color in version 8.0.0, below versions is showing properly.
Here is an image, showing how it looks.
tabs.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_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/rlay"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:id="#+id/appBarLayout">
<android.support.design.widget.TabLayout
android:id="#+id/gs_tabLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/lightgray"
app:tabTextColor="#color/onegray"
app:tabSelectedTextColor="#color/onegray"
android:minHeight="?attr/actionBarSize"
app:tabTextAppearance="#style/MyTabStyle"
android:scrollbars="vertical"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_below="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/gs_viewPager">
</android.support.v4.view.ViewPager>
</RelativeLayout>
</RelativeLayout>
fragmenta.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"
xmlns:mapbox="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.mapbox.mapboxsdk.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
mapbox:mapbox_cameraTargetLat="12.973520"
mapbox:mapbox_cameraTargetLng="77.633006"
mapbox:mapbox_cameraZoom="5"
mapbox:mapbox_styleUrl="mapbox://styles/mapbox/streets-v9"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1">
</com.mapbox.mapboxsdk.maps.MapView>
</android.support.constraint.ConstraintLayout>
Note: I don't know whether viewpager is problem or not, without tabs means its showing full map view. Please someone help me.

I know this can be a little late but when I faced the same problem, I did a little bit of reading and research to find out that the map when displayed through bootstrap Modal, angular, etc. shows default 400px width and will not take the previous container's width as it is not aware of it and hence its a good practice to use map.resize() method inside the map.on('load',function(){}) in the end of it.
While using bootstrap modal
map.on('load', function() {
// some code before the resize option
$('#myModal').on('shown.bs.modal', function() {
map.resize();
});
}
where my #myModal is the id of the Div that contains my bootstrap modal.
Hope this helps someone who is struggling with the same issue.

Related

Failed making scrollable a ConstraintLayout in an Android Fragment

Recently I tried to create a fragment and the LinearLayout is bigger than the screen and I need to use the ScrollView. I've tried different ways reading other questions in Stackoverflow and I couldn't resolve the issue.
This is my XML Code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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="wrap_content">
<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"
tools:context=".ui.configuration.ConfigurationFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:ignore="MissingConstraints">
<TextView
android:id="#+id/text_configuration_first_tittle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/configuration_first_title"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Any idea?
Resolved... The scrollview was working.
I only need to add marginBotton with enough height size to considere the Botton Navigation Bar

Edittext keeps scrolling to its position inside RecyclerView

Prerequisites
main_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarFadeDuration="2"
android:scrollbars="vertical|horizontal">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.core.widget.NestedScrollView>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
recyclerview_layout.xml
<?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">
<...>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</LinearLayout>
another_recyclerview_layout.xml
<?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="wrap_content"
android:divider="#drawable/divider_default_margin"
android:orientation="vertical"
android:showDividers="middle">
<...>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/anotherRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<...>
</LinearLayout>
edittext_item_layout.xml
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/formTextClearButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/textInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
<...>
</androidx.constraintlayout.widget.ConstraintLayout>
Problem description
I am adding at runtime a recyclerview_layout.xml to the container inside main_layout.xml. The recyclerview_layout.xml sometimes contains another_recyclerview_layout.xml, which has a RecyclerView that has multiple view types, one of which is represented by edittext_item_layout.xml. When the latter exists in another_recyclerview_layout.xml and recyclerview_layout.xml is populated with some other items, the whole layout has a weird scrolling behavior, at the time the user taps on one of the TextInputEditTexts. It's like it tries to snap to the focused TextInputEditText and the user cannot scroll away from that view anymore. (See gif below)
Scrolling bug
Already tried solutions
Setting android:focusable="true" and android:focusableInTouchMode="true" to the direct child of the NestedScrollView, as you can already see in recyclerview_layout.xml. Also tried to add these properties to all the other containers (cry)
Setting android:descendantFocusability="blocksDescendants" to the parent of anotherRecyclerView. This solution does not work weel for me, since I need the TextInputEditText to be fully functional.
Listening to SoftKeyboard events and clearing focus as soon as the keyboard hides. This solution rises 2 other issues:
loses scroll position
the layout is still buggy, if the user tries to scroll while the keyboard is visible
Libraries
ConstraintLayout: 2.0.4
RecyclerView: 1.2.0
Material: 1.2.1
Help!
I am running out of ideas, any help is highly appreciated. Thank you!

Android - Recyclerview not starting from the top

I've already seen similar problem and tried all kind of solutions, this is what I ended up with:
layoutManagerMemes = LinearLayoutManager(
this#MainActivity,
LinearLayoutManager.VERTICAL,
false
)
recyclerViewMemes.setHasFixedSize(false)
recyclerViewMemes.adapter = adapterMemes
recyclerViewMemes.layoutManager = layoutManagerMemes
recyclerViewMemes.scrollToPosition(0)
The XML:
<?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"
android:background="#000000"
android:orientation="vertical">
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.NoActionBar">
</androidx.appcompat.widget.Toolbar>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerViewMemes"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</RelativeLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Could the issue be the images that are loaded after RecyclerView is set?
Ignore this: Stackoverflow demands some more text, Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do
Apparently the only way to avoid it is to know the image dimensions and set them before the image is loaded by calculating the ratio

Toolbar in the wrong location on BottomNavigationView

I'm building an app and when I load the view with the BottomNavigationView, I have odd issues all the time, sometimes, I have an extra space and other times, the toolbar is wrongly located, for example:
With bottom navigation:
Without bottom navigation:
This is my code for the 1st image:
<?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"
android:background="#android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#menu/toolbar_recipe" />
<FrameLayout
android:id="#+id/content_frame"
android:layout_height="0dp"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_nav_menu"
app:labelVisibilityMode="unlabeled"
app:itemBackground="#color/colorPrimary"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color" />
</LinearLayout>
</RelativeLayout>
Toolbar:
<?xml version="1.0" encoding="UTF-8" ?>
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_recipe"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/ToolBarStyle"
android:minHeight="?android:attr/actionBarSize"
android:background="#color/colorPrimary"/>
And this is how it behaves with the CoordinatorLayout, after I set the paddingTop as ?attr/actionBarSize the FrameLayout moved some space, but it's still wrongly located.
With CoordinatorLayout:
<?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"
android:background="#android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_above="#+id/bottom_navigation">
<include
layout="#menu/toolbar_recipe" />
<FrameLayout
android:id="#+id/content_frame"
android:paddingTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_nav_menu"
app:labelVisibilityMode="unlabeled"
app:itemBackground="#color/colorPrimary"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color" />
</RelativeLayout>
Without that addition, it just stays behind. I'm working in Android 8+, but I don't think it's the issue and I'm out of ideas how to coordinate that situation. Has anyone experienced it?
Thanks for any comment, especially of why it's happening since I cannot understand it.
I found the answer based on this line:
android:fitsSystemWindows="true"
I needed to add it to the root element more or less like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#android:color/white"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
And here is a description of the property:
System windows are the parts of the screen where the system is drawing
either non-interactive (in the case of the status bar) or interactive
(in the case of the navigation bar) content.
Most of the time, your app won’t need to draw under the status bar or
the navigation bar, but if you do: you need to make sure interactive
elements (like buttons) aren’t hidden underneath them. That’s what the
default behavior of the android:fitsSystemWindows="true" attribute
gives you: it sets the padding of the View to ensure the contents
don’t overlay the system windows.
I found it here:
Why would I want to fitsSystemWindows?

Android - EditText keyboard hides half of listview, even when the keyboard gets closed

So I have a listview with an edittext on top of it allowing the user to search for stuff in the listview. Unfortunately, I'm coming across a weird issue where upon opening the keyboard by clicking upon the EditText, the ListView shrinks to the screen that isn't blocked by the keyboard. This is fine, but when I close the keyboard, the ListView remains the same half-screen size and the space where the keyboard was is now totally blank and useless.
Does anybody know how to fix this issue? It's causing me a lot of grief and I can't seem to figure it out.
Here is my fragment layout:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="30dp">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/word_search"
android:inputType="text"
android:layout_gravity="center"
android:imeOptions="actionSearch"
android:hint="Enter a word you'd like to search"/>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/words_list"/>
</LinearLayout>
This fragment is contained in this viewpager layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:elevation="6dp"
app:rippleColor="#33FFFFFF"
app:borderWidth="0dp"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="#drawable/save"/>
</android.support.design.widget.CoordinatorLayout>
Does anybody have any clue what's happening? Ideally, I would like to make the ListView's size static so it does not get redrawn when the keyboard is pulled up, but I would accept the listview resizing back to normal when the keybaord is closed too.
Thanks!

Categories

Resources