将相对布局转换为线性布局

Question

I'm developing an Android app, and for the graphic part I'm using the useful editor of Android Studio. This means that I'm moving the objects with the margin commands to make them fit the Google Pixel C screen perfectly. Now I tried the app on the tablet and, of course, it doesn't works. I read that I should be using a Linear Layout, but I think that the code I want to convert doesn't respect its rules, because I've elements on every row and in a different position. How can I represent it with a Linear Layout? This is the code, as you can see it has a specified margin for each element.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/background_main"
    android:scaleType = "centerCrop"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="1063dp"
        android:layout_height="476dp"
        android:layout_marginLeft="275dp"
        android:layout_marginTop="200dp"
        android:fontFamily="@font/kotta_one"
        android:text="Test del pensiero\n      divergente"
        android:textColor="#000000"
        android:textSize="100dp"
        android:textStyle="bold"
        tools:layout_editor_absoluteX="78dp"
        tools:layout_editor_absoluteY="123dp" />

    <Button
        android:id="@+id/button_1"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_marginLeft="400dp"
        android:layout_marginTop="480dp"
        android:background="@drawable/button_bg"
        android:text="@string/invioA"
        android:textAllCaps="false"
        android:textColor="#FFFFFF"
        android:textSize="18dp"
        app:layout_constraintVertical_bias="0.771" />

    <Button
        android:id="@+id/button_2"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_marginLeft="680dp"
        android:layout_marginTop="480dp"
        android:background="@drawable/button_bg"
        android:text="@string/invioB"
        android:textAllCaps="false"
        android:textColor="#FFFFFF"
        android:textSize="18dp"
        app:layout_constraintVertical_bias="0.771" />

    <Button
        android:id="@+id/button_3"
        android:layout_width="90dp"
        android:layout_height="70dp"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="22dp"
        android:background="@android:color/transparent"
        android:fontFamily="@font/kotta_one"
        android:text="Area\nDocenti"
        android:textAllCaps="false"
        android:textColor="#030000"
        android:textSize="24dp"
        app:layout_constraintVertical_bias="0.771" />

</RelativeLayout>

Answer 1

ok, try this:

<LinearLayout 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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg"
android:orientation="vertical">

<Button
    android:id="@+id/button_3"
    android:layout_width="90dp"
    android:layout_height="70dp"
    android:background="@android:color/transparent"
    android:text="Area\nDocenti"
    android:textAllCaps="false"
    android:textColor="#030000"
    android:textSize="24dp"
    app:layout_constraintVertical_bias="0.771" />


<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginTop="200dp">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:fontFamily="@font/kotta_one"
        android:text="Test del pensiero\n      divergente"
        android:textColor="#000000"
        android:textSize="100dp"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView2"
        android:layout_centerInParent="true"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button_1"
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:layout_marginRight="40dp"
            android:background="@android:color/black"
            android:text="Protocollo A"
            android:textAllCaps="false"
            android:textColor="#FFFFFF"
            android:textSize="18dp"
            app:layout_constraintVertical_bias="0.771" />

        <Button
            android:id="@+id/button_2"
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:layout_marginLeft="40dp"
            android:background="@android:color/black"
            android:text="Protocollo B"
            android:textAllCaps="false"
            android:textColor="#FFFFFF"
            android:textSize="18dp"
            app:layout_constraintVertical_bias="0.771" />

    </LinearLayout>
</RelativeLayout>

Answer 2

I think your best option would be to use ConstraintLayout : read about it here

but something quick and hacky for LinearLayout:

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

    <Button
        android:id="@+id/button_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:layout_margin_start="20dp"
        android:background="@android:color/transparent"
        android:fontFamily="@font/kotta_one"
        android:text="Area\nDocenti"
        android:textAllCaps="false"
        android:textColor="#030000"
        android:textSize="24dp"/>

   <LinearLayout
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="vertical" 
     android:layout_gravity="centre"
     android:gravity="centre">
       <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/kotta_one"
        android:text="Test del pensiero"
        android:textColor="#000000"
        android:textSize="100dp"
        android:textStyle="bold"/>
      <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/kotta_one"
        android:text="divergente"
        android:textColor="#000000"
        android:textSize="100dp"
        android:textStyle="bold"/>

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

                 <Button
                   android:id="@+id/button_1"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:background="@drawable/button_bg"
                   android:text="@string/invioA"
                   android:textAllCaps="false"
                   android:textColor="#FFFFFF"
                   android:textSize="18dp"/>

                <Button
                   android:id="@+id/button_2"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:background="@drawable/button_bg"
                   android:text="@string/invioB"
                   android:textAllCaps="false"
                   android:textColor="#FFFFFF"
                   android:textSize="18dp"/>
      </LinearLayout>
   </LinearLayout>
</LinearLayout>

That might not be perfect as I just wrote it free hand, but I think it gives you a good idea of what you can do.