Search code examples
androidandroid-layoutandroid-scrollviewandroid-relativelayout

UI generation with android studio kotlin

I am an amateur at both android studio and kotlin. I need some help with generating a particular UI.

enter image description here

I have already attempted certain ways of doing it using a nested relative layout with scrollview inside the inner relative layout. But when I get writing the adapter I am unable to proceed because I don't see the adapter option. So, I'm looking for suggestions to do it. Just for clarification: I wanted to have 4 Textview's like 4 quadrants on the screen and then I should be able scroll down to have another Text view with a button. In the image "what does this mean?" is an expandable text view below and a button below that.

For a start I have shown the xml contents.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:attr/divider"
android:outlineAmbientShadowColor="@color/colorPrimary"
tools:context=".ProgressFragment">

<!-- TODO: Update blank fragment layout -->
<RelativeLayout
    android:id="@+id/progress_relayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ScrollView
       android:layout_width="match_parent"
       android:layout_height="match_parent">
            <TextView
                android:id="@+id/qudrant1_progresstext1"
                android:layout_width="190dp"
                android:layout_height="280dp"
                android:gravity="center"
                android:text="TextView" />

            <TextView
                android:id="@+id/qudrant2_progresstext2"
                android:layout_width="190dp"
                android:layout_height="280dp"
                android:layout_marginTop="280dp"
                android:gravity="center"
                android:text="TextView" />

            <TextView
                android:id="@+id/qudrant3_progresstext3"
                android:layout_width="190dp"
                android:layout_height="280dp"
                android:layout_marginLeft="190dp"
                android:gravity="center"
                android:text="TextView" />

            <TextView
                android:id="@+id/qudrant4_progresstext4"
                android:layout_width="190dp"
                android:layout_height="280dp"
                android:layout_marginLeft="190dp"
                android:layout_marginTop="280dp"
                android:gravity="center"
                android:text="TextView" />
    </ScrollView>

</RelativeLayout>


</FrameLayout>

Any help is appreciated.

Solution

  • The solution to the problem is given below. The xml file contents must be.

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:attr/divider"
tools:context=".ProgressFragment">

<!-- TODO: Update blank fragment layout -->
<ScrollView
    android:id="@+id/progress_scrollview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?android:attr/divider">

    <RelativeLayout
        android:id="@+id/progress_parentrelayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

         <RelativeLayout
            android:id="@+id/progress_child1relayout"
            android:layout_width="190dp"
            android:layout_height="280dp">

            <TextView
                android:id="@+id/qudrant1_progresstext1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_marginTop="90dp"
                android:layout_marginLeft="60sp"
                android:text="TextView" />
            <ProgressBar
                android:id="@+id/progress_progressbar1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="180dp"
                android:layout_marginLeft="70dp"
                style="?android:attr/progressBarStyleHorizontal" />
         </RelativeLayout>

        <RelativeLayout
            android:id="@+id/progress_child2relayout"
            android:layout_width="190dp"
            android:layout_height="280dp"
            android:layout_below="@+id/progress_child1relayout">
            <TextView
                android:id="@+id/qudrant2_progresstext2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="90dp"
                android:layout_marginLeft="60sp"
                android:gravity="center"
                android:text="TextView" />
            <ProgressBar
                android:id="@+id/progress_progressbar2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="120dp"
                android:layout_marginLeft="70dp"
                style="?android:attr/progressBarStyleHorizontal" />
            <TextView
                android:id="@+id/quadrant2_textview1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Textview"
                android:textSize="15dp"
                android:layout_marginTop="150dp"
                android:layout_marginLeft="65dp"/>
            <TextView
                android:id="@+id/quadrant2_textview2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Textview"
                android:textSize="15dp"
                android:layout_marginTop="180dp"
                android:layout_marginLeft="65dp"/>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/progress_child3relayout"
            android:layout_width="190dp"
            android:layout_height="280dp"
            android:layout_toRightOf="@+id/progress_child1relayout">
            <TextView
                android:id="@+id/qudrant3_progresstext3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="90dp"
                android:layout_marginLeft="60sp"
                android:gravity="center"
                android:text="TextView" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/progress_child4relayout"
            android:layout_width="190dp"
            android:layout_height="280dp"
            android:layout_below="@id/progress_child3relayout"
            android:layout_toRightOf="@+id/progress_child2relayout">
            <TextView
                android:id="@+id/qudrant4_progresstext4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="60sp"
                android:layout_marginTop="90dp"
                android:gravity="center"
                android:text="TextView" />
            <ProgressBar
                android:id="@+id/progress_progressbar3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="120dp"
                android:layout_marginLeft="50sp"
                style="?android:attr/progressBarStyleLarge" />
        </RelativeLayout>
        <TextView
            android:id="@+id/whatdoesthis_mean"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="What does this mean?"
            android:textStyle="bold"
            android:textColor="#200"
            android:layout_centerHorizontal="true"
            android:clickable="true"
            android:layout_marginTop="580dp"
            android:gravity="center"
            android:textSize="15dp"/>
        <Button
            android:id="@+id/child_button"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="620dp"
            android:text="child name"/>
    </RelativeLayout>
   </ScrollView>
</FrameLayout>

    This would generate the view that is asked in the question. Thank you all for the suggestions and support.