Reputation: 241
I have an issue related to my layout.
I want my layout like this. where discount percentage to be shown in the center of Deal price and Actual price. how to do this. My actual price relative layout taking a lot of space even I have set my relative layout as a wrap content. and also after adding a discount percentage in center my actual price layout comes a little bit below. It's not aligned as equal to Deal Price.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/Parent.XML">
<androidx.cardview.widget.CardView style="@style/CardView.Parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout style="@style/CardView.TitleDescription">
<LinearLayout
style="@style/CardView.LinearLayoutParent"
android:layout_width="match_parent">
<TextView
android:id="@+id/just_in_store_name"
style="@style/Title.ItemRow" />
<TextView
android:id="@+id/just_in_deal_description"
style="@style/Description.ItemRow"
android:layout_height="30dp" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#f2f2f2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="4dp"
android:orientation="vertical">
<TextView
android:id="@+id/ap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
android:fontFamily="@font/calibri"
android:text="Deal Price"
android:textColor="#757575"
android:textSize="16sp" />
<TextView
android:id="@+id/just_in_deal_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ap"
android:fontFamily="@font/calibri"
android:text="Deal Price"
android:textColor="#3691ea"
android:textSize="16sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:layout_marginRight="4dp"
android:orientation="vertical">
<TextView
android:id="@+id/apv_discount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10% OFF"
android:textAlignment="center"
android:textColor="@color/colorPrimary"
android:textSize="18dp"
android:textStyle="bold"
android:visibility="visible" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:orientation="vertical">
<TextView
android:id="@+id/dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginBottom="6dp"
android:fontFamily="@font/calibri"
android:text="Actual Price"
android:textColor="#757575"
android:textSize="16sp" />
<TextView
android:id="@+id/just_in_actual_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/dp"
android:layout_alignParentRight="true"
android:fontFamily="@font/calibri"
android:text="Actual Price"
android:textColor="#3691ea"
android:textSize="16sp" />
</RelativeLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#f2f2f2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="72"
android:orientation="vertical">
<TextView
style="@style/SubHeader.ItemRow"
android:layout_gravity="center"
android:text="Coupon Code" />
<TextView
android:id="@+id/coupon_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:fontFamily="@font/calibri"
android:gravity="center"
android:text="Not Required"
android:textAlignment="center"
android:textAllCaps="true"
android:textColor="#308fe9"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#f2f2f2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="72"
android:orientation="vertical">
<Button
android:id="@+id/just_in_target"
style="@style/Button.Appearance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="GET DEAL" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
Upvotes: 1
Views: 73
Reputation: 9225
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="match_parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/just_in_store_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Loading"
android:textSize="20sp"
android:textColor="#000"
android:textStyle="bold"/>
<TextView
android:id="@+id/just_in_deal_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Loading"
android:layout_marginTop="5dp"
android:textSize="15sp"
android:textColor="#3A56F3"/>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#f2f2f2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".3"
android:orientation="vertical">
<TextView
android:id="@+id/ap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
android:text="Deal Price"
android:textColor="#757575"
android:textSize="16sp" />
<TextView
android:id="@+id/just_in_deal_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ap"
android:text="Deal Price"
android:textColor="#3691ea"
android:textSize="16sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight=".3"
android:orientation="vertical">
<TextView
android:id="@+id/apv_discount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10% OFF"
android:textAlignment="center"
android:textColor="@color/colorPrimary"
android:textSize="18dp"
android:textStyle="bold"
android:visibility="visible" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:orientation="vertical">
<TextView
android:id="@+id/dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginBottom="6dp"
android:text="Actual Price"
android:textColor="#757575"
android:textSize="16sp" />
<TextView
android:id="@+id/just_in_actual_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/dp"
android:layout_alignParentRight="true"
android:text="Actual Price"
android:textColor="#3691ea"
android:textSize="16sp" />
</RelativeLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#f2f2f2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="72"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Coupon Code" />
<TextView
android:id="@+id/coupon_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:gravity="center"
android:text="Not Required"
android:textAlignment="center"
android:textAllCaps="true"
android:textColor="#308fe9"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#f2f2f2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="72"
android:orientation="vertical">
<Button
android:id="@+id/just_in_target"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="GET DEAL"
android:background="#78ca28"
android:textColor="#fff"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</androidx.cardview.widget.CardView>
I have made some changes to your layout, added weight to align the percentage text in between and also remove style files as I have not any reference of your style files.
Hope it works for you!!
Upvotes: 0
Reputation: 24211
I would like to propose a LinearLayout
here with weight attributes so that each element in that [DEAL PRICE - DISCOUNT - ACTUAL PRICE] takes the same space in the layout and that is what you want as far as I could understand.
I prepared a layout which is similar to yours. I removed the styles that you used to avoid errors (as I do not have them). I have also userd CardView
from the support library. Please take a look at the following layout and let me know if that serves your purpose. This is just to give you an idea of how the weight attribute can serve your purpose.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/just_in_store_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/just_in_deal_description"
android:layout_width="wrap_content"
android:layout_height="30dp" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#f2f2f2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/ap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
android:text="Deal Price"
android:textColor="#757575"
android:textSize="16sp" />
<TextView
android:id="@+id/just_in_deal_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ap"
android:text="Deal Price"
android:textColor="#3691ea"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="@+id/apv_discount"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="10% OFF"
android:textAlignment="center"
android:textColor="@color/colorPrimary"
android:textSize="18dp"
android:textStyle="bold"
android:visibility="visible" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginBottom="6dp"
android:text="Actual Price"
android:textColor="#757575"
android:textSize="16sp" />
<TextView
android:id="@+id/just_in_actual_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/dp"
android:layout_alignParentRight="true"
android:text="Actual Price"
android:textColor="#3691ea"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#f2f2f2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="72"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Coupon Code" />
<TextView
android:id="@+id/coupon_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:gravity="center"
android:text="Not Required"
android:textAlignment="center"
android:textAllCaps="true"
android:textColor="#308fe9"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#f2f2f2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="72"
android:orientation="vertical">
<Button
android:id="@+id/just_in_target"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="GET DEAL" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
The layout is showing as the following in my Android Studio.
Have a good day!
Upvotes: 1