En este Ejemplo crearemos un Slider de Ventanas la cual nos permitirá mostrar 4 ventanas con información.
Nota: las ventanas no tienen acciones ya que solo son visuales.
Iniciamos:
Paso 1: Creamos nuestro proyecto android el cual yo llame EjemploSliderVentanas en el cual creamos una actividad del tipo EmptyActivity que llamaremos MainActivity.
Paso 2: En nuestra Ventana visual pondremos el siguiente código:
<?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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
android:background="#d1395c"
tools:context="com.profeluismitre.ejemplossliderylist.SliderVentanasNoAccionesActivity">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="@+id/layoutDots"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:gravity="center"
android:orientation="horizontal"></LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:alpha=".5"
android:layout_above="@id/layoutDots"
android:background="@android:color/white" />
<Button
android:id="@+id/btn_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@null"
android:text="Siguiente"
android:textColor="@android:color/white" />
<Button
android:id="@+id/btn_skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@null"
android:text="Ignorar"
android:textColor="@android:color/white" />
</RelativeLayout>
si notaste en esta ocasiona utilizamos el RelativeLayout ya que necesitamos mostrar las ventanas y los botones en la parte superior.
Paso 3: ahora toca crear las 4 ventanas xml. estas las crearemos dando Clic derecho sobre la carpeta layout de nuestro proyecto, NEW>XML>LAYOUT XML los cuales llamaremos como ventana1, ventana2, ventana3, ventana4 y sus códigos serian los siguientes.
nota: para estas ventanas necesitas imágenes de dejo el link con las que yo utilice:
ventana1.
<?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:background="#f64c73">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_food" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hola Comida"
android:textColor="@android:color/white"
android:textSize="30dp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:text="El Camino hacia la Comida"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="16dp" />
</LinearLayout>
</RelativeLayout>
ventana2.
<?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:background="#20d2bb">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_movie" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Boletos de Pelicula"
android:textColor="@android:color/white"
android:textSize="30dp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:text="Libro de Peliculas para la Familia"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="16dp" />
</LinearLayout>
</RelativeLayout>
ventana3.
<?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:background="#3395ff">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_discount" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Grandes Descuentos"
android:textColor="@android:color/white"
android:textSize="30dp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:text="Los Mejores Descuentos"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="16dp" />
</LinearLayout>
</RelativeLayout>
ventana4
<?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:background="#c873f4">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_travel" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Viajando por el Mundo"
android:textColor="@android:color/white"
android:textSize="30dp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:text="Compra tus Boletos para Viajar por el Mundo"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="16dp" />
</LinearLayout>
</RelativeLayout>
Paso 4: Ahora necesitaremos una serie de colores y un arreglo de colores para estar cambiando en las ventanas, para ello nos dirigiremos a la carpeta values de nuestro proyecto en la cual se encuentra un archivo xml llamado colors.xml en el cual agregaremos lo siguiente dentro de la etiqueta <resources></resources>:
<!-- dots inactive colors -->
<color name="dot_dark_screen1">#d1395c</color>
<color name="dot_dark_screen2">#14a895</color>
<color name="dot_dark_screen3">#2278d4</color>
<color name="dot_dark_screen4">#a854d4</color>
<!-- dots active colors -->
<color name="dot_light_screen1">#f98da5</color>
<color name="dot_light_screen2">#8cf9eb</color>
<color name="dot_light_screen3">#93c6fd</color>
<color name="dot_light_screen4">#e4b5fc</color>
<array name="array_dot_active">
<item>@color/dot_light_screen1</item>
<item>@color/dot_light_screen2</item>
<item>@color/dot_light_screen3</item>
<item>@color/dot_light_screen4</item>
</array>
<array name="array_dot_inactive">
<item>@color/dot_dark_screen1</item>
<item>@color/dot_dark_screen2</item>
<item>@color/dot_dark_screen3</item>
<item>@color/dot_dark_screen4</item>
</array>
Paso 5: ahora abrimos nuestra MainActivity para empezar a armar nuestra aplicación:
Paso 6: crearemos los siguientes objetos en nuestra actividad:
private ViewPager visualizadorPaginas; private AdaptadorPaginas adaptadorPaginas; private LinearLayout dotsLayout; private TextView[] dots; private int[] layouts; private Button btnSkip, btnNext;
Paso 7: Inicializamos los objetos dentro del método onCreate():
visualizadorPaginas = (ViewPager) findViewById(R.id.view_pager);
dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
btnSkip = (Button) findViewById(R.id.btn_skip);
btnNext = (Button) findViewById(R.id.btn_next);
layouts = new int[]{
R.layout.ventana1,
R.layout.ventana2,
R.layout.ventana3,
R.layout.ventana4};
Paso 8: mandamos llamar los metodos:
addBottomDots(0); cambiarColorBarra();
Paso 9: Inicializamos el adaptador y lo agregamos al visualizador de paginas, y asignamos acciones a los botones:
adaptadorPaginas = new AdaptadorPaginas();
visualizadorPaginas.setAdapter(adaptadorPaginas);
visualizadorPaginas.addOnPageChangeListener(cambiadorDePaginasListener);
btnSkip.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
btnNext.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// checking for last page
// if last page home screen will be launched
int current = getItem(+1);
if (current < layouts.length) {
// move to next screen
visualizadorPaginas.setCurrentItem(current);
} else {
// launchHomeScreen();
}
}
});
Paso 10: por ultimo agregamos el siguiente codigo, que es el adaptador de las ventanas..
ViewPager.OnPageChangeListener cambiadorDePaginasListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
addBottomDots(position);
// changing the next button text 'NEXT' / 'GOT IT'
if (position == layouts.length - 1) {
// last page. make button text to GOT IT
btnNext.setText("Iniciar");
btnSkip.setVisibility(View.GONE);
} else {
// still pages are left
btnNext.setText("Siguiente");
btnSkip.setVisibility(View.VISIBLE);
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
};
private void addBottomDots(int currentPage) {
dots = new TextView[layouts.length];
int[] colorsActive = getResources().getIntArray(R.array.array_dot_active);
int[] colorsInactive = getResources().getIntArray(R.array.array_dot_inactive);
dotsLayout.removeAllViews();
for (int i = 0; i < dots.length; i++) {
dots[i] = new TextView(this);
dots[i].setText(Html.fromHtml("•"));
dots[i].setTextSize(35);
dots[i].setTextColor(colorsInactive[currentPage]);
dotsLayout.addView(dots[i]);
}
if (dots.length > 0)
dots[currentPage].setTextColor(colorsActive[currentPage]);
}
private int getItem(int i) {
return visualizadorPaginas.getCurrentItem() + i;
}
private void cambiarColorBarra() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
}
}
public class AdaptadorPaginas extends PagerAdapter {
private LayoutInflater layoutInflater;
public AdaptadorPaginas() {
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(layouts[position], container, false);
container.addView(view);
return view;
}
@Override
public int getCount() {
return layouts.length;
}
@Override
public boolean isViewFromObject(View view, Object obj) {
return view == obj;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
View view = (View) object;
container.removeView(view);
}
}
Bueno seria todo, te dejo el codigo de como quedaria la actividad completa:
package com.profeluismitre.ejemplosliderventanas;
import android.content.Context;
import android.graphics.Color;
import android.os.Build;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Html;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private ViewPager visualizadorPaginas;
private AdaptadorPaginas adaptadorPaginas;
private LinearLayout dotsLayout;
private TextView[] dots;
private int[] layouts;
private Button btnSkip, btnNext;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
visualizadorPaginas = (ViewPager) findViewById(R.id.view_pager);
dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
btnSkip = (Button) findViewById(R.id.btn_skip);
btnNext = (Button) findViewById(R.id.btn_next);
layouts = new int[]{
R.layout.ventana1,
R.layout.ventana2,
R.layout.ventana3,
R.layout.ventana4};
// adding bottom dots// making notification bar transparent
addBottomDots(0);
cambiarColorBarra();
adaptadorPaginas = new AdaptadorPaginas();
visualizadorPaginas.setAdapter(adaptadorPaginas);
visualizadorPaginas.addOnPageChangeListener(cambiadorDePaginasListener);
btnSkip.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
btnNext.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// checking for last page
// if last page home screen will be launched
int current = getItem(+1);
if (current < layouts.length) {
// move to next screen
visualizadorPaginas.setCurrentItem(current);
} else {
// launchHomeScreen();
}
}
});
}
ViewPager.OnPageChangeListener cambiadorDePaginasListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
addBottomDots(position);
// changing the next button text 'NEXT' / 'GOT IT'
if (position == layouts.length - 1) {
// last page. make button text to GOT IT
btnNext.setText("Iniciar");
btnSkip.setVisibility(View.GONE);
} else {
// still pages are left
btnNext.setText("Siguiente");
btnSkip.setVisibility(View.VISIBLE);
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
};
private void addBottomDots(int currentPage) {
dots = new TextView[layouts.length];
int[] colorsActive = getResources().getIntArray(R.array.array_dot_active);
int[] colorsInactive = getResources().getIntArray(R.array.array_dot_inactive);
dotsLayout.removeAllViews();
for (int i = 0; i < dots.length; i++) {
dots[i] = new TextView(this);
dots[i].setText(Html.fromHtml("•"));
dots[i].setTextSize(35);
dots[i].setTextColor(colorsInactive[currentPage]);
dotsLayout.addView(dots[i]);
}
if (dots.length > 0)
dots[currentPage].setTextColor(colorsActive[currentPage]);
}
private int getItem(int i) {
return visualizadorPaginas.getCurrentItem() + i;
}
private void cambiarColorBarra() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
}
}
public class AdaptadorPaginas extends PagerAdapter {
private LayoutInflater layoutInflater;
public AdaptadorPaginas() {
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(layouts[position], container, false);
container.addView(view);
return view;
}
@Override
public int getCount() {
return layouts.length;
}
@Override
public boolean isViewFromObject(View view, Object obj) {
return view == obj;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
View view = (View) object;
container.removeView(view);
}
}
}
si todo funciono bien TENDRÍAS que ver algo similar a lo siguiente:
