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.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.android:layout_height= Les memes valeur que layout_width
-
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.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>
