Android studio Java - Bottom Sheet view over maps - java

new to android programming , java , I'm trying to create a "simple.." BottomSheet that have to appear when I click on one of my location. Actually I've been able to create my map and load my point data. I have my map in a fragment..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
/>
</RelativeLayout>
I then created my BottomSheet looking at online tutorial.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinaCoordinatorLayout 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="com.chargesplit.android.activities.MainActivity">
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#android:color/holo_green_light"
android:clipToPadding="true"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ciao"
android:textColor="#android:color/white"
android:textSize="24sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="ciao2"
android:textColor="#android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinaCoordinatorLayout>
Finally, inside my Main Activity, I managed to reference my bottom sheet, but probably due to inexperience I'm every time getting error on this line:
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
-> View nestedScrollView = (View) findViewById(R.id.nestedScrollView);
mBottomSheetBehaviour = BottomSheetBehavior.from(nestedScrollView);
I'm always get this error and I'm probably missing a piece here... could someone try to drive me in te right direction to understanding what's wrong?
java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.ViewGroup$LayoutParams android.view.View.getLayoutParams()' on a null object reference


This error happens because your activity is unable to locate your bottom sheet view, why that? because your bottom sheet view isn't included in the activity_main.xml layout.
In other words, Your MainActivity.java can only look at activity_main.xml, but it still has no idea about the other xml file of your bottom sheet.
To solve this: replace your code in activity_main layout with
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinaCoordinatorLayout
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="com.chargesplit.android.activities.MainActivity">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"/>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#android:color/holo_green_light"
android:clipToPadding="true"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ciao"
android:textColor="#android:color/white"
android:textSize="24sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="ciao2"
android:textColor="#android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinaCoordinatorLayout>
Caveat: To make your layouts look neat, you can separate your bottom sheet view into a separate layout, so you can put your <android.support.v4.widget.NestedScrollView> into say bottom_sheet.xml, and then reference it from the activity_main.xml with
<include layout="#layout/bottom_sheet" />
Wish that helps you out.. Should you need further help, please let me know

Related

How to use BottomAppBar with BottomNavigationView inside in a Single Activity App Architecture?

I want to add a FloatingActionButton in the middle of BottomAppBar with curve below.
So i Added tried to design the MainActivity like below. I maintained Single Activity Architecture in this app.
Now, I have faced two problems.
If I want to set Visibility:gone for bottomappbar & floatingActionButtonin any particular fragment than both are gone but created an empty view. Like the screen shot. How can I remove that empty view?
I want to make transparent the gap between FloatingActionButton & BottomAppBar. But failed to do that.
This is the code below of my MainActivity's XML.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar" />
</com.google.android.material.appbar.AppBarLayout>
<fragment
android:id="#+id/my_nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
app:defaultNavHost="true"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
app:navGraph="#navigation/navigation_graph" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:fabCradleMargin="10dp"
app:elevation="0dp"
app:fabCradleRoundedCornerRadius="10dp"
app:fabCradleVerticalOffset="10dp">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="16dp"
android:background="#android:color/transparent"
app:menu="#menu/navigation_menu" />
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_dashboard_add"
app:backgroundTint="#color/colorDashboardFloatingButton"
app:tint="#color/colorWhite"
app:layout_anchor="#id/bottomAppBar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Here are the screenshots.

How to keep the floatingActionButton fixed at is original position when scrolling the recyclerview

I need help to keep the fab shown in pics at a fixed position when scrolling up or down i cant find anything on google as most search results return information on hiding the fab when scrolling
Here is my 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/accent"> <android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/accent"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="1dp"
/>
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/addmorefab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="#dimen/fab_marginBottom"
android:layout_marginRight="#dimen/fab_marginRight"
android:clickable="true"
app:backgroundTint="#color/primary"
app:srcCompat="#drawable/ic_action_new"
app:layout_anchor="#id/listView"
app:layout_anchorGravity="bottom|right|end"
/></android.support.constraint.ConstraintLayout>
I even tried to make two constraint layouts it didnt work
I also tried using recyclerView.setNestedScrollingEnabled(false);
It worked but it was limiting the scrolling of the recyclerview.
On the second picture i want the fab to remain fixed where it is not scrolling

You can use this view if you want your bright button to remain fixed while scrolling through the recycler.
I used Android X libraries and you can use lower version libraries.
<?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">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/addmorefab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="18dp"
android:layout_marginBottom="18dp"
android:clickable="true"
app:backgroundTint="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#android:drawable/ic_input_add" />
</androidx.constraintlayout.widget.ConstraintLayout>

using xml layout and calling it in java code

I have created how I want part of my app to look with 3 xml layout files and Im wondering how I can use it with my java UI code (the java code is an IMGUI code). I am trying to figure out how I can use my xml layout to put my java UI code in the red space (as show in the image) ...
The main xml is below.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="120dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bar_color">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/activated_btn_color"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:layout_gravity="bottom">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/activated_btn_color">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/brighness_icon"
android:layout_gravity="center"
android:tint="#color/white"
android:layout_marginTop="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btn_txt"
android:textSize="12sp"
android:textColor="#color/white"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
I did try this in java, however its just placing the IMGUI View inside a relative layout, which I guess it fine, but how can I put inside the red space in my xml drawing above?
RelativeLayout myLayout = new RelativeLayout(this);
myLayout.addView(myIMGUI);
Do I have to code everything I did in xml in java to make this work?
Hopefully it makes sense what I am asking :)
Thank you!!

How to get a whole screen in an activity to scroll when a scrollable recyclerView imakes up only half of the phone screen

I want my whole screen to scroll but only my recycler will scroll at the moment. This occurs despite all elements being placed in a linear layout inside a Scroll View.
Any ideas where the error is? Here's the relevant code.
<?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"
tools:context=".NoodleDetailActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/noodleImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/border_bottom"
android:fontFamily="sans-serif-smallcaps"
android:hapticFeedbackEnabled="false"
android:padding="30dp"
android:text="TextView"
android:textSize="18sp" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/extras_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#F2F2F2"
android:padding="0dp" />
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
This is what it looks visually.
demo appearance

Found out: it seems best practice is to set the recyclerView to be the whole layout and make it contain multiple view types.
I won't be using a nested scroll view.

why cannot i see a textView above another view in relative layout?

I have this xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="8dp"
android:paddingRight="8dp" >
<TextView
android:id="#+id/errorMsg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/pointsText"
android:visibility="gone"/>
<TextView
android:id="#+id/pointsText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/offers_list"
android:text="you have 100 points"
android:visibility="visible"/>
<ListView
android:id="#+id/offers_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawSelectorOnTop="false"
android:dividerHeight="0dp"
android:divider="#00000000"/>
</RelativeLayout>
Yet I cannot see pointsText in my eclipse graphical previewer.
What am I missing?

You have
android:layout_above="#+id/offers_list"
for your TextView but you don't have any positioning for your ListView. Since RelativeLayouts place their children at the top-left by default, your ListView would be at the top and there would be nowhere above it to place your TextView.
Try removing that property from your TextView and add
android:layout_below="#id/pointsText"
on your ListView.
I just tested this and it does work. I can see the pointsText TextView above the list. So, you will want to do something different with your error TextView or you will quite possibly have the same issue with that when you want to change its visibility.
A bit off-topic
RelativeLayout doesn't have an orientation property so that doesn't do you any good but doesn't do you any real harm either.

When you use relative layouts, layout elements lay upon each other. To prevent that you should place element Relatively to other layouts. make your code like this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="8dp"
android:paddingRight="8dp" >
<TextView
android:id="#+id/errorMsg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/pointsText"
android:visibility="gone"/>
<TextView
android:id="#+id/pointsText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/offers_list"
android:text="you have 100 points"
android:visibility="visible"
android:layout_below="#+id/errorMsg"/>
<ListView
android:id="#+id/offers_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawSelectorOnTop="false"
android:dividerHeight="0dp"
android:divider="#00000000"
android:layout_below="#+id/pointsText"/>
</RelativeLayout>
Now you will be able to see your all layouts

try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="8dp"
android:paddingRight="8dp" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/errorMsg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"/>
<TextView
android:id="#+id/pointsText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="you have 100 points"
android:visibility="visible"/>
</LinearLayout>
<ListView
android:id="#+id/offers_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/linearLayout1"
android:divider="#00000000"
android:dividerHeight="0dp"
android:drawSelectorOnTop="false" />
</RelativeLayout>

If this is a fragment inside an activity, you may want to check the nesting of say, the AppBarLayout and the layout into which you add the fragment

Categories

Resources