Android: Need help for formatting a layout

Question

I try to reproduce this design in xml, but I have a problem, the edit button I can not place it properly, I want it to always stick at the bottom of the cardview but a party in the cardview and a part outside, here is my xml code and the design(its for custom alert dialog, The button in question is at the bottom id cpdEdit.):

the code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/relative"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:gravity="center">



        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardCornerRadius="3dp"
            android:id="@+id/cardView">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="end">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:layout_marginTop="10dp"
                    android:layout_marginEnd="10dp"
                    android:adjustViewBounds="true"
                    android:maxHeight="30dp"
                    android:id="@+id/cdpClose"
                    android:maxWidth="30dp"
                    android:src="@drawable/close_ics" />

            </LinearLayout>


            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingLeft="40dp"
                android:paddingRight="40dp">


                <TextView
                    android:id="@+id/un"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginTop="40dp"
                    android:text="Nom"
                    android:textColor="@color/colorPrimary"
                    android:textSize="17sp" />

                <TextView
                    android:id="@+id/deu"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_below="@+id/cdpName"
                    android:layout_marginTop="10dp"
                    android:text="Numero"
                    android:textColor="@color/colorPrimary"
                    android:textSize="17sp" />

                <TextView
                    android:id="@+id/troi"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignStart="@+id/cdpName"
                    android:layout_below="@+id/cdpNumberPhone"
                    android:text="Adress"
                    android:layout_marginTop="10dp"
                    android:textColor="@color/colorPrimary"
                    android:textSize="17sp" />

                <TextView
                    android:id="@+id/trois"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_below="@+id/cdpAdress"
                    android:layout_marginTop="10dp"
                    android:text="Info"
                    android:textColor="@color/colorPrimary"
                    android:textSize="17sp" />

                <TextView
                    android:id="@+id/troiss"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:layout_alignStart="@+id/troi"
                    android:layout_below="@+id/cdpInfo"
                    android:text="Note"
                    android:textColor="@color/colorPrimary"
                    android:textSize="17sp" />


                <EditText
                    android:id="@+id/cdpName"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_below="@+id/un"
                    android:enabled="false"
                    android:text="Mickael Belhassen"
                    android:textColor="#000000"
                    android:textSize="17sp" />

                <EditText
                    android:id="@+id/cdpNumberPhone"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_below="@+id/deu"
                    android:enabled="false"
                    android:text="0584688800"
                    android:textColor="#000000"
                    android:textSize="17sp" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:layout_alignTop="@+id/cdpNumberPhone"
                    android:layout_marginEnd="12dp"
                    android:adjustViewBounds="true"
                    android:maxHeight="30dp"
                    android:maxWidth="30dp"
                    android:src="@drawable/copy_ics"
                    android:id="@+id/cdpCopyPhone" />

                <EditText
                    android:id="@+id/cdpAdress"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_below="@+id/troi"
                    android:enabled="false"
                    android:text="20 Dizengoff Street"
                    android:textColor="#000000"
                    android:textSize="17sp" />

                <EditText
                    android:id="@+id/cdpInfo"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_below="@+id/trois"
                    android:enabled="false"
                    android:text="Info supp"
                    android:textColor="#000000"
                    android:textSize="17sp" />

                <EditText
                    android:id="@+id/cdpNote"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_below="@+id/troiss"
                    android:enabled="false"
                    android:layout_marginBottom="40dp"
                    android:text="Note"
                    android:textColor="#000000"
                    android:textSize="17sp" />

            </RelativeLayout>


        </android.support.v7.widget.CardView>


    <Button
        android:id="@+id/cdpEdit"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="428dp"
        android:background="@drawable/buttonshapeedit"/>


    </RelativeLayout>

it's the margintop that really bothers me ...

im not sure i follow your exact problem... but your card view has a wrap content...change it to match_parent and itll remove the margin at the top. — letsCode, Dec 18 '17 at 17:02
I want the blue button to be like in the photo. With the code I made it works but it is not a good way to do because according to the screens the blue button is not always in the same place. I want this button half in the cardview and half outside without using such large margintop. I want the button to stick to the bottom of the cardview, and make a margin of 15dp max — , Dec 18 '17 at 17:06
ahh. i get it now. move the button after the card view and add this to the button. android:layout_marginBottom="25dp" — letsCode, Dec 18 '17 at 17:13
@MagixiZiBeat, I have solution for your problem, please check this screenshot, and let me know if it proper as per you want then I will post my detail answer here https://imgur.com/a/qZNhd — Fenil Patel, Dec 19 '17 at 06:36
I solve the problem with a negative bottom margin, so I'm interested in your solution — , Dec 19 '17 at 06:50

Uday Ramjiyani · Answer 1 · 2017-12-18T18:08:59.890

You can try following code (tried and tested)

<?xml version="1.0" encoding="utf-8"?>
[![enter image description here][1]][1]<RelativeLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/relative"
android:orientation="vertical"
android:background="@android:color/darker_gray">
<LinearLayout
    android:id="@+id/lin_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/darker_gray"
    android:orientation="vertical"
    >
<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="25dp"
    app:contentPaddingLeft="40dp"
    app:contentPaddingRight="40dp"
    android:cardBackgroundColor="@android:color/white"
    android:id="@+id/cardView">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="end">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                android:adjustViewBounds="true"
                android:maxHeight="30dp"
                android:id="@+id/cdpClose"
                android:maxWidth="30dp"
                android:src="@drawable/ic_launcher_background"
                android:layout_marginRight="10dp" />

        </LinearLayout>


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >

            <TextView
                android:id="@+id/un"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_marginTop="40dp"
                android:text="Nom"
                android:textColor="@color/colorPrimary"
                android:textSize="17sp"
                android:layout_alignParentLeft="true" />

            <TextView
                android:id="@+id/deu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_below="@+id/cdpName"
                android:layout_marginTop="10dp"
                android:text="Numero"
                android:textColor="@color/colorPrimary"
                android:textSize="17sp"
                android:layout_alignParentLeft="true" />

            <TextView
                android:id="@+id/troi"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignStart="@+id/cdpName"
                android:layout_below="@+id/cdpNumberPhone"
                android:text="Adress"
                android:layout_marginTop="10dp"
                android:textColor="@color/colorPrimary"
                android:textSize="17sp"
                android:layout_alignLeft="@+id/cdpName" />

            <TextView
                android:id="@+id/trois"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_below="@+id/cdpAdress"
                android:layout_marginTop="10dp"
                android:text="Info"
                android:textColor="@color/colorPrimary"
                android:textSize="17sp"
                android:layout_alignParentLeft="true" />

            <TextView
                android:id="@+id/troiss"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_alignStart="@+id/troi"
                android:layout_below="@+id/cdpInfo"
                android:text="Note"
                android:textColor="@color/colorPrimary"
                android:textSize="17sp"
                android:layout_alignLeft="@+id/troi" />


            <EditText
                android:id="@+id/cdpName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_below="@+id/un"
                android:enabled="false"
                android:text="Mickael Belhassen"
                android:textColor="#000000"
                android:textSize="17sp"
                android:layout_alignParentLeft="true" />

            <EditText
                android:id="@+id/cdpNumberPhone"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_below="@+id/deu"
                android:enabled="false"
                android:text="0584688800"
                android:textColor="#000000"
                android:textSize="17sp"
                android:layout_alignParentLeft="true" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignTop="@+id/cdpNumberPhone"
                android:layout_marginEnd="12dp"
                android:adjustViewBounds="true"
                android:maxHeight="30dp"
                android:maxWidth="30dp"
                android:src="@drawable/ic_launcher_background"
                android:id="@+id/cdpCopyPhone"
                android:layout_alignParentRight="true"
                android:layout_marginRight="12dp" />

            <EditText
                android:id="@+id/cdpAdress"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_below="@+id/troi"
                android:enabled="false"
                android:text="20 Dizengoff Street"
                android:textColor="#000000"
                android:textSize="17sp"
                android:layout_alignParentLeft="true" />

            <EditText
                android:id="@+id/cdpInfo"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_below="@+id/trois"
                android:enabled="false"
                android:text="Info supp"
                android:textColor="#000000"
                android:textSize="17sp"
                android:layout_alignParentLeft="true" />

            <EditText
                android:id="@+id/cdpNote"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_below="@+id/troiss"
                android:enabled="false"
                android:layout_marginBottom="40dp"
                android:text="Note"
                android:textColor="#000000"
                android:textSize="17sp"
                android:layout_alignParentLeft="true" />

        </RelativeLayout>


</android.support.v7.widget.CardView>

</LinearLayout>
<Button
    android:id="@+id/cdpEdit"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_centerHorizontal="true"
    android:layout_gravity="center_horizontal"
    android:layout_alignBottom="@+id/lin_layout"
    android:background="@drawable/ic_launcher_background"/>
 </RelativeLayout>

not work because of alignbottom it sticks at the bottom of the cardview but does not allow to go beyond the half — , Dec 18 '17 at 17:32

score 0 · Answer 2 · answered Dec 18 '17 at 17:44

My solution: is it good to use negative numbers?

<Button
        android:id="@+id/cdpEdit"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/cardView"
        android:layout_marginTop="-24dp"
        android:background="@drawable/buttonshapeedit"/>

score 0 · Answer 3 · answered Dec 18 '17 at 18:09

The solution you provided later is correct.

Replying to your question : Is it good to add negative margins ?

It is no harm to add negative margins but your layout should not hinder in all type of screens. The position of your button should remain same even if you view in 10.1 (2560*1600) tablet or in 3.7 (400*800) Phone.

For further reference you can refer to this link : Is it a bad practice to use negative margins in Android?

Android: Need help for formatting a layout

3 Answers3