J.Doe J.Doe - 4 months ago 12
Android Question

Show full map inside a SrcollView android

I'd like to use a

Google Map
inside a
ScrollView
but it seems harder than I thought. The first time I created everything and ran the app on a tablet. On the tablet, the UI looks good the map's size and the place is perfect. When I tried it a smaller device I realized that 80% size of the map is invisible. I can scroll down until the end of the screen but there is a big empty place instead of the rest of the map.

Check the xml file below:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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:fillViewport="true"
android:id="@+id/scrollView">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background"
android:id="@+id/relativeinfo1">

<View
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_above="@+id/titleinfo"
android:layout_toRightOf="@+id/imageinfo"/>


<TextView
android:id="@+id/titleinfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:textSize="20dp"
android:textStyle="bold"
android:textColor="#000000"
android:layout_toRightOf="@+id/imageinfo"
android:layout_marginLeft="20dp"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="phone"
android:id="@+id/mooobil"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="phone"
android:id="@+id/telefoneeo"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="email"
android:id="@+id/emailese"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="web"
android:id="@+id/honlapese"/>


<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:id="@+id/imageinfo"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"/>

<View
android:layout_width="wrap_content"
android:layout_height="15dp"
android:id="@+id/view1"
android:layout_below="@+id/imageinfo"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/cimtext"
android:textStyle="bold"
android:text="Cím: "
android:textSize="15dp"
android:textColor="#000000"
android:visibility="invisible"/>


<View
android:layout_width="wrap_content"
android:layout_height="10dp"
android:id="@+id/vonal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#FFD700" />

<View
android:layout_width="wrap_content"
android:layout_height="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:id="@+id/vonal2"
android:background="#FFD700"/>



<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"
tools:context=".MainActivity"
android:id="@+id/relativemaplayout"
android:clickable="true"
android:background="#000000">

<fragment
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
class="com.google.android.gms.maps.MapFragment" />


</RelativeLayout>
</RelativeLayout>




And check the java code here:

private ScrollView mScrollView;

public View onCreateView(LayoutInflater inflater, ViewGroup parent, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.activity_service_info,parent, false);
mScrollView = (ScrollView) v.findViewById(R.id.scrollView);
//transparentImageView = (ImageView) v.findViewById(R.id.transparent_image);
mScrollView.requestDisallowInterceptTouchEvent(true);

///// MAP /////
double glat = 0;
double glong = 0;


map = ((MapFragment) getActivity().getFragmentManager().findFragmentById(R.id.map)).getMap();

if((si.getGpslat().length()) != 0 && (si.getGpslong().length() != 0)){
glat = Double.parseDouble(si.getGpslat());
glong = Double.parseDouble(si.getGpslong());

final LatLng CEL = new LatLng(glat,glong);

if (map!=null){
MapsInitializer.initialize(getActivity());
map.addMarker(new MarkerOptions().position(CEL));
map.moveCamera(CameraUpdateFactory.newLatLngZoom(CEL ,18));
map.animateCamera(CameraUpdateFactory.zoomTo(18), 2000, null);
}

}else{
relmap.setVisibility(View.GONE);
}


transparentImageView.setOnTouchListener(new View.OnTouchListener() {

@Override
public boolean onTouch(View v, MotionEvent event) {
int action = event.getAction();
Log.d("action","down");
switch (action) {
case MotionEvent.ACTION_DOWN:
// Disallow ScrollView to intercept touch events.
mScrollView.requestDisallowInterceptTouchEvent(true);
Log.d("action","down");
return false;

case MotionEvent.ACTION_UP:
// Allow ScrollView to intercept touch events.
mScrollView.requestDisallowInterceptTouchEvent(false);
Log.d("action","up");
return true;

case MotionEvent.ACTION_MOVE:
mScrollView.requestDisallowInterceptTouchEvent(true);
Log.d("action","move");
return false;

default:
return true;
}
}
});

transparentImageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getActivity(), "anyád", Toast.LENGTH_SHORT).show();
}
});
return v;
}


Is it possible to show the full map in a
SrcollView
without using tablets?

This is how it's look like:

enter image description here

Answer

This was the solution:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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:fillViewport="true"
android:id="@+id/scrollView">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:id="@+id/relativeinfo1">


<View
    android:layout_width="wrap_content"
    android:layout_height="35dp"
    android:layout_above="@+id/titleinfo"
    android:layout_toRightOf="@+id/imageinfo"/>


<TextView
    android:id="@+id/titleinfo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:textSize="20dp"
    android:textStyle="bold"
    android:textColor="#000000"
    android:layout_toRightOf="@+id/imageinfo"
    android:layout_marginLeft="20dp"/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:autoLink="phone"
        android:id="@+id/cimtext"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:autoLink="phone"
    android:id="@+id/mooobil"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:autoLink="phone"
    android:id="@+id/telefoneeo"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:autoLink="email"
    android:id="@+id/emailese"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:autoLink="web"
    android:id="@+id/honlapese"/>


<ImageView
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:id="@+id/imageinfo"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="10dp"/>

<View
    android:layout_width="wrap_content"
    android:layout_height="15dp"
    android:id="@+id/view1"
    android:layout_below="@+id/imageinfo"/>


<View
    android:layout_width="wrap_content"
    android:layout_height="10dp"
    android:id="@+id/vonal"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="#FFD700" />

<View
    android:layout_width="wrap_content"
    android:layout_height="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:id="@+id/vonal2"
    android:background="#FFD700"/>

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="400dp"
    tools:context=".MainActivity"
    android:id="@+id/relativemaplayout"
    android:clickable="true">

    <fragment
        android:id="@+id/map"
        android:layout_width="wrap_content"
        android:layout_height="400dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="5dp"
        class="com.google.android.gms.maps.MapFragment" />

</RelativeLayout>


    <ImageView
        android:id="@+id/transparent_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@color/transparent"
        android:layout_alignTop="@+id/relativemaplayout"
        android:layout_alignBottom="@+id/relativemaplayout"
        android:layout_alignEnd="@+id/relativemaplayout"
        android:layout_alignRight="@+id/relativemaplayout"
        android:layout_alignLeft="@+id/relativemaplayout"
        android:layout_alignStart="@+id/relativemaplayout"/>
</RelativeLayout>

And you need to add this to the Fragment:

transparentImageView.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            int action = event.getAction();
            Log.d("action","down");
            switch (action) {
                case MotionEvent.ACTION_DOWN:
                    // Disallow ScrollView to intercept touch events.
                    mScrollView.requestDisallowInterceptTouchEvent(true);
                    Log.d("action","down");
                    return false;

                case MotionEvent.ACTION_UP:
                    // Allow ScrollView to intercept touch events.
                    mScrollView.requestDisallowInterceptTouchEvent(false);
                    Log.d("action","up");
                    return true;

                case MotionEvent.ACTION_MOVE:
                    mScrollView.requestDisallowInterceptTouchEvent(true);
                    Log.d("action","move");
                    return false;

                default:
                    return true;
            }
        }
    });