Relative Layout Vs Linear Layout or a mix of Both

user_9423187 0
Viewed 804

I've been trying to design a layout based on something i designed on paper but haven't managed to get it to align the way I want it too while being able to fit on all screens I went with a simple structure to no success have i been able to align everything within ether layout I tried a mix of Relative and Linear then tried fusing both.

I shall provide images to show the layout style that i am going for.

Thanks in advance.

enter image description here

user-experience layout android user-interface
6 Answers

I made a similar design some time before. I used a Linear Layout (vertical) for making different rows and used a Linear Layout(horizontal) when more than one column was required in a row like Image button 1 and Image button 2 in your case. Take care of the hierarchy in the different views as it gets pretty confusing if done wrong.

user_115385610

Retaliative Layout Vs Linear Layout

I their should be no vs this Because both of them are different and serve different purpose

LINEAR LAYOUT

you should use linear layout where you have to do lot's off layout changes in view like adding removing or making dynamic because it will not rebuild whole layout just change's the parameter

RELATIVE LAYOUT

You should use where you want to achieve some alignment and don't want widget to render again because any change in child of relative layout it's re arrange / re draw whole widget

Hope this give some better picture

user_64686250

you can use constraint layout for this design, it flatten hierarchy as well

user_44500890

Linear Layout and Relative Layout can both be used to achieve the above but Linear Layout is faster in getting the job done.

For the above image attached, here's what you need to get started using Linear Layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

    <ImageView
        android:id="@+id/logo_image"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ocean"/>

    <TextView
        android:id="@+id/title"
        android:text="Title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        android:fontFamily="sans-serif-light"
        android:textColor="@android:color/black"
        android:background="#ccddff"
        android:gravity="center"
        android:padding="20dp"/>

    <TextView
        android:id="@+id/block_of_text"
        android:text="Sed aliquam ultrices mauris. Sed cursus turpis vitae tortor. Phasellus consectetuer vestibulum elit. Quisque malesuada placerat nisl."
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:fontFamily="sans-serif-light"
        android:textColor="@android:color/black"
        android:background="#B09E99"
        android:gravity="left"
        android:padding="8dp"/>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:weightSum = "2">
       <ImageButton
            android:id="@+id/image_button1"
            android:layout_width="0dp"
            android:layout_height="150dp"
            android:layout_weight="1"
            android:scaleType="centerCrop"
            android:src="@drawable/ibtn1"/>
       <ImageButton
            android:id="@+id/image_button2"
            android:layout_width="0dp"
            android:layout_height="150dp"
            android:layout_weight="1"
            android:scaleType="centerCrop"
            android:src="@drawable/ibtn2"/>
    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:weightSum = "2">
       <ImageButton
            android:id="@+id/image_button3"
            android:layout_width="0dp"
            android:layout_height="150dp"
            android:layout_weight="1"
            android:scaleType="centerCrop"
            android:src="@drawable/ibtn3"/>
       <ImageButton
            android:id="@+id/image_button4"
            android:layout_width="0dp"
            android:layout_height="150dp"
            android:layout_weight="1"
            android:scaleType="centerCrop"
            android:src="@drawable/ibtn4"/>
    </LinearLayout>

    <ImageButton
        android:id="@+id/image_button5"
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:layout_weight="1"
        android:scaleType="centerCrop"
        android:src="@drawable/ibtn5"/>

 </LinearLayout>
user_31595290 
    Please Try This

  <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <LinearLayout android:layout_width="match_parent"
                  android:layout_weight="2.2"
                  android:background="#DFF7FA"
                  android:gravity="center"
                  android:layout_height="match_parent">

        <TextView android:layout_width="match_parent"
                  android:text="Image/Logo"
                  android:textAlignment="center"
                  android:textSize="25sp"
                  android:textColor="@android:color/black"
                  android:layout_height="wrap_content"/>



    </LinearLayout>
    <LinearLayout android:layout_width="match_parent"
                  android:layout_weight="2.6"
                  android:gravity="center"
                  android:background="#B9CEBC"
                  android:layout_height="match_parent">

        <TextView android:layout_width="match_parent"
                  android:text="Title"
                  android:textAlignment="center"
                  android:textSize="25sp"
                  android:textColor="@android:color/black"
                  android:layout_height="wrap_content"/>

    </LinearLayout>

    <LinearLayout android:layout_width="match_parent"
                  android:layout_weight="2.3"
                  android:gravity="center"
                  android:background="#CECBCB"
                  android:layout_height="match_parent">

        <TextView android:layout_width="match_parent"
                  android:text="Block of Text"
                  android:textAlignment="center"
                  android:textSize="25sp"
                  android:textColor="@android:color/black"
                  android:layout_height="wrap_content"/>

    </LinearLayout>

    <LinearLayout android:layout_width="match_parent"
                  android:layout_weight="2.2"
                  android:weightSum="2"
                  android:orientation="horizontal"
                  android:layout_height="match_parent">

        <LinearLayout android:layout_width="match_parent"
                      android:layout_weight="1"
                      android:gravity="center"
                      android:background="#E0F5FE"
                      android:layout_height="match_parent">

            <TextView android:layout_width="match_parent"
                      android:text="ImageButton1"
                      android:textAlignment="center"
                      android:textSize="25sp"
                      android:textColor="@android:color/black"
                      android:layout_height="wrap_content"/>

        </LinearLayout>
        <LinearLayout android:layout_width="match_parent"
                      android:layout_weight="1"
                      android:background="#B2E4FC"
                      android:gravity="center"
                      android:layout_height="match_parent">

            <TextView android:layout_width="match_parent"
                      android:text="ImageButton2"
                      android:textAlignment="center"
                      android:textSize="25sp"
                      android:textColor="@android:color/black"
                      android:layout_height="wrap_content"/>

        </LinearLayout>


    </LinearLayout>

    <LinearLayout android:layout_width="match_parent"
                  android:layout_weight="2.2"
                  android:weightSum="2"
                  android:orientation="horizontal"
                  android:layout_height="match_parent">

        <LinearLayout android:layout_width="match_parent"
                      android:layout_weight="1"
                      android:gravity="center"
                      android:background="#B2E4FC"
                      android:layout_height="match_parent">

            <TextView android:layout_width="match_parent"
                      android:text="ImageButton3"
                      android:textAlignment="center"
                      android:textSize="25sp"
                      android:textColor="@android:color/black"
                      android:layout_height="wrap_content"/>

        </LinearLayout>

        <LinearLayout android:layout_width="match_parent"
                      android:layout_weight="1"
                      android:gravity="center"
                      android:background="#E0F5FE"
                      android:layout_height="match_parent">

            <TextView android:layout_width="match_parent"
                      android:text="ImageButton4"
                      android:textAlignment="center"
                      android:textSize="25sp"
                      android:textColor="@android:color/black"
                      android:layout_height="wrap_content"/>

        </LinearLayout>
    </LinearLayout>

    <LinearLayout android:layout_width="match_parent"
                  android:layout_weight="2.4"
                  android:gravity="center"
                  android:background="#7FD7FF"
                  android:layout_height="match_parent">

        <TextView android:layout_width="match_parent"
                  android:text="ImageButton5"
                  android:textAlignment="center"
                  android:textSize="25sp"
                  android:textColor="@android:color/black"
                  android:layout_height="wrap_content"/>

    </LinearLayout>
</LinearLayout>



  [1]: https://i.stack.imgur.com/MmiUc.png
user_96186660

you should try this one 

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

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
>

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
      >

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
        >

        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            >

        </LinearLayout>
    </LinearLayout>

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

    </LinearLayout>
</LinearLayout>

use your buttons/text whatever you want inside the layouts with your own colors whatever you want.

Hope this one will be helpful for you .

user_57980490
Related