Tablets

Cuando hacemos aplicaciones podemos encontrarnos que hay distintos dispositivos con diferentes tamaños de pantalla, entonces para poder aprovechar mejor el espacio.
En las siguientes screenshot podemos ver la misma aplicación que se comparta diferente dependiendo el tamaño de la pantalla




Para descargar la app

Este tutorial no se basa en explicar el código de la aplicación de arriba, sino de explicar los principios básicos para poder hacerla

Comenzamos...
Inicialmente cuando empezamos a programar solo diseñamos para un solo panel "layout" que se utiliza para diseño de pantalla normal, pero también podemos encontrar "layout-large" que son para diseños de pantalla grande

res/layout/main.xml: diseño para pantallas normales con un solo panel
res/layout-large/main.xml: diseño para pantallas grandes con multi-paneles
res/layout-large-land/main.xml: diseño para pantllas grandes con multi-paneles con orientación

Ver Supporting Multiple Screens
Ver Supporting Different Screen Sizes

Si le agregamos la "x" obtenemos
res/layout-xlarge/main.xml: diseño para pantallas extra grandes
Que seguramente habrán visto algo parecido cuando usamos los drawables

res/drawable-mdpi/my_icon.png         // bitmap con densidad media
res/drawable-hdpi/my_icon.png         // bitmap con densidad alta
res/drawable-xhdpi/my_icon.png        // bitmap con densidad extra alta
res/drawable-xxhdpi/my_icon.png       // bitmap con densidad extra-extra alta

Ahora layout-large que son para pantallas grandes seguimos hablando para celulares (SmartPhones)

Si queremos programar para tablets necesitamos hablar de swNNNdp que significa que la utilizaremos con pantallas igual o mayor a NNNdp
meter

res/layout-sw600dp/main_activity.xml   # Para 7” tablets
res/layout-sw720dp/main_activity.xml   # Para 10” tablets 

¿Qué es sw?
sw: significa "Smallest Width" que su traducción sería "el ancho más pequeño". Segun screens support dice que también (you may also think of it as the "smallest possible width" for the screen) que quiere decir: también se puede pensar en él como el "menor anchura posible" para la pantalla.
Aunque suene bastante redundante, no lo es!. Eso quiere decir que si rotamos la pantalla tomará el ancho más pequeño de los dos.
Ejemplos:
sw600dp
sw720dp

Ahora la historia no se acaba acá.
También podemos encontrar
w720dp  //especifica la anchura mínima
w1024dp

h720dp  //especifica la altura mínima
h1024dp

¡¡¡Subiendo!! (cuando este subida, quitaré este cartel)

Así les debería quedar



JAVA

MainActivity.java
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {
    ViewGroup containerA;
    ViewGroup containerB;
    boolean isTablet = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        containerB = (ViewGroup) this.findViewById(R.id.container_b);
        containerA = (ViewGroup) this.findViewById(R.id.container_a);

        FragmentManager fm = getFragmentManager();

        if (containerB != null) {
            Fragment fragment = new FragmentB();
            isTablet = true;
            fm.beginTransaction().add(R.id.container_b, fragment).commit();
        }

        Fragment fragment = new FragmentA();
        fm.beginTransaction().add(R.id.container_a, fragment).commit();

        if (isTablet) {
            //lo que queres que haga si es tablet
        }
    }
}

FragmentA.java
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentA extends Fragment {
 private View fragmentView;

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  fragmentView = inflater.inflate(R.layout.fragment_a, container, false);
  
  return fragmentView;
 }
}

FragmentB.java
import android.app.Fragment;
import android.os.Bundle;
import android.support.v4.widget.SimpleCursorAdapter.ViewBinder;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentB extends Fragment {
 private View fragmentView;

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  fragmentView = inflater.inflate(R.layout.fragment_b, container, false);

  return fragmentView;
 }

}

XML 

activity_main.xml
<LinearLayout 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:orientation="horizontal" >

    <RelativeLayout
        android:id="@+id/container_a"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

    </RelativeLayout>
    
</LinearLayout>

activity_main.xml (land)
<LinearLayout 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:orientation="horizontal" >

    <FrameLayout
        android:id="@+id/container_a"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" >
    </FrameLayout>

    <FrameLayout
        android:id="@+id/container_b"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3" >
    </FrameLayout>

</LinearLayout>

activity_main_tablet.xml  //este se podría llamar si no quieren usar (activity_main.xml (land))
<LinearLayout 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:orientation="horizontal" >

    <FrameLayout
        android:id="@+id/container_a"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" >
    </FrameLayout>

    <FrameLayout
        android:id="@+id/container_b"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3" >
    </FrameLayout>

</LinearLayout>

fragment_a.xml
<?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" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SOY FRAMENT A" />

</LinearLayout>

fragment_b.xml
<?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" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SOY FRAGMENT B" />

</LinearLayout>

alias.xml(sw600dp) //dentro la carpeta "values"
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="activity_main" type="layout">@layout/activity_main_tablet</item>
</resources>

10 comentarios:

  1. ¿Cómo puedes hacer para que la pantalla se ajuste automáticamente dependiendo de si es una tablet o un smartphone? muchas gracias

    ResponderEliminar
    Respuestas
    1. Lo maneja por la resolución, o el tamaño de pantalla
      res/layout-sw600dp/main_activity.xml # Para 7” tablets
      res/layout-sw720dp/main_activity.xml # Para 10” tablets

      Eliminar
    2. Ramiro haber si puedes subir mas videos sobre el curso de android studio. Gracias por todos tus aportes. Son de gran ayuda amigo.

      Eliminar
  2. Hola Ramiro, hay una opción en el store que permite subir multiples apk en la misma cuenta, de esta forma podemos tener uno preparado para tablets y otra para celulares (a los cuales no hace falta cargarle imagenes pesadas que necesitan las tablets). Saludos

    ResponderEliminar
  3. excelente tutorial!

    en el movil me funciona muy bien , pero en la tablet me marca el siguiente error

    java.lang.NoSuchMethodError: com.example.fragment4.MainActivity.getFragmentManager

    alguna idea??
    gracias!

    ResponderEliminar
  4. aparentemente el problema anterior era por una libreria....


    ahora me sale este error: tendras alguna idea??

    12-21 12:44:01.843 25233-25233/com.stevenbyle.androidfragmentreuse E/AndroidRuntime: FATAL EXCEPTION: main
    android.view.InflateException: Binary XML file line #2: Error inflating class
    at android.view.LayoutInflater.createView(LayoutInflater.java:518)
    at com.android.internal.policy.impl.PhoneLayoutInflater.onCreateView(PhoneLayoutInflater.java:56)
    at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:568)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:386)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:320)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:276)
    at com.stevenbyle.androidfragmentreuse.controller.selector.list.ImageArrayAdapter.getView(ImageArrayAdapter.java:58)
    at android.widget.AbsListView.obtainView(AbsListView.java:1554)
    at android.widget.ListView.makeAndAddView(ListView.java:1793)
    at android.widget.ListView.fillDown(ListView.java:718)
    at android.widget.ListView.fillFromTop(ListView.java:775)
    at android.widget.ListView.layoutChildren(ListView.java:1646)
    at android.widget.AbsListView.onLayout(AbsListView.java:1384)
    at android.view.View.layout(View.java:7228)

    ResponderEliminar
  5. Amigo, tengo una duda sobre Android Studio y le pregunto a usted porque sus videotutoriales son los mejor explicados que he visto...
    Como puedo hacer una aplicacion que me abra una pagina web en modo escritorio¿?

    ResponderEliminar
  6. Hey, Buen día. Una pregunta como grabarías el audio interno de android.
    lo he intentado y buscado en la red pero no lo he conseguido.
    No, se si puedas ayudar con tus conocimientos.
    Gracias.

    ResponderEliminar
  7. Blog Android, Nexus.

    El mejor blog de Android, apps y juegos.

    Todo Nexus | Aplicaciones Android, Juegos y Android Puro.

    ResponderEliminar