E aí Pessoal, vamos a mais um tutorial android.
Desta vez vamos falar de marcadores do mapa, neste tutorial vamos aprender a colocar uma InfoWindowAdapter personalizada com uma imagem e texto, e que quando for clicado um vídeo vai ser carregado na própria activity do Mapa.
Para isso vamos considerar que você já tem um conhecimento prévio da api de mapas do Android, assim como funções básicas do android. Caso você não esteja familiarizado com a api de mapas, você pode começar por aqui : Introdução – API Google Maps v2 Android .
Vamos ao trabalho, o InfoWindowAdapter personalizado vai ser um layout que vai ser inflado ao invés daquele simples e padrão, então vamos criar este layout. Na pasta res>layout crie nosso marker.xml;
[sourcecode language=”java”]
<?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" >
<TextView
android:id="@+id/info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="15dp"
android:text=""
android:gravity="center" />
<ImageView
android:id="@+id/mapthumb"
android:layout_width="155dp"
android:layout_height="155dp"
android:layout_below="@+id/info"
android:layout_centerHorizontal="true"
android:paddingTop="20dp"
android:src="@drawable/google" />
</RelativeLayout>
[/sourcecode]
Esse layout vai ser constituído de um textview para receber o nome do lugar e uma imagem ilustrativa. No nosso caso vamos colocar uma imagem do próprio Google.
Agora vamos a activity do mapa e vamos chamar nosso InfoWindowAdapter personalizado, em qualquer lugar do onCreate faça da seguinte maneira :
[sourcecode language=”java”]
InfoWindowAdapter mark = new InfoWindowAdapter() {
@Override
public View getInfoWindow(Marker arg0) {
return null;
}
public View getInfoContents(Marker marker) {
View v = getLayoutInflater().inflate(R.layout.marker, null);
TextView info = (TextView) v.findViewById(R.id.info);
info.setText(marker.getSnippet());
getCurrentLocation();
return v;
}
};
map.setInfoWindowAdapter(mark);
map.setOnInfoWindowClickListener(new OnInfoWindowClickListener() {
@Override
public void onInfoWindowClick(Marker marker) {
Intent i = new Intent(MapActivity.this, VideoViewActivity.class);;
startActivity(i);
}
});
[/sourcecode]
No método getInfoContents(Marker marker) inflamos nosso layout e passamos um texto para o layout, assim como se
você quiser você pode alterar aquela imagem definida no layout. O método setOnInfoWindowClickListener define a
ao clicar no nosso balão de informação personalizado, no nosso caso estamos instanciando a nossa classe no qual
vai rodar um vídeo. Para isso temos de escrever a activity VideoViewActivity;
[sourcecode language=”java”]
public class VideoViewActivity extends Activity {
ProgressDialog pDialog;
VideoView videoview;
String VideoURL = "http://www.androidbegin.com/tutorial/AndroidCommercial.3gp";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.videoview_main);
videoview = (VideoView) findViewById(R.id.VideoView);
pDialog = new ProgressDialog(VideoViewActivity.this);
pDialog.setTitle("Android Video Streaming Tutorial");
pDialog.setMessage("Buffering…");
pDialog.setIndeterminate(false);
pDialog.setCancelable(false);
pDialog.show();
try {
MediaController mediacontroller = new MediaController(
VideoViewActivity.this);
mediacontroller.setAnchorView(videoview);
Uri video = Uri.parse(VideoURL);
videoview.setMediaController(mediacontroller);
videoview.setVideoURI(video);
} catch (Exception e) {
Log.e("Error", e.getMessage());
e.printStackTrace();
}
videoview.requestFocus();
videoview.setOnPreparedListener(new OnPreparedListener() {
public void onPrepared(MediaPlayer mp) {
pDialog.dismiss();
videoview.start();
}
});
}
}</pre>
<pre>[/sourcecode]
Seu respectivo layout :
[sourcecode language=”java”]</pre>
<pre><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"
android:background="#ffffff"
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=" .VideoViewActivity" >
<VideoView
android:id="@+id/VideoView"
android:layout_width="250dp"
android:layout_height="150dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout></pre>
<pre>[/sourcecode]
E não se esqueça de declarar no manifest, usando o estilo Theme.Holo.Dialog.NoActionBar pra dar um
efeito bacana, desse jeito :
[sourcecode language=”java”]
<activity
android:name="SeuPacote.VideoViewActivity"
android:label="@string/title_activity_video_view"
android:theme="@android:style/Theme.Holo.Dialog.NoActionBar" >
</activity></pre>
<pre>[/sourcecode]
E assim terminamos mais um tutorial, espero que tenham gostado. O resultado final fica assim :