Search code examples
androidandroid-layoutandroid-relativelayout

android Layout issue: button doesnt show properly


I am developing a shopping webview app for my college project. But my app home screen have some issues in some mobile devices.

I need the following layout

|Button| <--->|Logo(Big)| <--->|Button|

| Text |

Please heck my layout xml and please suggest me edits.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="7dp"
    android:layout_weight="2"
    android:background="#fff">

    <Button
        android:id="@+id/SignOut"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="314dp"
        android:layout_marginBottom="44dp"
        android:backgroundTint="#FFFFFF"
        android:capitalize="characters"
        android:foregroundTint="#7E63DC"
        android:shadowColor="#FFFFFF"
        android:text="Sign Out"
        android:textAllCaps="false"
        android:textColor="#7E63DC"
        android:textSize="15sp" />

    <Button
        android:id="@+id/contact"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="11dp"
        android:layout_marginBottom="49dp"
        android:backgroundTint="#FFFFFF"
        android:capitalize="characters"
        android:foregroundTint="#7E63DC"
        android:shadowColor="#FFFFFF"
        android:text="HELP"
        android:textAllCaps="false"
        android:textColor="#7E63DC"
        android:textSize="15sp"></Button>

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="78dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="25dp"
        android:layout_marginTop="10dp"
        app:srcCompat="@drawable/logopng" />

    <TextView
    android:id="@+id/textView2"
    android:layout_width="371dp"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="-2dp"
        android:gravity="center"
        android:text="Welcome to our app, Please select any of the options "
        android:textColor="#7e63dc"
        android:textSize="18dp" />

</RelativeLayout>

Solution

  • first of all your parent RelativeLayout shoud have bigger height or wrap_content, and layout_weight does nothing (is for LinearLayout), so remove it

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff">
    

    for both Buttons remove below lines, beause of wrap_content height of RelativeLayout parent and becausealignParentEnd will align both Buttons to one side (usually right, on RTL devices to left)

    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    

    next, for left Button add

    android:layout_alignParentLeft="true"
    

    and for right Button add

    android:layout_alignParentRight="true"
    

    at the end center your ImageView with this line

    android:layout_centerInParent="true"
    

    or this

    android:layout_centerHorizontal="true"
    

    and remove these lines

    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    

    your text View should be placed outside and below RelativeLayout