Linear Layout using weight to adapt screen size

Question

I am trying to use a linear layout as a row for my recyclerView/adapter , basically my row has 3 elements: an image, a textView and a checkButton with some text.

What I want is the image occupying like 50% of the width plus 40 height, so I set the weight of the image to 2.

Next I need to have another 50% layout that has the other 2 elements, and I want at the top right of the image the textView and at bottom the checkbox.

I already implemented this before with relative layouts, but the content didn't adapt to different devices, so I tried the linear layout and the weight property.

So this is what I have at the moment:

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

        <ImageView
            android:id="@+id/plantPhoto"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:contentDescription="photo " />


        <com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
           android:id="@+id/plantName"
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_weight="2"
           android:textColor="@color/nephritis"
           android:textSize="15sp" />

        <CheckBox
            android:id="@+id/plantCheck"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignStart="@+id/plantName"
            android:layout_below="@+id/plantName"
            android:layout_marginTop="25dp"
            android:button="@drawable/customdrawablecheckbox"
            android:textSize="10dp" />


</LinearLayout>

Here is the image of what I have at the moment: image

As I explained, I need the image to occupy the 50% width and the green text to be side on side with the photo at the right.

The checkbox must be below, any help??

Thanks

Answer 1

Try this,

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

    <ImageView
        android:id="@+id/plantPhoto"
        android:layout_width="fill_parent"
        android:layout_height="70dp"
        android:layout_weight="0.5"
        android:contentDescription="photo "
        android:src="@drawable/placeholder" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.5">

        <TextView
            android:id="@+id/plantName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textColor="@color/colorBlack"
            android:textSize="15sp" />

        <CheckBox
            android:id="@+id/plantCheck"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/plantName"
            android:layout_marginTop="5dp"
            android:text="CheckBox"
            android:textSize="15dp" />
    </RelativeLayout>
</LinearLayout>

Answer 2

To me, it would have to be set with a Relative layout. Then for the elements to "adapt to different devices" you would need to set android:layout_width and height to wrap_content or fill_parent depending on what you want to achieve.

Answer 3

将图像权重设置为 50%，即 0.5，您在该布局上添加的任何内容都将是水平的，因此要解决该问题，只需添加另一个 0.5 权重的布局并将其设置为垂直。

Answer 4

You can try something like this

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

        <ImageView
            android:id="@+id/plantPhoto"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:contentDescription="photo " />

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

            <com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
                android:id="@+id/plantName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/nephritis"
                android:textSize="15sp" />

            <CheckBox
                android:id="@+id/plantCheck"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:layout_marginTop="25dp"
                android:button="@drawable/customdrawablecheckbox"
                android:textSize="10dp" />
        </LinearLayout>
    </LinearLayout>