Saransh Agarwal
Saransh Agarwal

Reputation: 241

Issues related to Layout

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

Answers (2)

Android Geek
Android Geek

Reputation: 9225

enter image description here

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

Reaz Murshed
Reaz Murshed

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.

enter image description here

Have a good day!

Upvotes: 1

Related Questions