Develop Reference

Hint and User Input overlaying in a TextView

I've never seen this happen before, and have no idea what is causing it, my first choice was to hide hint with a piece of java code within the fragment, but I failed so hard at in that now I just wanna find a XML solution.
This is happening to every field, and I can't find anything wrong with the layout here, any insights?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:orientation="vertical">
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/faq_contato_nome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_nome_contato"
android:inputType="textPersonName"
android:lines="1"
android:padding="10dp"
android:textSize="15sp" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/faq_contato_telefone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_telefone_contato"
android:inputType="phone"
android:lines="1"
android:padding="10dip"
android:textSize="15sp" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/faq_contato_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_email_contato"
android:inputType="textEmailAddress"
android:lines="1"
android:padding="10dip"
android:textSize="15sp" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/faq_contato_nome_empresa"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_empresa_contato"
android:inputType="text"
android:lines="1"
android:padding="10dip"
android:textSize="15sp" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/faq_contato_telefone_empresa"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_tel_empresa_contato"
android:inputType="phone"
android:lines="1"
android:padding="10dip"
android:textSize="15sp" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/faq_contato_matricula"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Digite sua matricula (Opcional)"
android:inputType="number"
android:lines="1"
android:padding="10dip"
android:textSize="15sp" />
</com.google.android.material.textfield.TextInputLayout>
<sinapse.com.br.estilo.component.CustonSpinner
android:id="#+id/faq_contato_spinner_assunto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:hintText="#string/title_spinner" />
<EditText
android:id="#+id/faq_contato_campo_mensagem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:gravity="center_horizontal|bottom"
android:hint="#string/hint_areamensagem"
android:inputType="textMultiLine" />
<TextView
android:id="#+id/faq_contato_numero_caracteres"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="#string/caracteres" />
<com.google.android.material.button.MaterialButton
android:id="#+id/faq_contato_btn_enviar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:layout_gravity="right"
android:text="#string/enviar" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/faq_contato_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="13dp" />
</LinearLayout>
</ScrollView>

The problem is you setting a padding to your EditText, that's why the EditText components are not being given enough space to accommodate user's input without having to overlay with the hint. Simply get rid of paddings in your EditText components and it will run just fine. :)
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/faq_contato_telefone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_telefone_contato"
android:inputType="phone"
android:lines="1"
android:textSize="15sp" />
</com.google.android.material.textfield.TextInputLayout>
If you DO NOT want your hint to float. (If you want your hint to completely disappear as soon as the user taps on the EditText box)
You can add app:hintEnabled="false" in your TextInputLayout.
In this case, I think you can safely add your padding back on because the hint will disappear on user's tap.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintEnabled="false">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/faq_contato_telefone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_telefone_contato"
android:inputType="phone"
android:lines="1"
android:padding="10dp"
android:textSize="15sp" />
</com.google.android.material.textfield.TextInputLayout>

Try with the following code may be it will help you.
//Remove padding from edittext
//Try to set hint on TextInputLayout instead of EditText
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_nome_contato">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/faq_contato_nome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:lines="1"
android:textSize="15sp" />
</com.google.android.material.textfield.TextInputLayout>

Android TextView being cut off by gravity=center

I'm displaying a lot of textviews in a linear layout and setting gravity to center causes the words to be cut off. I'm runnning a Nexus S in the emulator.
<LinearLayout
android:layout_width="585dp"
android:layout_height="810dp"
android:orientation="vertical"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<TextView
android:id="#+id/TeamName4"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Team 2 Name"
android:textAppearance="#android:style/TextAppearance.Theme"
android:textSize="20sp"
android:textStyle="bold|italic"/>
<EditText
android:gravity="center"
android:id="#+id/TeamScore1"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number" />
<TextView
android:id="#+id/TeamName2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Team 2 Name"
android:textAppearance="#android:style/TextAppearance.Theme"
android:textSize="20sp"
android:textStyle="bold|italic" />
<EditText
android:gravity="center"
android:id="#+id/TeamScore2"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberSigned" />
That's a snippet of the code. I experience the same issue with all my other textViews. Any advice how to make the text appear in the center of the screen?

Don't use hardcoded height and width for linear layout
Use match_parent as height and width for LinearLayout for your particular code.
Always prefer to use match_parent or wrap_content, it will be helpful when your application runs on devices with different screen sizes
Go through below link for more understanding
https://developer.android.com/training/multiscreen/screensizes#TaskUseWrapMatchPar

Modify your LinearLayout Properties like:
(It will make your text appear in the center of the screen)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/TeamName4"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Team 2 Name"
android:textAppearance="#android:style/TextAppearance.Theme"
android:textSize="20sp"
android:textStyle="bold|italic"/>
.......
.......
</LinearLayout>

Use code like this:
Why you set a height and width Static/Fixed. Generally use a height and width "wrapcontent" or "matchparent"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<TextView
android:id="#+id/TeamName4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Team 2 Name"
android:textAppearance="#android:style/TextAppearance.Theme"
android:textSize="20sp"
android:textStyle="bold|italic" />
<EditText
android:id="#+id/TeamScore1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="center"
android:inputType="number" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<TextView
android:id="#+id/TeamName2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Team 2 Name"
android:textAppearance="#android:style/TextAppearance.Theme"
android:textSize="20sp"
android:textStyle="bold|italic" />
<EditText
android:id="#+id/TeamScore2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="center"
android:inputType="numberSigned" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Aligning Text and Icons in a TextView Android

i am working on a ui design assignment in android studio. i have been able to get this
here is my code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context=".MainActivity">
<ImageView
android:id="#+id/topImage"
android:src="#drawable/shebaartist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop" />
<TextView android:text="Event Planning and Decoration, Beads and Jewelry Making, Props and Bridals, Aso-Oke #WeMakePoshDesign"
android:drawableLeft="#drawable/about"
android:layout_below="#+id/topImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:fontFamily="sans-serif-black"
android:background="#F0E68C"
android:id="#+id/descText" />
<TextView android:text="150 Alimi Rd, Alore, Ilorin, Kwara State"
android:drawableLeft="#drawable/marker"
android:layout_below="#+id/descText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:fontFamily="sans-serif-light"
android:id="#+id/addrText"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView android:text="shebaeventss#gmail.com"
android:drawableLeft="#drawable/message"
android:layout_below="#+id/addrText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:drawablePadding="5dp"
android:padding="10dp"
android:background="#F0E68C"
android:textSize="16dp"
android:fontFamily="sans-serif-black"
android:id="#+id/emailText"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView android:text="07055393673"
android:drawableLeft="#drawable/phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:fontFamily="sans-serif-light"
android:id="#+id/mobilenoText"
android:layout_below="#+id/emailText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
I want to align the icons and text in the text views on the same line and with the same size. my question is that how do i do this? please point out my errors and help me with fixing this.

If this is what you want, then you just need change gravity from
android:gravity="center" to android:gravity="center_vertical"

Please add gravity property to your TextView with center alignment and
icon size change with 24dp.
<TextView android:text="Event Planning and Decoration, Beads and Jewelry Making, Props and Bridals, Aso-Oke #WeMakePoshDesign"
android:drawableLeft="#drawable/about"
android:layout_below="#+id/topImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawablePadding="5dp"
android:padding="10dp"
android:textSize="16dp"
android:gravity="center"
android:fontFamily="sans-serif-black"
android:background="#F0E68C"
android:id="#+id/descText" />

It seems you want to use a compound drawable, see this answer:
How do I use a compound drawable instead of a LinearLayout that contains an ImageView and a TextView

Floating Action Button over Scrollview?

I'm revamping my app to follow look more "Material Design-ey", but have run into trouble with the FAB. I have a scrollview with two floating action buttons:
When I scroll to the bottom, the FABs cover my content. I want to be able to scroll a little past the bottom so the FABs can be align_parent_bottom without overlapping anything:
(should be able to scroll a little more for FABs to be aligned below)
(Before scrolling down)
How do I create extra space at the bottom of my app after scrolling down to the max for the FABs to rest?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#68d9cc">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#68d9cc">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:elevation="20dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:id="#+id/back"
android:onClick="cancel"
android:src="#drawable/ic_arrow_back_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test example"
android:textSize="22sp"
android:id="#+id/header"
android:textColor="#color/textColorPrimary"
android:layout_gravity="center"
android:paddingRight="10dp"
/>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/linear"
android:layout_marginBottom="55dp"
android:layout_below="#+id/textView12"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="#android:color/black"
android:layout_below="#+id/textView12"
android:text="textview:"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView4"
android:layout_alignBottom="#+id/textView4"
android:layout_toEndOf="#+id/textView4"
android:layout_toRightOf="#+id/textView4"
android:imeOptions="actionDone"
android:inputType="text" />
</LinearLayout>
<ListView
android:id="#+id/listview"
android:layout_width="wrap_content"
android:choiceMode="singleChoice"
android:layout_height="300dp"
android:layout_below="#+id/toolbar"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:elevation="9dp">
</ListView>
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="78dp"
android:gravity="center_horizontal"
android:text="textview"
android:textColor="#000000"
android:textSize="18sp"
android:layout_below="#+id/listview"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/cancel"
android:onClick="cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:clickable="true"
app:fabSize="normal"
app:srcCompat="#drawable/ic_close_black_24dp"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/done"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:clickable="true"
app:fabSize="normal"
app:srcCompat="#drawable/ic_done_black_24dp"
/>
</RelativeLayout>

If you are aiming for Material Design as you mentioned, then putting those Floating Action Button like that are not encouraged. Either stack them on top of each other on the right, or have one where it will open multiple mini FAB on click.
An easy fix however I can think of here would be to add paddingBottom to your layout so it would have more "content" and it would scroll up more.
I would read this section if you haven't already.
https://material.io/guidelines/components/buttons-floating-action-button.html#

Change height of a custom actionbar using java

I am stuck in an issue. I'm a junior android developer. I want to change the height of my custom action bar on a click event. But I'm not able to find a way
how to change actionbar's height. I saw other related posts, but didnt find exactly what I need.
I want to toggle a hidden layout part of action bar, upon click event. The height of action should fit to the content size each time.
<?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="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/header_bg"
android:orientation="horizontal"
android:padding="5dp"
android:visibility="visible"
android:weightSum="5" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2.69"
android:src="#drawable/header_image" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:contentDescription="Seperator"
android:src="#drawable/header_seperator" />
<ImageView
android:id="#+id/iv_show_searchbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.8"
android:contentDescription="search"
android:src="#drawable/header_search" />
<ImageView
android:id="#+id/iv_hidesearchbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.8"
android:contentDescription="search"
android:src="#drawable/header_search_active"
android:visibility="gone" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:contentDescription="Seperator"
android:src="#drawable/header_seperator" />
<ImageView
android:id="#+id/iv_header_navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.6"
android:contentDescription="navigation"
android:src="#drawable/header_navigation" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="57dp"
android:background="#F0F0F0"
android:orientation="horizontal"
android:padding="4dp"
android:weightSum="5"
android:visibility="gone" >
<EditText
android:id="#+id/editText1"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginRight="10dp"
android:layout_weight="3"
android:background="#drawable/fields"
android:ems="10"
android:hint="Keyword"
android:padding="15dp"
android:textSize="20sp" >
<requestFocus />
</EditText>
<Spinner
android:id="#+id/spinner1"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="2.0"
android:background="#drawable/header_language"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</LinearLayout>
</LinearLayout>
On a click event, i want to toggle the second inner linear layout. Is It possible? or should i use fragments in activity?

If what you mean is that you want make the 2nd LinearLayout (the one that has visibility:"gone") be visible on a click event. You have first to set an id for that layout and do something like this:
LinearLayout yourLinearLayout =(LinearLayout)findViewById(R.id.yourLinearLayoutId);
and inside your click event
yourLinearLayout.setVisibility(View.Visible);
that will make your layout appear and because the father has layout_height="wrap_content" it will fit to the size of the child when it is visible.