Google Maps in middle area of an Activity - android

I am working with Android studio 2.1.2 . I have checked around and most of the questions either use older versions of Android studio and some old classes that don't apply to my situation.
From file > new Project > I used option Google Maps Activity. I have not changed any of the default code that are in it. Its XML has a Fragment. Now is there a way to bring in this activity as it is into another Activity by means of a Fragment? Basically I am building an app that shows a map in the middle portion of the screen. This middle portion I hope would be a Fragment. The bottom and top area has some components for the user to interact.
I am not trying to make the map come up in a new Activity but rather remain in the middle portion of a particualar Activity.
Or do I just add new UI components to the default Google Maps Activity.
At first I had an idea of creating a Fragment(with its own .java file, XML Layout)then placing the map code in there and taking it over to the Activity where I want it. What would be the best way to get this done? I appreciate any help.

I have realised that either way one can arrive at the same result, a map inside an Activity, alongside other UI Components. Whether Google Maps Activity is used or if an Empty Activity is created and map code implemented in it. My code is included below. I chose an Empty Activity (Android 2.1.2) and then brought in the map code into the .java file and placed the map fragment with tag in the XML Layout of the activity.
The error was that I had used
android:name="com.google.android.gms.maps.MapFragment"
in the XML Layout but declared and initialised mapFragment(the object instance) with SupportMapFragment. The mix up came while copying and pasting code from the Google Documentation. As I was trying to update my post here I spotted the error. The correct thing to do is if you are using MapFragment(API level 12 and over) use it all through. If you decide to use SupportMapFragment(below API level 12) use SupportMapFragment all through.
The code below is the correction. Just in case anyone has the same issue.
XML Layout (activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.myapp.MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/teachers_link"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/parent_link"
android:layout_marginLeft="20dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="340dp"
android:orientation="vertical">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="135dp"
android:layout_marginTop="12dp"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/search_term" />
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:id="#+id/select_level"
android:entries="#array/select_level"></Spinner>
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/select_course"
android:entries="#array/select_course"></Spinner>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btn_search" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
.java file (MainActivity.java)
package name;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
public class MainActivity extends AppCompatActivity implements OnMapReadyCallback{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
}
#Override
public void onMapReady(GoogleMap map) {
map.addMarker(new MarkerOptions()
.position(new LatLng(0, 0))
.title("Marker"));
}
}

Related

Android: GoogleMaps marker details fragment

I'm a beginner in Android and I'm trying to achieve something similar to Google Maps App. When I press on a marker I want a new fragment with details to appear on top of my SupportMapFragment, like this:
How can I achieve that?
Is that a default layout for that fragment?
Is that even a fragment or just a modified info window?
yes you can easily achieve it using this lib, its support 2 layouts when minimized and stretched, I have implemented similar behavior following google maps app as getting data like below and setting it in layout
here is link
and sample usage is
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoPanelHeight="68dp"
sothree:umanoShadowHeight="4dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Main Content"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|top"
android:text="The Awesome Sliding Up Panel"
android:textSize="16sp" />
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
I figured it out. What I need is called a Bottom Sheet Dialog. Here is a very useful guide that I used as source of inspiration.
Step 1
Implement Material Components Library in `app.gradle`:
implementation 'com.google.android.material:material:1.3.0'
Step 2
In res->layout create a layout of your choice. Mine looks like this:
<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="200dp"
android:layout_gravity="bottom">
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Rent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The layout is aligned to bottom.
Step 3
Define a method that instantiate the BottomSheetDialog:
private void showBottomSheetDialog() {
final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(getContext());
bottomSheetDialog.setContentView(R.layout.MY_LAYOUT_NAME);
AppCompatButton btn = bottomSheetDialog.findViewById(R.id.btn_view);
bottomSheetDialog.show();
}
Step 4
This step is extra, just if you want to see how to call the BottomSheetDialog by pressing on a GoogleMap marker.
Make sure that the class that handles the MapSupportFragment implements OnMapReadyCallback, GoogleMap.OnMarkerClickListener and (if you need clusters of markers) ClusterManager.OnClusterItemClickListener. Override the necessary methodes:
#Override
public boolean onMarkerClick(Marker marker) {
showBottomSheetDialog();
return false;
}
If you need clusters, in #onMapReady() dont't forget to add:
map.setOnCameraIdleListener(clusterManager);
map.setOnMarkerClickListener(clusterManager);
clusterManager.setOnClusterItemClickListener(this);
Voila!

How do I add a button on fragment layout?(Google maps Android studio)

This is my maps_activity.xml file and when I try to add a button field I get an error Multiple root tags.
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
When I try to add
<Button
android:id="#+id/button"
android:layout_width="146dp"
android:layout_height="wrap_content"
android:text="Open Store" />
I get an error message Multiple root tags.
My MapsActivity class up until the onCreate method
public class MapsActivity extends AppCompatActivity
implements OnMapReadyCallback,
GoogleApiClient.ConnectionCallbacks,
GoogleApiClient.OnConnectionFailedListener,
com.google.android.gms.location.LocationListener{
GoogleMap mGoogleMap;
SupportMapFragment mapFrag;
LocationRequest mLocationRequest;
GoogleApiClient mGoogleApiClient;
Location mLastLocation;
Marker mCurrLocationMarker;
Marker marker;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_maps);
getSupportActionBar().setTitle("Map Location Activity");
mapFrag = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
mapFrag.getMapAsync(this);
}
Thank you!
Each XML layout file can only have one "root" tag. Often this will be some sort of ViewGroup; common examples include LinearLayout, FrameLayout, ConstraintLayout, and RelativeLayout.
The right one to choose depends on what your desired goals are. Considering that you've mentioned only a Google map and a Button, the question to ask is whether you want these two things to appear next to each other (or above/below each other) or on top of each other.
If you want them to be above/below each other, choose LinearLayout, and write something like this:
<?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">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:id="#+id/button"
android:layout_width="146dp"
android:layout_height="wrap_content"
android:text="Open Store"/>
</LinearLayout>
If instead you want the button to float on top of the map, change LinearLayout to FrameLayout (and remove the orientation attribute, since framelayouts don't have an orientation).
Either way, you have to adhere to the rule that all layouts can only have a single root. That doesn't mean that all layouts can only have one view, but as soon as you have more than one, you have to figure out a good box to put them all in.
try relative or linear layout as a parent and add fragment and button inside parent layout like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.commonutils.MapsActivity" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GO" />
</LinearLayout>

Android Screen Slide action

I am just starting to learn android java in Android Studio.
And I have bum into a question related to screen slide action.
I wanted to create a screen slide action that allow me to have additional options beside my basic layout's option, after the chose of the additional option I will return to my basic layout.
The perfect example that could represent my idea would be the Google Calculator, when user need advance Math symbol, it has a green layout that show up while user sliding the right's edge to the left, and after user choose one Math Symbol, it will return to its basic layout.
This is the screen shot of the calculator,photo belong to the internet
I am not very good at explaining, I hope you guys understand what I am trying to approach.
I have it working using SlidingPaneLayout. Let me know if this works.
XML
<android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/SlidingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/base"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2196F3"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello SlidingPaneLayout!" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:background="#F44336"
android:elevation="50dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello SlidingPaneLayout!" />
</RelativeLayout>
</android.support.v4.widget.SlidingPaneLayout>
Activity
import android.os.Bundle;
import android.support.v4.content.ContextCompat;
import android.support.v4.widget.SlidingPaneLayout;
import android.support.v7.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SlidingPaneLayout slidingPaneLayout = (SlidingPaneLayout) findViewById(R.id.SlidingPanel);
slidingPaneLayout.setSliderFadeColor(ContextCompat.getColor(this, android.R.color.transparent));
slidingPaneLayout.openPane();
}
}

How to Load PreferenceFragment in Fragment

I have divided main activity in two Fragments,
the upper Portion loads the Button from xml,
& i want to load PreferenceFragment in thr Lower Portion ,
How to do that ??
I tried calling the Settings.class which extends PreferenceFragment directly using the following code in my Lower Portion Fragment
getFragmentManager().beginTransaction().replace(android.R.id.content,new Settings ()).commit();
That calls the PreferenceFragment but it Overlaps the upper Portion,
I am trying to achieve something like this
You can declare the fragments in the activity's layout file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment android:name="com.example.news.ArticleListFragment"
android:id="#+id/list"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
<fragment android:name="com.example.news.ArticleReaderFragment"
android:id="#+id/viewer"
android:layout_weight="2"
android:layout_width="0dp"
android:layout_height="match_parent" />
</LinearLayout>

Disappearing Fragments (Dettached without request)

I have a simple layout, which contains two fragments. One of the two fragments periodically will replace itself, the other one will remain consistent for the whole time I am using it. For some reason, removing/adding it works just fine, but replacing it causes the other fragment to disappear. I know from debug code that the Fragment simply gets detached, for no apparent reason. Why might this be? If I use the latter, I have to be extremely careful to ensure that the QuestionArea is gone first...
These lines of code come from the in the FragmentActivity class.
fragManager.beginTransaction()
.replace(R.id.QuestionArea, getQuestionPostView(), "QuestionArea")
.commit();
fragManager.beginTransaction()
.remove(fragManager.findFragmentById(R.id.QuestionArea))
.add(R.id.QuestionArea, getQuestionPostView(), "QuestionArea")
.commit();
Here is what I hope is the other relevant code:
XML of the main display:
<?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:layout_gravity="center"
android:orientation="vertical" >
<com.pearsonartphoto.FontFitTextView
android:id="#+id/Name"
style="#style/bigText"
android:background="#color/blue"
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"/>
<TextView android:id="#+id/Instructions"
style="#style/medText"
android:layout_width="fill_parent"
android:layout_below="#id/PowerName"
/>
<fragment
android:name="com.pearsonartphoto.NumberDisplay"
android:gravity="center"
android:id="#+id/QuestionArea"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/Instructions"/>
<fragment
android:name="com.pearsonartphoto.AbstractAnswerFragment"
android:id="#+id/AnswerArea"
style="#style/bigText"
android:gravity="center"
android:layout_below="#+id/QuestionArea"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="530sp"/>
</RelativeLayout>
Part of FragmentActivity which sets up the AnswerArea
protected void setAnswerPad(AbstractAnswerFragment pad)
{
fragManager.beginTransaction()
.replace(R.id.AnswerArea, pad, "AnswerArea")
.commit();
fragManager.executePendingTransactions();
answerPadToAnswer=pad.getAnswerKey();
}
First time (From FragmentActivity) that the QuestionArea is set.
fragManager.beginTransaction()
.replace(R.id.QuestionArea, getQuestionPreView(), "QuestionArea")
.commit();
The functions getPostView() and getPreView()
#Override
Fragment getQuestionPreView() {
NumberDisplay display=(NumberDisplay)manager.findFragmentById(R.id.QuestionArea);
display.setNumber(-1);
return display;
}
#Override
Fragment getQuestionPostView() {
NumberDisplay display=(NumberDisplay)manager.findFragmentById(R.id.QuestionArea);
display.setNumber(answer);
return display;
}
Your problems, most likely, come from trying to change static fragments(fragments declared in the xml layout) at runtime, which you shouldn't do. If you plan to replace, remove etc those fragments in your FragmentActivity you should put instead a wrapper layout(like a FrameLayout) in their places in the xml layout and use that container for future fragment transactions. Check this answer from one of the Android engineers.
There were a few things that needed to be done to make this work:
The key thing was to change my main XML code to FrameLayout.
I had to create some of the smaller fragments, when I wasn't having to create them before.
New main XML code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical" >
<com.pearsonartphoto.FontFitTextView
android:id="#+id/PowerName"
style="#style/bigText"
android:background="#color/blue"
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"/>
<TextView android:id="#+id/Instructions"
style="#style/medText"
android:layout_width="fill_parent"
android:layout_below="#id/PowerName"
/>
<FrameLayout
android:gravity="center"
android:id="#+id/QuestionArea"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/Instructions"/>
<FrameLayout
android:id="#+id/AnswerArea"
style="#style/bigText"
android:gravity="center"
android:layout_below="#+id/QuestionArea"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="530sp"/>
</RelativeLayout>

Categories

Resources