Search code examples
androidandroid-layoutandroid-linearlayoutandroid-xml

Aligning linear layouts inside linear layout like whatsapp change profile picture

I am trying to design bottom modal sheet which will be displayed to user when they click to add / update profile picture like WhatsApp. For that - i have coded like below in xml file.

But - i am unable to align second child LinearLayout (Gallery) at center and last LinearLayout (Remove) at right.

I've used gravity and layout_gravtiy = "center" / "center_horizontal". But - the result was not as expected.

What is the best approach?

NOTE : Child Linear layouts width and height should be wrap_content.

Thanks in advance.

Below is my xml file.

  <?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"
  android:orientation="horizontal"
  android:paddingBottom="10dp"
  android:paddingTop="10dp"
  android:paddingLeft="10dp"
  android:paddingRight="10dp">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:orientation="vertical">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/camera"
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Camera"
        android:textColor="#000"
        android:textSize="10sp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="3dp"
        android:textStyle="normal" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:orientation="vertical">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/gallery"
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="3dp"
        android:text="Gallery"
        android:textColor="#000"
        android:textSize="10sp"
        android:textStyle="normal" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:gravity="right"
    android:orientation="vertical">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="55dp"
        android:layout_height="50dp"
        android:src="@drawable/image_delete" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="3dp"
        android:text="Remove"
        android:textColor="#000"
        android:textSize="10sp"
        android:textStyle="normal" />
</LinearLayout>

Below is the design i've approached

Design approached

Expected design is - : Same as Whatsapp Change profile picture dialog from bottom of screen in ANDROID.

Solution

  • If you can use constraint layout then your layout could be like this

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linearLayout45"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


<com.silverskysoft.skysalon.customViews.CircleImageView
    android:id="@+id/circleImageView"
    android:layout_width="52dp"
    android:layout_height="50dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:src="@drawable/ic_back"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="Camera"
    android:textColor="#ffffff"
    android:textSize="10sp"
    android:textStyle="normal"
    app:layout_constraintEnd_toEndOf="@+id/circleImageView"
    app:layout_constraintStart_toStartOf="@+id/circleImageView"
    app:layout_constraintTop_toBottomOf="@+id/circleImageView" />


<com.silverskysoft.skysalon.customViews.CircleImageView
    android:id="@+id/circleImageView2"
    android:layout_width="51dp"
    android:layout_height="50dp"
    android:layout_marginStart="8dp"
    android:src="@drawable/ic_packages"
    app:layout_constraintStart_toEndOf="@+id/circleImageView"
    app:layout_constraintTop_toTopOf="@+id/circleImageView" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="Gallery"
    android:textColor="#ffffff"
    android:textSize="10sp"
    android:textStyle="normal"
    app:layout_constraintEnd_toEndOf="@+id/circleImageView2"
    app:layout_constraintStart_toStartOf="@+id/circleImageView2"
    app:layout_constraintTop_toBottomOf="@+id/circleImageView2" />


<com.silverskysoft.skysalon.customViews.CircleImageView
    android:id="@+id/circleImageView3"
    android:layout_width="52dp"
    android:layout_height="50dp"
    android:layout_marginStart="8dp"
    android:src="@drawable/ic_signout"
    app:layout_constraintStart_toEndOf="@+id/circleImageView2"
    app:layout_constraintTop_toTopOf="@+id/circleImageView2" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="Remove"
    android:textColor="#ffffff"
    android:textSize="10sp"
    android:textStyle="normal"
    app:layout_constraintEnd_toEndOf="@+id/circleImageView3"
    app:layout_constraintStart_toStartOf="@+id/circleImageView3"
    app:layout_constraintTop_toBottomOf="@+id/circleImageView3" />
</androidx.constraintlayout.widget.ConstraintLayout>

    With linear layout

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linearLayout45"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">


    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:padding="16dp"
        android:drawableTop="@drawable/camera"
        android:drawablePadding="8dp"
        android:text="Camera"
        android:textColor="#ffffff"
        android:textSize="10sp"
        android:textStyle="normal" />


    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:padding="16dp"
        android:text="Gallery"
        android:drawableTop="@drawable/gallery"
        android:drawablePadding="8dp"
        android:textColor="#ffffff"
        android:textSize="10sp"
        android:textStyle="normal" />


    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:drawableTop="@drawable/image_delete"
        android:drawablePadding="8dp"
        android:padding="16dp"
        android:text="Remove"
        android:textColor="#ffffff"
        android:textSize="10sp"
        android:textStyle="normal" />
</LinearLayout>