Android studio HINT text design - text

So i am making an application for school. We have to use Android studio.
I want to make a bar with an icon and a placeholder (android: hint).
When i make this with this code, the hint text is at the left of the box.
<EditText
android:layout_width="280dp"
android:layout_height="55dp"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/email"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:background="#drawable/email"
android:hint="Email" <---
/>
When i do it like this, the hint text is centered:
<EditText
android:layout_width="280dp"
android:layout_height="55dp"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/email"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:background="#drawable/email"
android:hint="Email"
android:gravity="center" <---
/>
How can i change the place of my hint text in other ways? I want it to be in 1/3 of the box.
But i have no idea how to do it.
Thanks in advance

Just dont use the gravity and use padding left :).
<EditText
android:layout_width="280dp"
android:layout_height="55dp"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/email"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:background="#drawable/email"
android:hint="Email"
android:paddingLeft="70dp" />

Related

Design Android dev screen sizes

Hi I need some advice/help
I am designing a app for educational purposes, but battling with different screen sizes.
I am using Android studio to create the screen layouts.
What I did so far works well up and until a point.
I have tried to use constraint layout / Linear layout and relative layout but all have the same issues.
I create my main layout as normal, and then I create new layout resource files with the same activity name but with different densities.
But for some odd reason some of my test phones picks up the certain density layout but is completely out of proportion, even though it looks correct on the layout on the IDE but the minute it is ported to the phone its out.
What would be the best way to create layouts that can cater for all layouts?
here is an example of the layout I have
<?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"
tools:context=".login.LoginActivity"
android:background="#drawable/background"
android:padding="10dp">
<TextView
android:id="#+id/tv_appName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="250dp"
android:layout_marginEnd="8dp"
android:text="#string/app_name"
android:textColor="#color/colorAccent"
style="#style/Base.TextAppearance.AppCompat.Headline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:textAlignment="center"
android:textStyle="bold"
android:textSize="28dp"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="50dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_appName"
android:background="#drawable/input_shape"
android:padding="15dp"
android:textColorHint="#color/colorAccent"
android:textColor="#color/colorAccent"
android:id="#+id/edittext1"
android:singleLine="true"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="50dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/edittext1"
android:background="#drawable/input_shape"
android:padding="15dp"
android:textColorHint="#color/colorAccent"
android:textColor="#color/colorAccent"
android:id="#+id/edittext2"
android:singleLine="true"/>
<Button
android:id="#+id/btn_button1"
android:layout_width="134dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="#+id/edittext2"
app:layout_constraintTop_toBottomOf="#+id/edittext2"
android:background="#drawable/btn_shape"
android:text="Button 1"/>
<Button
android:id="#+id/btn_button2"
android:layout_width="134dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="#+id/edittext2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/btn_button1"
app:layout_constraintTop_toBottomOf="#+id/btn_button1"
android:background="#drawable/btn_shape"
android:text="Button 2"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I am pretty sure that you are using a fixed size for your views.
Never use a fixed size for a view. If you are using a ConstraintLayout then set the layout_width and layout_height of any view to either 0dp (which will make the view as big as it can be as long as it doesn't go past the constraints) or wrap_content (which will automatically make the view only the size it needs). On other layouts instead of using 0dp for making the view as big as it can be, use match_parent. wrap_content does the same thing in every layout.

Android RelativeLayout with wrap_content too small to fit children

Here is a simple RelativeLayout with 4 controls arranged in a tabular format.
When displayed, the confirmpassword box is clipped at the bottom. It's as if "wrap_content" is not correctly calculating the height of the children. Any ideas?
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/passwordlabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="34dp"
android:text="Password"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/passwordlabel"
android:layout_alignLeft="#+id/confirmpassword"
android:layout_toRightOf="#id/passwordlabel"
android:ems="10"
android:inputType="textPassword" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/confirmpasslabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/passwordlabel"
android:layout_below="#id/passwordlabel"
android:text="Confirm Password"
android:layout_marginTop="34dp"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/confirmpassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/confirmpasslabel"
android:layout_toRightOf="#id/confirmpasslabel"
android:layout_marginLeft="15dp"
android:ems="10"
android:inputType="textPassword" />
</RelativeLayout>
This is what it looks like:
I have tried adding padding and/or margins to both of the bottom controls which has no effect (and strikes me as a hack anyway).
NB:- I had a similar problem before which a kindly soul solved essentially by splitting apart the RelativeLayout. I don't think that's possible here (it may be) but I'm concerned I'm either doing something completely wrong, or the RelativeLayout has a massive bug which seems under-documented.
Anyone able to shed light on this? TIA!
It does seem like a bit of a bug. I couldn't get it to work properly (without changing it somehow) with a RelativeLayout - something with the margins was throwing it off.
As a workaround, try a TableLayout:
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow android:layout_marginTop="34dp">
<TextView
android:id="#+id/passwordlabel"
android:text="Password"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/password"
android:ems="10"
android:inputType="textPassword" >
<requestFocus />
</EditText>
</TableRow>
<TableRow android:layout_marginTop="34dp">
<TextView
android:id="#+id/confirmpasslabel"
android:text="Confirm Password"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/confirmpassword"
android:layout_marginLeft="15dp"
android:ems="10"
android:inputType="textPassword" />
</TableRow>
</TableLayout>

Custom spinner style

How can I style/customize spinner like shown below using xml?
I can make white background with border, but i can't set icon on the left and arrow on the right.
If your problem is with a layout that sets the icon to the left and arrow to the right, the following should work.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/icon" />
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
</RelativeLayout>
I'm at work, so I can't test this out, but I think it should work.

Possible overdraw: Root element paints background

In my application, it appears this warning on the lints of Android:
Possible overdraw: Root element paints background #drawable/main with
a theme that also paints a background (inferred theme is #android:style/Theme)
I wanna know how to correct this mistake, cause after checking and checking on internet, I just found that it is decreasing application speed cause it reload two times the background to put this source.
This is the source of my layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/main"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="120dp"
android:layout_centerHorizontal="true"
android:layout_marginLeft="20dp"
android:text="#string/alta1"
android:textColor="#000"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true"
android:text="#string/alta2"
android:layout_marginLeft="20dp"
android:textColor="#000"
android:textAppearance="?android:attr/textAppearanceSmall" />
<Button
android:id="#+id/continuaralta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/textView2"
android:layout_marginRight="50dp"
android:layout_marginTop="36dp"
android:textStyle="bold"
android:background="#drawable/boton"
android:text="#string/continuar" />
<Button
android:id="#+id/saliralta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/continuaralta"
android:layout_alignBottom="#+id/continuaralta"
android:layout_marginRight="15dp"
android:layout_toLeftOf="#+id/continuaralta"
android:background="#drawable/boton"
android:textStyle="bold"
android:text="#string/salir" />
Neil Sainsbury, at http://www.earthtoneil.com/, says that Romain Guy has addressed the underlying issue at http://android-developers.blogspot.com/2009/03/window-backgrounds-ui-speed.html. See Neil's blog and search for your error message. Then, go to http://developer.android.com/guide/topics/ui/themes.html to learn how to apply background themes to the app as a whole and to individual activities.
This approach will at least cause the error message to no longer appear. Hitting the two-arrows icon to refresh the warnings in the lint window after making the fix was necessary in my case.

Android UI: how to align a TextView and two radiobuttons to occupy 1/3rd parent each?

I'm sure it's very simple and I'm just being stupid, but I've tried numerous variants and still can't get it working. What's worse - these 3 components are aligned exactly the way I want in the graphical editor in Eclipse, but not on the real device. I only get to align it to 50% for TextView and RadioGroup.
The XML goes like this currently (here I presumed RadioGroup is kind of LinearLayout):
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
style="#style/ButtonStyle"
android:layout_width="wrap_content"
android:text="#string/CC_Direction_caption" />
<RadioButton
android:id="#+id/rb_toCamera"
style="#style/ButtonStyle"
android:text="#string/CC_Backwards_Caption" />
<RadioButton
android:id="#+id/rb_toInfinity"
style="#style/ButtonStyle"
android:text="#string/CC_Forwards_Caption" />
</RadioGroup>
And the ButtonStyle is:
<item name="android:layout_width">0dip</item>
<item name="android:layout_height">70dp</item>
<item name="android:layout_weight">1</item>
And all this is inside a TableRow.
Use android:layout_centerVertical="true" in your TextView.
Below is a sample:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<TextView
android:id="#+id/typeLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="GroupBox Label"
android:textColor="#color/black"
android:textSize="14dp" />
<RadioGroup
android:id="#+id/radioGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_alignParentRight="true"
android:gravity="center"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Radio 1 Text"
android:textColor="#color/blue" />
<RadioButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Radio 2 t"
android:textColor="#color/blue" />
</RadioGroup>
</RelativeLayout>
Try adding android:layout_weight="1" to all three elements. This specifies the relative weight every element has to the others. The higher this value is the less weight the element gets.
oh, and wrap everything in a linear layout (didn't see you didn't add a layout first).
You should use a Linear Layout with weights on your elements which will make it pretty easy to achieve what you want.
Check the docs for info on Linear Layout and weights.
http://developer.android.com/guide/topics/ui/layout-objects.html
Try changing layout_width to "wrap_content" for radio buttons as well. You have already done it for the text field.

Resources