Search code examples
androidxmlandroid-layoutandroid-constraintlayout

Space between buttons not visible on small screen

I was making the HomeScreen of my application. After I finished it was the perfect on Design Screen. But it doesn't look anything like that in the Pixel 3a emulator and even worse on my Xiaomi Redmi 4x. How can make it look like Design Screen variant both on the emulator and on my phone.

I tried using ConstraintLayout with View but it didn't work. Any other solutions?

Here is the screenshot's Desing Screen

Pixel 3a emulator

Phone Redmi 4X I have uploaded screenshot but it doesn't seem to work

<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/main_screen_image"
    android:fitsSystemWindows="true"
    tools:context=".HomeScreen">
    <!--    tools:openDrawer="start"-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_200"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </LinearLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="20dp">

        <ImageView
            android:id="@+id/homeScreenLogo"
            android:layout_width="160dp"
            android:layout_height="160dp"
            android:layout_gravity="center"
            android:layout_marginTop="70dp"
            android:src="@drawable/kaznau_logo"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnAboutUniversity"
            android:layout_width="160dp"
            android:layout_height="50dp"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="70dp"
            android:drawableLeft="@drawable/ic_university"
            android:text="@string/s_about_kaznau"
            android:textSize="14sp"
            app:cornerRadius="5dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/homeScreenLogo" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnFaculties"
            android:layout_width="160dp"
            android:layout_height="50dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:drawableLeft="@drawable/ic_faculty"
            android:text="Факультет"
            android:textSize="14sp"
            app:cornerRadius="5dp"
            app:layout_constraintBottom_toBottomOf="@+id/btnAboutUniversity"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/btnAboutUniversity" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnNews"
            android:layout_width="160dp"
            android:layout_height="50dp"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="8dp"
            android:drawableLeft="@drawable/ic_baseline_article_24"
            android:text="@string/s_news"
            android:textSize="14sp"
            app:cornerRadius="5dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btnAboutUniversity" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnEvents"
            android:layout_width="160dp"
            android:layout_height="50dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:drawableLeft="@drawable/ic_baseline_event_24"
            android:text="@string/events_name"
            android:textSize="14sp"
            app:cornerRadius="5dp"
            app:layout_constraintBottom_toBottomOf="@+id/btnNews"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/btnNews" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnLocations"
            android:layout_width="160dp"
            android:layout_height="50dp"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="8dp"
            android:drawableLeft="@drawable/ic_location"
            android:text="@string/s_locations"
            android:textSize="14sp"
            app:cornerRadius="5dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btnNews" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnCampus"
            android:layout_width="160dp"
            android:layout_height="50dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:drawableLeft="@drawable/ic_campus"
            android:text="@string/s_campus"
            android:textSize="14sp"
            app:cornerRadius="5dp"
            app:layout_constraintBottom_toBottomOf="@+id/btnLocations"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/btnLocations" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnLinks"
            android:layout_width="160dp"
            android:layout_height="50dp"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="8dp"
            android:drawableLeft="@drawable/ic_links"
            android:text="@string/s_links"
            android:textSize="14sp"
            app:cornerRadius="5dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btnLocations" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnContacts"
            android:layout_width="160dp"
            android:layout_height="50dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:drawableLeft="@drawable/ic_contacts"
            android:text="@string/s_contacs"
            android:textSize="14sp"
            app:cornerRadius="5dp"
            app:layout_constraintBottom_toBottomOf="@+id/btnLinks"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/btnLinks" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnAgrodamu"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginTop="8dp"
            android:text="@string/s_agrodamu"
            android:textSize="14sp"
            app:cornerRadius="5dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btnLinks" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.drawerlayout.widget.DrawerLayout>
Solution

  • I would not recommend to provide fixed values in the layout which is the reason why it is getting distorted on screen sizes with different densities, rather work with percentage. Also no need to provide outer edge margins to your buttons since you have already provided padding to parent(ConstraintLayout). Just provide left margin to right column buttons. Here is something very similar I would approach. This is for one of the buttons, you can apply the same to rest. Also please refer to the width and bias attributes specifically and adjust them as per your design.

    <com.google.android.material.button.MaterialButton
            android:id="@+id/btnFaculties"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginLeft="16dp"
            android:drawableLeft="@drawable/ic_faculty"
            android:text="Факультет"
            android:textSize="14sp"
            app:cornerRadius="5dp"
            app:layout_constraintBottom_toBottomOf="@+id/btnAboutUniversity"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/btnAboutUniversity" 
            app:layout_constraintWidth_percent="0.2" 
            app:layout_constraintHorizontal_bias="0.5"/>