How to achieve this layout in Android (studio)

Question

my name is Josh. I am trying to achieve the below layout in Android but I can't seem to split the inner layout to get the layout I want. Can someone help please.

This is what I have so far:

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.firstapplication.myapplication.MainActivity">

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/imageView" />

    </LinearLayout>

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

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:text="Name"
            android:ems="10"
            android:id="@+id/editText" />
    </LinearLayout>
</RelativeLayout>

The only problem I am having is, I can't figure out how to split the layout as shown in the picture.

Answer 1

Set the LinearLayout's height parameters accordingly to achieve the desired ratio between two layouts.

<LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="**XYZ dp**"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true">

Answer 2

You can solve this multiple ways. I don't know the requirement for your layout but you really don't need two LinearLayout to solve this. However, with what you have currently all you have to do is give your first LinearLayout an id, and set the height to wrap_content like so:

<LinearLayout
        android:id="@+id/LL1"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true">

then in your second layout set the positioning to be below your first one, set the height to wrap_content and remove layout_alignParentTop otherwise your second layout will overlap to your first. So you have something like this for the second:

<LinearLayout
        android:layout_below="@id/LL1"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true">

This will put the second layout underneath the first, but the sizing will vary unless the first layout is always a constant height.

If you know you always want a 70:30 ratio regardless of the first layout height, you can use layout_weights instead. I can add that in if that's what you're looking for instead.

To have a constant ratio, change your root layout to be LinearLayout instead of RelativeLayout then set the orientation to be vertical and a weightSum to 1.

Then set your first LinearLayout to be a layout_weight of 0.7 and your second LinearLayout to be a layout_weight of 0.3. Like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="1"
    android:orientation="vertical">

<LinearLayout
        android:id="@+id/LL1"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.7"></LinearLayout>

<LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.3"></LinearLayout>


</LinearLayout>