Struggling to Match Figma Design in Android - ConstraintLayout Cutting Off Views

Other Questions Figma
1

Problems with Android Layout Design

I’m encountering issues while trying to make my Android app layout reflect my Figma design accurately. Here are the main challenges:

  • ConstraintLayout is truncating some of the views rather than displaying them correctly.
  • The top navigation bar doesn’t align properly compared to using LinearLayout.
  • There are noticeable discrepancies in spacing and layout compared to my design.

I’ve made several adjustments to the margins and constraints but still can’t achieve a pixel-perfect layout. It also seems to behave differently in portrait and landscape orientations.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/blue_light">

    <LinearLayout
        android:id="@+id/top_navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <RelativeLayout
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:layout_gravity="center"
                android:layout_marginStart="25dp"
                android:layout_marginEnd="15dp"
                android:background="@drawable/circle_bg_white">

                <ImageView
                    android:layout_width="18dp"
                    android:layout_height="12dp"
                    android:layout_centerInParent="true"
                    android:src="@drawable/hamburger_icon" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="280dp"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:background="@drawable/search_rounded_bg">

                <ImageView
                    android:id="@+id/search_icon"
                    android:layout_width="14dp"
                    android:layout_height="16dp"
                    android:layout_centerVertical="true"
                    android:layout_marginStart="18dp"
                    android:src="@drawable/magnify_icon" />

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/search_input_field"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerVertical="true"
                    android:layout_toEndOf="@id/search_icon"
                    android:background="@android:color/transparent"
                    android:fontFamily="@font/opensans_regular"
                    android:hint="Enter location or search term"
                    android:paddingStart="15dp"
                    android:paddingTop="5dp"
                    android:textSize="14dp" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:layout_gravity="center"
                android:layout_marginStart="15dp"
                android:layout_marginEnd="25dp"
                android:background="@drawable/circle_bg_white">

                <ImageView
                    android:layout_width="15dp"
                    android:layout_height="15dp"
                    android:layout_centerInParent="true"
                    android:src="@drawable/profile_icon" />
            </RelativeLayout>
        </LinearLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingStart="22dp"
            android:paddingTop="45dp"
            android:paddingEnd="22dp">

            <LinearLayout
                android:id="@+id/social_btn_one"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintEnd_toStartOf="@id/social_btn_two"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintWidth_percent="0.25">

                <RelativeLayout
                    android:layout_width="55dp"
                    android:layout_height="55dp"
                    android:layout_gravity="center"
                    android:background="@drawable/circle_bg_white">

                    <ImageView
                        android:layout_width="10dp"
                        android:layout_height="20dp"
                        android:layout_centerInParent="true"
                        android:src="@drawable/facebook_icon" />
                </RelativeLayout>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/opensans_regular"
                    android:paddingTop="12dp"
                    android:text="Facebook"
                    android:textSize="13dp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/social_btn_two"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingStart="50dp"
                app:layout_constraintEnd_toStartOf="@id/social_btn_three"
                app:layout_constraintStart_toEndOf="@id/social_btn_one"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintWidth_percent="0.25">

                <RelativeLayout
                    android:layout_width="55dp"
                    android:layout_height="55dp"
                    android:layout_gravity="center"
                    android:background="@drawable/circle_bg_white">

                    <ImageView
                        android:layout_width="12dp"
                        android:layout_height="14dp"
                        android:layout_centerInParent="true"
                        android:src="@drawable/youtube_icon" />
                </RelativeLayout>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/opensans_regular"
                    android:paddingTop="12dp"
                    android:text="YouTube"
                    android:textSize="13dp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/social_btn_three"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingStart="52dp"
                app:layout_constraintEnd_toStartOf="@id/social_btn_four"
                app:layout_constraintStart_toEndOf="@id/social_btn_two"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintWidth_percent="0.25">

                <RelativeLayout
                    android:layout_width="55dp"
                    android:layout_height="55dp"
                    android:layout_gravity="center"
                    android:background="@drawable/circle_bg_white">

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="16dp"
                        android:layout_centerInParent="true"
                        android:src="@drawable/twitter_icon" />
                </RelativeLayout>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/opensans_regular"
                    android:paddingTop="12dp"
                    android:text="Twitter"
                    android:textSize="13dp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/social_btn_four"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingStart="50dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/social_btn_three"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintWidth_percent="0.25">

                <RelativeLayout
                    android:layout_width="55dp"
                    android:layout_height="55dp"
                    android:layout_gravity="center"
                    android:background="@drawable/circle_bg_white">

                    <ImageView
                        android:layout_width="23dp"
                        android:layout_height="23dp"
                        android:layout_centerInParent="true"
                        android:src="@drawable/instagram_icon" />
                </RelativeLayout>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/opensans_regular"
                    android:paddingTop="12dp"
                    android:text="Instagram"
                    android:textSize="13dp" />
            </LinearLayout>
        </androidx.constraintlayout.widget.ConstraintLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

What would be the best way to ensure that my app matches the design? Should I consider a different layout technique or fine-tune my existing constraints?

2

textSize should be “sp” not “dp” for text elements - thats probably messing up your scaling across devices. also those hardcoded margins like 25dp wont match figma unless you’re using the exact same screen density as your design.

3

I had similar problems when transitioning from Figma to Android layouts. The main culprit in your case seems to be the mixed usage of fixed widths and weight attributes in your social buttons section.

Instead of using layout_weight=“1” combined with fixed width=“280dp” in your search bar, try using 0dp width with constraints to start and end of parent. This makes ConstraintLayout handle the sizing properly.

For the social buttons, remove those manual paddingStart values and use proper constraint chains with spread distribution. The padding you added is likely pushing elements out of bounds. Also, your layout_constraintWidth_percent=“0.25” conflicts with the wrap_content width - pick one approach.

One thing that helped me was using the Layout Inspector in Android Studio to see exactly which views were getting clipped and why. Often it revealed constraint conflicts that weren’t obvious in the XML. Try setting all your social button containers to 0dp width and let the percentage constraints handle the sizing instead.

4

mixing constraintlayout with linearlayout is causing issues. try using only constraintlayout and chains for the social buttons instead of that nested mess. also, check if your views have proper width/height ratios to match figma specs - truncation can happen due to incorrect aspect ratios, not just constraints.