Reputation: 131
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?
<?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>
Upvotes: 2
Views: 326
Reputation: 89
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>
Upvotes: 1