Search code examples
android-linearlayoutandroid-scrollview

Line up text under each other in Layout


I have created a payment info screen but would like to adjust it to make it look more like the image below. I have added below my attempted code. How do I go about doing this? Any help would be greatly appreciated. I would like to know how to split the layout into 3 sections and have buttons like the image. Also how would I align my text to be under each other?

Image of what I would like to achieve

image1

Code Below

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="match_parent"
    android:orientation="vertical"
    android:background="@color/colorPrimary"
    android:layout_gravity="center">

   <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center"
       android:orientation="vertical">


       <ImageView
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/solver"/>

       <View
           android:layout_marginTop="5dp"
           android:layout_width="match_parent"
           android:layout_height="1dp"
           android:background="@android:color/darker_gray"/>

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

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

               <TextView
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="Record phone calls"
                   android:textColor="@color/colorWhite"
                   android:layout_gravity="center"
                   android:textSize="18sp"/>

               <TextView
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="Know who viewed your profile"
                   android:textColor="@color/colorWhite"
                   android:layout_gravity="center"
                   android:textSize="18sp"/>

               <TextView
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="Option to view profiles privately"
                   android:textColor="@color/colorWhite"
                   android:layout_gravity="center"
                   android:textSize="18sp"/>

               <TextView
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="Get the Premium badge on your profile"
                   android:textColor="@color/colorWhite"
                   android:layout_gravity="center"
                   android:textSize="18sp"/>

               <TextView
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="30 contact requests a month"
                   android:layout_gravity="center"
                   android:textColor="@color/colorWhite"
                   android:textSize="18sp"/>

               <TextView
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="No ads"
                   android:layout_gravity="center"
                   android:textColor="@color/colorWhite"
                   android:textSize="18sp"/>

           </LinearLayout>

       </LinearLayout>

       <Button
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Monthly Premium      R19,19"/>

       <Button
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Yearly Premium        R179,99"/>

   </LinearLayout>

</ScrollView>

Solution

  • Don't use scrollView. Use a vertical LinearLayout and give it's children suitable weights Something Like this:

    <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:layout_gravity="center"
           android:orientation="vertical">
    <ImageView android:layout_width="match_parent"
           android:layout_height="match_parent"
    android:weight="1.25">
    
    <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:layout_gravity="center"
        android:weight="1"
           android:orientation="vertical">
    
    </LinearLayout>
    
    </LinearLayout>
    

    And for transparensy use this style for your activity in manifest

    <style name="Theme.Transparent" parent="android:Theme">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">#66000000</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:backgroundDimEnabled">false</item>
        <item name="android:windowFullscreen">true</item>
    </style>