How to fix the resizable area of button (image) in Android Studio being bigger than the button itself?

Question

!!Beginner alert!!

I designed my app in Adobe XD. Now I started to introduce the design in Android Studio. However, whenever I use a resource from the resource manager and drop it in the designer, the resizable area is way bigger than the image which i think will affect the clickable area of it. Everything looks good in Adobe XD, the resizable area is the border of the button. How can I do this in Android Studio? I will attach images below. Help is greatly appreciated.

How it's supposed to look (the look in Adobe XD)

The resizable area of the button in Adobe XD

The resizable area of the button in Android Studio

How can I make Android Studio have the same resizable area as Adobe XD?

I implemented the XML code below:

<?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/black"
tools:context=".Dashboard">

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="25dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="10dp"
    app:layout_constraintEnd_toStartOf="@+id/imageView5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/resmonevo" />

<ImageView
    android:id="@+id/imageView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="9dp"
    app:layout_constraintStart_toStartOf="@+id/imageView3"
    app:layout_constraintTop_toBottomOf="@+id/imageView3"
    app:srcCompat="@drawable/red_gradient_line" />

<ImageView
    android:id="@+id/imageView5"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginEnd="121dp"
    app:layout_constraintBottom_toBottomOf="@+id/imageView3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/imageView3"
    app:layout_constraintTop_toTopOf="@+id/imageView3"
    app:srcCompat="@drawable/dashboard" />

<ImageView
    android:id="@+id/imageView14"
    android:layout_width="0dp"
    android:layout_height="115dp"
    android:layout_marginStart="5dp"
    android:layout_marginTop="7dp"
    android:layout_marginEnd="5dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView4"
    app:srcCompat="@drawable/rectangle_210" />

<ImageView
    android:id="@+id/imageView15"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="25dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/imageView18"
    app:srcCompat="@drawable/rectangle_221" />

<ImageView
    android:id="@+id/imageView18"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="18dp"
    android:layout_marginBottom="1dp"
    app:layout_constraintBottom_toTopOf="@+id/textView2"
    app:layout_constraintStart_toEndOf="@+id/imageView15"
    app:srcCompat="@drawable/welcome_" />

<ImageView
    android:id="@+id/imageView19"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="47dp"
    android:layout_marginEnd="27dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/imageView14"
    app:srcCompat="@drawable/how_are_you_today" />

<ImageView
    android:id="@+id/imageView20"
    android:layout_width="21dp"
    android:layout_height="19dp"
    app:layout_constraintBottom_toBottomOf="@+id/imageView15"
    app:layout_constraintEnd_toEndOf="@+id/imageView15"
    app:layout_constraintStart_toStartOf="@+id/imageView15"
    app:layout_constraintTop_toTopOf="@+id/imageView15"
    app:srcCompat="@drawable/ic_person_outline_24px" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="32dp"
    android:layout_marginEnd="9dp"
    android:fontFamily="@font/montserrat"
    android:text="Username"
    android:textColor="#FFFFFF"
    android:textSize="24sp"
    app:layout_constraintBottom_toBottomOf="@+id/imageView19"
    app:layout_constraintEnd_toStartOf="@+id/imageView19"
    app:layout_constraintStart_toStartOf="@+id/imageView18"
    app:layout_constraintTop_toBottomOf="@+id/imageView19" />

<ImageView
    android:id="@+id/imageView8"
    android:layout_width="390dp"
    android:layout_height="351dp"
    android:adjustViewBounds="true"
    app:srcCompat="@drawable/rectangle_187"
    tools:layout_editor_absoluteX="-39dp"
    tools:layout_editor_absoluteY="158dp" />

    </androidx.constraintlayout.widget.ConstraintLayout>

The XML code for the most recent button is :

 <ImageView
    android:id="@+id/imageView8"
    android:layout_width="390dp"
    android:layout_height="351dp"
    android:adjustViewBounds="true"
    app:srcCompat="@drawable/rectangle_187"
    tools:layout_editor_absoluteX="-39dp"
    tools:layout_editor_absoluteY="158dp" />

Here is how my mess looks

Kindly share the code, so that we can help you with an exact solution. — Kamal Nayan, Apr 09 '21 at 11:08
@KamalNayan i edited the post and added the XML code. I kindly appreciate it if you could check it out! — WarHawkV0iD, Apr 09 '21 at 11:18

score 0 · Answer 1 · answered Apr 09 '21 at 11:31

The problem what I can figure out is that you are using static size in width I will suggest you to use Linear layout as parent and inside it have a Image view as child because you are statically defining the width of image view. so try something like this:

Kindly use imageView in your case I have used MaterialTextView just for an instance

   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="2"
    android:orientation="horizontal"
    android:padding="12dp">

    <com.google.android.material.textview.MaterialTextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.3"
        android:fontFamily="@font/cantata_one"
        android:text="Email"/>




    <com.google.android.material.textview.MaterialTextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.7"
        android:id="@+id/layout_recycler_all_cust_email"
        android:fontFamily="@font/capriola"
        android:textColor="#706E6E"
        android:text="Email "/>


</LinearLayout>

and in the above code, you can see i have assigned weightsum to the LinearLayout and accordingly wait to it's children so you should try this. This will make your UI Flexible according to the device size and in the android:layout_height="wrap_content" you can use your value like 350DP or something else.

How to fix the resizable area of button (image) in Android Studio being bigger than the button itself?

1 Answers1