menu FixWins.com Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql ReactJS+Redux :CRUD Android PFE
Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql ReactJS+Redux :CRUD PFE

Android : LinearLayout

LinearLayout est un élément Graphique qui permet de créer <div> permettant de diviser une fenêtre activity.xml en plusieurs divisions :

Afin d'illustrer les cas d'utilisation de l'élément LinearLayout on va créer une application de gestion des ventes voir figure.

Linearlayout


<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#8BC34A"
>
<!-- Le contenu -->
</LinearLayout>

Explications

  1. 1.android:layout_width:c'est la largeur du Div LinearLayout peut prendre les valeurs suivantes
    -match_parent:donc ce cas layout_width=100% du largeur du Layout parent
    -wrap_content:donc ce cas layout_width=auto comme une dans HTML
  2. 2.android:layout_height= Les memes valeur que layout_width
  3. 3.android:orientation :l'orientation du contenu de la LinearLayout c'est-à-dire les layouts qu'on va mettre à l'intérieur
    de cette LinearLayout vont être organisés soit verticalement :vertical ou horizontalement : horizontal
  4. 4.android:background :le code du couleur du background :#ff00f0

Exemple

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#8BC34A"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:background="#FF5722">

</LinearLayout>


<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF9800"
android:layout_weight="1.1">

</LinearLayout>


<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.9"
android:background="#FFC107">

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#CDDC39">

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFEB3B"
android:layout_weight="1">

</LinearLayout>

</LinearLayout>

Exemple1:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#8BC34A"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:background="#8BC34A">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text="Home"
android:backgroundTint="#2196F3"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text="Clients"
android:backgroundTint="#FFC107"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text="Products"
android:backgroundTint="#673AB7"
android:layout_weight="1"/>
</LinearLayout>


</LinearLayout>


Exemple2

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#D8DAD5"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#FFEB3B">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="LogoApp"
android:textSize="25dp"
android:layout_weight="1.2"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Search ..."
android:textSize="28dp"
android:background="#ffff"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="OK"
android:textSize="25dp"
android:layout_weight="1.5"/>


</LinearLayout>

<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFC107"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#FAFBF8"
android:layout_marginBottom="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:layout_width="match_parent"
android:layout_height="45dp"
android:src="@drawable/c1"
android:layout_weight="4"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20dp"
android:text="By:Name and Last name"/>

</LinearLayout>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description text ............................"
android:textSize="18dp"
android:background="#fff"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/votrephoto"
android:scaleType="fitXY"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20dp"
android:text="Like"
android:backgroundTint="#4CAF50"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20dp"
android:text="Share"
android:backgroundTint="#CDDC39"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text="Comment"
android:backgroundTint="#FFEB3B"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#FAFBF8"
android:layout_marginBottom="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:layout_width="match_parent"
android:layout_height="45dp"
android:src="@drawable/c1"
android:layout_weight="4"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20dp"
android:text="By:Name and Last name"/>

</LinearLayout>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description text ............................"
android:textSize="18dp"
android:background="#fff"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/votrephoto"
android:scaleType="fitXY"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20dp"
android:text="Like"
android:backgroundTint="#4CAF50"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20dp"
android:text="Share"
android:backgroundTint="#CDDC39"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text="Comment"
android:backgroundTint="#FFEB3B"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
<!-- Copier coller -->



</LinearLayout>
</ScrollView>

</LinearLayout>

Exemple3


<LinearLayout
   android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="#f00fff">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00fff0"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="#F8F7F8"
            android:layout_weight="0.5">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/votrephoto"
                android:scaleType="fitXY"
                android:layout_weight="1"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Title ...........  Text ...
                Text ...  Text ...  Text ...  Text ...
                 Text ...  Text ...  Text ...  Text ...
                 Text ...  Text ...  Text ...  Text ...  Text ...
                 Text ...  Text ...  Text"
                android:textSize="22dp"/>

        </LinearLayout>

       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_weight="1"
           android:orientation="vertical">
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:orientation="vertical"
               android:background="#ff00ff"
               android:layout_weight="1">
               <ImageView
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:src="@drawable/votrephoto"
                   android:scaleType="fitXY"
                   android:layout_weight="1"/>

               <TextView
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:text="Title .........."
                   android:textSize="22dp"/>

           </LinearLayout>
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:orientation="vertical"
               android:background="#ff00ff"
               android:layout_weight="1">
               <ImageView
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:src="@drawable/votrephoto"
                   android:scaleType="fitXY"
                   android:layout_weight="1"/>

               <TextView
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:text="Title .........."
                   android:textSize="22dp"/>

           </LinearLayout>

       </LinearLayout>
         </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#FFC107"
        android:layout_weight="1"
        android:layout_marginBottom="10dp">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/votrephoto"
            android:scaleType="fitXY"

            android:layout_weight="1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Title .........."
            android:textSize="22dp"
            android:layout_weight="1"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#FFC107"
        android:layout_weight="1"
        android:layout_marginBottom="10dp">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/votrephoto"
            android:scaleType="fitXY"

            android:layout_weight="1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Title .........."
            android:textSize="22dp"
            android:layout_weight="1"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#FFC107"
        android:layout_weight="1"
        android:layout_marginBottom="10dp">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/votrephoto"
            android:scaleType="fitXY"

            android:layout_weight="1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Title .........."
            android:textSize="22dp"
            android:layout_weight="1"/>

    </LinearLayout><LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="#FFC107"
    android:layout_weight="1"
    android:layout_marginBottom="10dp">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/votrephoto"
        android:scaleType="fitXY"

        android:layout_weight="1"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Title .........."
        android:textSize="22dp"
        android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>


Exemple3:par :Achraf

<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0."
android:background="#053C5E"
android:orientation="horizontal">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ACCOUNT"
android:textAlignment="center"
android:textColor="#fff"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Liste Clients"
android:textAlignment="center"
android:textColor="#fff"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Liste Produits"
android:textAlignment="center"
android:textColor="#fff"/>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.04"
android:background="#FFEB3B"
android:orientation="vertical">


<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
app:srcCompat="@drawable/votrephoto"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#912F40">

<Button
android:layout_width="45dp"
android:layout_height="45dp"
android:backgroundTint="#912F40"
android:gravity="left"
android:text="<"
android:textColor="@color/black" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="description numero 1"
android:textColor="@color/black"
android:textAlignment="center"
android:textSize="16sp"
android:layout_weight="1"/>

<Button
android:layout_width="45dp"
android:layout_height="45dp"
android:backgroundTint="#912F40"
android:gravity="right"
android:text=">"
android:textColor="@color/black" />

</LinearLayout>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.03"
android:orientation="vertical"
android:paddingHorizontal="15dp">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Categorie 1: "
android:textSize="20dp"
android:textColor="#000"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">

<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/votrephoto"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Photo 1"
android:textAlignment="center"
android:textColor="#000"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description photo 1"
android:textAlignment="center"
android:textColor="#000"/>

</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">

<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/votrephoto"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Photo 2"
android:textAlignment="center"
android:textColor="#000"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description photo 2"
android:textAlignment="center"
android:textColor="#000"/>

</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">

<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/votrephoto"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Photo 3"
android:textAlignment="center"
android:textColor="#000"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description photo 3"
android:textAlignment="center"
android:textColor="#000"/>

</LinearLayout>

</LinearLayout>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.9"
android:orientation="vertical"
android:paddingHorizontal="15dp"
android:layout_marginTop="20dp">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Categorie 2: "
android:textSize="20dp"
android:textColor="#000"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/votrephoto"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="15dp"
android:paddingTop="20dp">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Photo 4"
android:textSize="24dp"
android:textColor="#000"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description photo 4"
android:textSize="20dp"
android:textColor="#000"/>

</LinearLayout>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp">

<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/votrephoto"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="15dp"
android:paddingTop="20dp">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Photo 5"
android:textSize="24dp"
android:textColor="#000"
/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description photo 5"
android:textSize="20dp"
android:textColor="#000"/>

</LinearLayout>

</LinearLayout>

</LinearLayout>

</LinearLayout>