Fabio
Fabio

Reputation: 645

Convert a Relative Layout to a Linear Layout

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>

enter image description here

Upvotes: 2

Views: 718

Answers (2)

afhamu
afhamu

Reputation: 1029

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>

Upvotes: 1

Blundell
Blundell

Reputation: 76476

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.

Upvotes: 0

Related Questions