Is there a way to perfectly align a left-aligned drawable with a hint in a TextInputEditText and position them closer to the bottom of the text input field?

Struggling to align the drawableLeft horizontally with the hint and bring them closer to the bottom of the TextInputEditText. I have experimented with various attributes but haven't been successful so far. Wondering if I might be overlooking something important here.
The drawable appears to be in the right place, but it's the alignment of the hint below that is causing issues.

<?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/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tv_login_dialog_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello!"
        android:textAlignment="center"
        android:textColor="@color/teal_700"
        android:textSize="32sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/til_email_user_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:boxBackgroundColor="@android:color/transparent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_login_dialog_title">
        >

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/ti_et_email_user_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/ic_baseline_email_24"
            android:gravity="bottom"
            android:hint="@string/field_hint_email"
            android:inputType="textEmailAddress" />

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/til_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:boxBackgroundColor="@android:color/transparent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/til_email_user_id">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/ti_et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/ic_baseline_lock_24"
            android:gravity="bottom"
            android:hint="@string/field_hint_password" />
    </com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

https://i.sstatic.net/jlePx.png

Answer №1

Simply Remove

android:drawableLeft="Drawable"

from the TextInputEditText and instead, insert

app:startIconDrawable="Drawable"

inside the TextInputLayout

Alternatively, you can update your code with the following:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/til_email_user_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/share_card"
        android:background="@android:color/transparent"
        app:boxBackgroundColor="@android:color/transparent"
        app:startIconDrawable="@drawable/icn_sort_by"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_login_dialog_title">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/ti_et_email_user_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress" />

    </com.google.android.material.textfield.TextInputLayout>

Answer №2

Set the height and width of your drawable to 24dp. Next, incorporate these into your TextInputEditText. Please note that this is not an endorsed solution. However, I personally implement it in this manner consistently.

android:paddingVertical="10dp"
android:drawablePadding="10dp"
android:gravity="center_vertical"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Rotate background image upon each visit

I have a collection of around 50 background images that I want to display randomly each time a user visits my website. The idea is to provide a unique background image for every visit, without saving any information about which image was previously display ...

When combining Symfony, Twig, and Semantic UI, users may encounter an issue where the background image fails to display

Can someone assist me in identifying the issue with my code? I am using Symfony 2.8, Semantic UI, and Twig, attempting to set a background image on my site. The modification is being made to my base.html.twig file. I have attempted: Using different ima ...

Exploring Nested JSON Retrieval Using GSON

Transitioning from iOS to Android, I am diving into GSON and Retrofit for JSON parsing. Taking the example of the JSON snippet below: "distance" : { "text" : "102 ft", "value" : 31 } My goal is to extract only the value from the distance object ...

Crafting a unique image size for an ACF gallery: A step-by-step guide

I'm currently utilizing the capabilities of Advanced Custom Fields to build an image gallery. I originally had the image size set to thumbnail, but when I tried setting it to medium it didn't seem to work, leaving me unsure if there was something ...

What steps should be followed to effectively incorporate Google Fonts into a Material UI custom theme for typography in a React/TypeScript project

Hey there, I'm currently working on incorporating Google fonts into a custom Material UI theme as the global font. However, I'm facing an issue where the font-weight setting is not being applied. It seems to only display the normal weight of 400. ...

An oversized image creates additional room

I currently have a board that consists of 3 blocks, with each block containing a grid of 25 squares. These squares are 40x40px in size with a margin around them, resulting in an overall size of 220px x 220px. Each square also has some space above and below ...

Can you explain the distinction between android.support.v4.app.fragment and androidx.fragment.app.FragmentActivity?

It seems like there is a X under import androidx.fragment.app.FragmentActivity while attempting to create a fragmentActivity in my project. However, when looking at a sample project, it imports android.support.v4.app.fragment instead. I am curious about ...

The error message "ERR_CONNECTION_TIMED_OUT when trying to access Google APIs fonts

Upon deploying my web project on the client server, I encountered an error and noticed slow page loading. GET https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic net::ERR_CONNECTION_TIMED_OUT The browser ...

Having trouble with @Mui and modularized scss conflicting sporadically. Is there a way to reliably overwrite @mui default styling using scss modules?

Currently, I am enhancing an existing React app that utilizes @mui/material components. The SCSS modules are linked to my JavaScript components, and I import them along with the material components like this. // STYLE IMPORT import styles from "./logi ...

Transforming the hover color of a dropdown in Material-UI Select components using React

I'm struggling to change the color of my dropdown hover to green. I attempted using inline CSS and makeStyle(), but neither of these solutions seem to be working for me. I'm unsure how to go about changing this hover color. If anyone has any insi ...

After launching, the Android app is showing a blank screen

When I press the "Run as an Android Application" button in Eclipse, the console displays the following information: [2014-06-05 20:07:18 - StudentConnect] Android Launch! [2014-06-05 20:07:18 - StudentConnect] adb is running normally. [2014-06-05 20:07:18 ...

Exploring the power of Bootstrap 5 for vertical alignment

I am currently utilizing the flexbox grid from Bootstrap 5 to create a mobile-first Angular web application that is responsive. For the home screen of my app, I want to incorporate these 3 elements : The title of the app displayed at the top A series of ...

Instructions on changing the color and font weight of an asterisk within a Textfield using Material UI

Is there a way to style the asterisk in red and bold within a Textfield using material UI? I have a placeholder text without a label, as my label is null or empty. I would like to make the placeholder star RED. Is this possible? Here is the code snippet: h ...

Easily accessible button and span located on the right side

One issue I'm facing is that the button and span are not aligned on the same line. Is there a way to resolve this? <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/c ...

Problem with Android Browser related to jQuery Ajax and appcache integration

We are encountering an issue with the built-in browser on Android versions 4.0, 4.1, and 4.2. When initially loaded, the ajax call functions as expected; pressing the run Ajax button multiple times yields accurate results, even when disconnected from the i ...

Login to Facebook using activity 1, then share a post on your Facebook wall with activity 2

I'm currently in the process of developing an Android app that utilizes Facebook to post status updates to the user's wall. The integration part has been successfully implemented, with the use of Facebook SDK 3.0. My user interface is structured ...

Alignment issue: Center alignment failing to work correctly

I'm currently working on a navigation bar with a central title and links to other pages aligned to the right. Despite using text-align: center, the title remains off-center. I've implemented a flexbox to ensure that the title and links are on the ...

The CSS file is not updating

Recently, I updated an HTML file and the global CSS style sheet on my personal website. While the changes appear correctly on my computer, the website still reflects the old settings. I've taken several steps to troubleshoot this issue: Emptied my b ...

The browser has disregarded a CSS rule

Hey there, I have a question that may seem silly, but I just can't seem to find the answer anywhere. Please take a look at this fiddle: I need to remove #Navigation in the CSS declaration below: #Navigation .stretch { ... } so it should look like ...

Is there a way to modify or alter the layout specifically for mobile devices?

Currently, my desktop version displays the image first followed by content (h1, p, button), and then repeats in that order. However, I would like to restructure the HTML for the mobile version to make it more user-friendly. How can I achieve this without d ...