Autore Topic: Layout adattabili a tutti gli schermi ( diverso layout su dispositivi diversi)  (Letto 283 volte)

Offline EdoardoGoffredoDeveloper

  • Nuovo arrivato
  • *
  • Post: 44
  • Respect: 0
    • Mostra profilo
Salve a tutti!

Premetto che sono un novellino nel mondo dello sviluppo di app android.

 Sto cercando di creare un app che si adatti ad ogni tipo di schermo...


Ho creato vari layout 4 tipi di layout (layout-sw320dp,480dp,600dp,720dp)..

Attualmente sto procedendo per "step" e ho iniziato a creare il layout per i dispositivi che rientrano nell'"sw-720dp" quindi mediamente per i dispositivi da 10"..

Ho un "activity_main.xml"  dove ho inserito un Relative layout dove al suo interno ho una toolbar e un Frame layout che uso per inserirci i fragment...

ecco il codice...

Codice (Java): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    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/drawer_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">


    <RelativeLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <include layout="@layout/toolbar" />

        <FrameLayout
            android:layout_below="@+id/toolbar"
            android:id="@+id/fragment_container"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:foreground="@drawable/shadow_toolbar"/>
    </RelativeLayout>
    <!-- "foreground" serve per avere la shadow sotto la toolbar, per i dispositivi sotto android 5.0-->

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/nav_body_main" />

    <!--  "itemIconTint" cambiare colore testo navigation -->
    <!--  " itemTextColor" cambiare colore icona navigation -->
</android.support.v4.widget.DrawerLayout>


Successivamente ho progettato il layout per un fragment... e ho inserito un bottone e dei floating action button per inserirci dei riferimenti social come (facebook twitter ecc).
A quest'ultimi ho dato delle dimensioni in dp e delle distanze sempre in dp l'uno tra l'altro...


ecco il codice


Codice (Java): [Seleziona]
<?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"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingEnd="16dp">



    <Button
        android:layout_width="540dp"
        android:layout_height="65dp"
        android:text="INIZIA SUBITO!"
        android:id="@+id/button_vai_assistenza"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/custom_button"
        android:textSize="20dp"
        android:textColor="@drawable/custom_textcolor_button"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Assistenza Copyworld"
        android:id="@+id/textView_nome_app"
        android:textSize="35dp"
        android:textColor="#000000"
        android:textStyle="bold"
        android:layout_below="@+id/imageView_logo"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="20dp"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/imageView_logo"
        android:src="@drawable/logo_nav_grande"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="30dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="www.copyworld.it"
        android:id="@+id/textView2"
        android:textSize="25dp"
        android:layout_marginTop="122dp"
        android:layout_below="@+id/button_vai_assistenza"
        android:layout_alignLeft="@+id/textView_copyright_benv"
        android:layout_alignStart="@+id/textView_copyright_benv" />

    <RelativeLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="95dp"
        android:id="@+id/RelativeLayout_social"
        android:layout_marginTop="12dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_below="@+id/textView2">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/float_social_facebook"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/fb_icon_social"
            android:adjustViewBounds="false"
            app:backgroundTint="@drawable/custom_floating_action_button"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/float_social_twitter"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/tw_icon_social"
            app:backgroundTint="@drawable/custom_floating_action_button"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/float_social_facebook"
            android:layout_toEndOf="@+id/float_social_facebook"
            android:layout_marginLeft="20dp"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/float_social_linkedin"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/li_icon_social"
            app:backgroundTint="@drawable/custom_floating_action_button"
            android:layout_marginLeft="20dp"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/float_social_twitter"
            android:layout_toEndOf="@+id/float_social_twitter" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/float_social_youtube"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/yt_icon_social"
            app:backgroundTint="@drawable/custom_floating_action_button"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/float_social_linkedin"
            android:layout_toEndOf="@+id/float_social_linkedin"
            android:layout_marginLeft="20dp" />
    </RelativeLayout>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Copyright © 2016 Copyworld srl "
        android:id="@+id/textView_copyright_benv"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginBottom="22dp" />

</RelativeLayout>


Ho successivamente lanciato l'app su i 3 tablet che ho a disposizione.. ( precisamente un galaxy tab 2 10.1, un galaxy tab A e un galaxy tab E).
Appena l'app si è aperta su i 3 dispositivi ho notato questa cosa "anomala"...

Le "icone social" e la textview  erano a distanze diverse tra di loro... ( sopratuttto su i dispositivi galaxy tab 2 10.1 e galaxy tab E,) mentre sul galaxy tab A le icone e la textview sono a distanza giusta come impostato nell'xml...

Come mai nei due dispositivi le distanze non solo uguali al dispositivo giusto?? ( i due dispositivi hanno la text view e le icone a distanze uguali ma diverse da quella sul galaxy Tab A)

Mentre per le altre componenti come (image view con l'icona dell'app e la textview con il nome dell'app) le dimensioni e le distanze sono state rispettate...

Come posso fare per rendere tutto il layout adattabile in maniera "perfetta" su tutti i dispositivi senza che ognuno di essi assumano proporzioni e distanze diverse??


Ho letto la guida ufficiale per questo argomento, dove parla di dp, relative layout ecc...


Vi lascio le immagini in allegato dei 3 dispositivi...