TextView showing on design preview, but not in actual Android app - android

I have an XML layout in a second Activity that shows one of two LinearLayouts based on if a user is logged in or not, and the TextView I have never shows the text in the app, but it does render it correctly when I look at the "Design" panel in the layout editor
The TextView is there (if I set a background color, it shows that color) but the Text itself never renders.
Clicking a button on MainActivity results in starting the LoginActivity, which has the onCreate (it's Kotlin):
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.login_layout)
And layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone"
android:id="#+id/loggedOut"
android:padding="24dp">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/passName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:focusable="true"
android:hint="Username"
android:inputType="textCapCharacters" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/passPin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:focusable="true"
android:hint="PIN"
android:inputType="numberPassword" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/passSubmit"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login" />
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/loggedIn"
android:visibility="visible"
android:padding="24dp">
<TextView
android:id="#+id/loggedInMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="You're currently logged in"
android:textAlignment="center"
android:textAppearance="#android:style/TextAppearance.Material.Headline" />
<Button
android:id="#+id/passLogout"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Logout" />
</LinearLayout>
</FrameLayout>
This is what Android Studio shows (those errors are TextInputLayout bugs where it says it can't find the hide password icon and such)
And this is what my device shows
Edit: I've removed everything in the layout file except for the TextView and a parent LinearLayout and it's still not showing.

Found the issue. Switching android:text="You're currently logged in" to android:text="You\'re currently logged in" fixed it. So I guess Android requires escaping single quotes when setting the text in XML?
Found by using the layout inspector tool, which showed mText as having no value

Related

Soft Keboard covers up TextInputEditText inside a fragment activity

I have a fragment with 2 TextInputEditText. When my activity starts, the soft keyboard covers part of my input, and when clicking NEXT on the keyboard the focus passes to the second input that is completely covered by the keyboard. It´s possible to see what has been typed only when I close the keyboard.
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
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"
xmlns:tools="http://schemas.android.com/tools"
android:background="#drawable/back_gradient"
android:orientation="vertical"
android:padding="#dimen/DP10"
tools:context=".activities.MainActivity">
<TextView
android:id="#+id/tv_new_course_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/SP22"
android:layout_marginBottom="150dp"
android:text="#string/newCourse"
android:textColor="#color/colorPrimary"
android:textSize="#dimen/SP26"
android:textStyle="bold"/>
<com.google.android.material.textfield.TextInputLayout
style="#style/LoginTextInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/DP20"
android:layout_marginRight="#dimen/DP20"
android:hint="#string/courseName">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_new_course_name"
style="#style/LoginTextInputEditStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:nextFocusDown="#+id/et_new_course_acronym"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
style="#style/LoginTextInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/DP20"
android:layout_marginRight="#dimen/DP20"
android:hint="#string/acronym">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_new_course_acronym"
style="#style/LoginTextInputEditStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_save_course"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/DP40"
android:layout_marginBottom="#dimen/DP10"
android:text="#string/save"
android:textColor="#color/color_ok"
app:cornerRadius="#dimen/DP15"
app:strokeColor="#color/color_ok"
app:strokeWidth="#dimen/DP2" />
The same layout works fine if inflated on an activity, but here it´s a fragment.
There are multiple ways to remove the problem:
Process 1
Use a ScrollView as the root layout and put all the other layouts inside it.
Process 2 (recommended)
Use android:windowSoftInputMode="adjustPan|adjustResize" in your manifest file.
More detail about this is here.
please add this in your activity attribute in the manifest
<activity android:name="Your_Activity" android:windowSoftInputMode="adjustPan" ></activity>

UI Design Issue

I am new to Android. I am creating a layout for a registration form. Base container I am using as relative layout. Inside relative layout i am keeping liner layout container and then inside this all components of a registration form.
But after drooping two edit text field inside liner layout I can see both the edit text field are overlapping each other and it is visible as one and also moving towards center in liner container. Hope so understood. Well I need components one after one horizontally. Help?
<?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"
android:background="#color/colorAccent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="30dp"
android:background="#drawable/l_border"
android:padding="30dp"
>
<EditText
android:id="#+id/txtMobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/ll_border"
android:backgroundTint="#color/colorAccent"
android:hint="Enter Name"
android:padding="10dp"
android:textColorHint="#color/colorBlack" />
<EditText
android:id="#+id/txtName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/ll_border"
android:backgroundTint="#color/colorAccent"
android:hint="Enter Mobile"
android:padding="10dp"
android:textColorHint="#color/colorBlack" />
</LinearLayout>
</RelativeLayout>
[
First of all, unless you want to add something over your inner LinearLayout, there is no point in nesting it inside the RelativeLayout.
Second, your inner LinearLayout has no orientation set, so by default is set to horizontal which means the first edit text (layout_width="match_parent") will push out of the screen the second EditText.
If you set the orientation for the inner LinearLayot, to "vertical", you will be able to see both fields.
If you want to have both edit texts, placed horizontally, set the "layout_width"="0; "weight"="1 on both of the text fields. Or you can play around with the RelativeLayout positioning.
UPDATE -- Suggested by #petey
Here's a way to achieve what you want:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" // this view is kind of pointless
android:background="#color/colorAccent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="30dp"
android:background="#drawable/l_border"
android:padding="30dp">
<EditText
android:id="#+id/txtMobile"
android:layout_width="0dp" // NOTICE THIS
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1" // // NOTICE THIS
android:background="#drawable/ll_border"
android:backgroundTint="#color/colorAccent"
android:hint="Enter Name"
android:padding="10dp"
android:textColorHint="#color/colorBlack" />
<EditText
android:id="#+id/txtName"
android:layout_width="0dp" // NOTICE THIS
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1" // NOTICE THIS
android:background="#drawable/ll_border"
android:backgroundTint="#color/colorAccent"
android:hint="Enter Mobile"
android:padding="10dp"
android:textColorHint="#color/colorBlack" />
</LinearLayout>

Changing the color of a button changes the entire layout color to white

I am having a very weird issue in Android Studio. I've got a simple layout with an EditText object, and a button. When I go to assign the attribute android:background="some_color" to the button, the entire layout color becomes faded and looks white. When I delete the attribute, the background color goes back to normal. Screenshots and explanation:
Code before the background color is added to the button:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/clarksonGreen">
<ImageView
android:id="#+id/EnterRoomNumberBackgroundImage"
android:layout_width="437dp"
android:layout_gravity="center"
android:layout_height="526dp"
android:alpha="0.1"
app:srcCompat="#drawable/knight" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:weightSum="1">
<EditText
android:id="#+id/EnterRoomNumber"
android:layout_width="246dp"
android:background="#drawable/enter_room_number_box"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="55dp"
android:layout_marginTop="10dp"
android:ems="10"
android:hint="Enter Room #"
android:textColorHint="#808080"
android:textAlignment="center"
android:inputType="number"
android:layout_weight="0.09" />
<Button
android:id="#+id/GoButton"
android:layout_width="271dp"
android:layout_height="80dp"
android:text="Button" />
</LinearLayout>
</FrameLayout>
Preview before the background color is added to the button.
Code after the background color is added to the button:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/clarksonGreen">
<ImageView
android:id="#+id/EnterRoomNumberBackgroundImage"
android:layout_width="437dp"
android:layout_gravity="center"
android:layout_height="526dp"
android:alpha="0.1"
app:srcCompat="#drawable/knight" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:weightSum="1">
<EditText
android:id="#+id/EnterRoomNumber"
android:layout_width="246dp"
android:background="#drawable/enter_room_number_box"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="55dp"
android:layout_marginTop="10dp"
android:ems="10"
android:hint="Enter Room #"
android:textColorHint="#808080"
android:textAlignment="center"
android:inputType="number"
android:layout_weight="0.09" />
<Button
android:id="#+id/GoButton"
android:layout_width="271dp"
android:background="#color/clarksonGreen"
android:layout_height="80dp"
android:text="Button" />
</LinearLayout>
</FrameLayout>
Preview after background color is added to button.
Any ideas how to fix this weird error?
Could it be that you didn't assign the colour variable "clarksonGreen" in the Resource file Colors? If yes you should go to the Color variables and put in the name of the colour("clarksonGreen") and assign a colour(example:#e55656).
First off, I cannot recreate the issue. Assuming that you have the color in your color file, I see nothing wrong.
You could try rebuilding the project, applying the color to the ImageView too, updating AndroidStudio or launching it on an Emulator to see if it does this there too.
If it doesn't work, please upload the whole code to GitHub so I can check it out more closely.

Extra space between TextInputLayout and TextView

I have used TextInputLayout to an EditText and there is a TextView just below to it. I see there is an extra space between TextInputLayout and TextView. I want to remove that extra space. Pics attached with and without TextInputLayout. I have enabled boundaries in developer options so pic may look confusing but informative.
Below is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/layoutCurrentPW"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:errorEnabled="true">
<EditText
android:id="#+id/editTextCurrentPassword"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="30dp"
android:background="#drawable/edit_text_border_drawable"
android:gravity="center"
android:hint="#string/current_password"
android:layout_gravity="bottom"
android:inputType="textPassword"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/black" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/textForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="true"
android:text="#string/forgot_password"
android:textSize="17sp" />
</LinearLayout>
There is a known issue with TextInputLayout which displays additional padding once an error is displayed and isn't removed when the error is cleared or setErrorEnabled(false) is called.
https://code.google.com/p/android/issues/detail?id=200137
A workaround for this issue is to manually hide the bottom child layout when the error is cleared:
textInputLayout.setError(null);
if (textInputLayout.getChildCount() == 2)
textInputLayout.getChildAt(1).setVisibility(View.GONE);
Looks like this is not extra space, but just the bottom half of the TextInputLayout widget. I don't have your background resource, but this is essentially what your code looks like on my device. You could try the EditText without putting it inside a TextInputLayout widget if you want, and then you wouldn't have the extra space on the bottom or top.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TextInputLayout
android:id="#+id/layoutCurrentPW"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/holo_green_light"
app:errorEnabled="true">
<EditText
android:id="#+id/editTextCurrentPassword"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="30dp"
android:gravity="center"
android:background="#android:color/white"
android:text="current_password"
android:layout_gravity="bottom"
android:inputType="textPassword"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/textForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="true"
android:text="forgot_password"
android:textSize="17sp" />
Try this
android:layout_alignStart="#id/layoutCurrentPW"

How to move up my controls when they would be hidden by the soft keyboard?

OK, so I have this very basic layout:
As you can see, the edit texts and the login button are centered in the area below the icon. They are not aligned with the bottom. And I want to keep it this way.
Now, when the soft keyboard is shown, all I want is that the whole view is pushed upwards, so that the login button is above the soft keyboard but takes into account its lower margin.
My activity has windowSoftInputMode set to adjustPan, but it just assures that the currently focused control is visible, not all three of them:
Question: What do I need to change so that all three controls are visible as soon as the keyboard is visible?
This is my view:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res/Recson.Apps.Android"
style="#style/Theme.Recson.NoActionBar"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/LoginViewRoot">
<ImageView
android:src="#drawable/Logo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/Icon"
android:layout_marginBottom="30dp"
android:layout_marginTop="30dp"
android:layout_gravity="top" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/Credentials"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_below="#id/Icon">
<EditText
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
local:MvxBind="Text Username"
android:hint="#string/Username"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:textColorHint="#color/text_hint" />
<EditText
android:inputType="textPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
local:MvxBind="Text Password"
android:hint="#string/Password"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:textColorHint="#color/text_hint" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/Login"
local:MvxBind="Click Login;Enabled CanLogin"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="30dp" />
</LinearLayout>
</RelativeLayout>
Try to use ScrollView and put your main layout inside it. I think it will do the job.
Try this in Manifest file.
<activity name="ActivityName"
android:windowSoftInputMode="stateVisible|adjustResize">
...
</activity>
As you're experiencing, adjustPan, adjustResize etc will only try to ensure the currently focused input field is visible.
What you could try to do is remove the LinearLayout then position your username password and login views in such a way that the system thinks they occupy the same space by using layout_marginTop and layout_marginBottom.
Just put this in your activity tag of your menifest file:
android:configChanges="screenSize"
And Use ScrollView in your Xml file something like below:
(I have changed your layout a bit):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LoginViewRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/Icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginBottom="30dp"
android:layout_marginTop="30dp"
android:src="#drawable/ic_launcher" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/btnLogin"
android:layout_below="#id/Icon" >
<LinearLayout
android:id="#+id/Credentials"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/Credentials1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:orientation="vertical" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:inputType="textEmailAddress" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:inputType="textPassword" />
</LinearLayout>
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/btnLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="20dp"
android:text="Login" />
</RelativeLayout>
At least, the answers here show that I wasn't missing anything obvious.
I now solved it like that:
windowSoftInputMode set to adjustResize
Complete layout inside a ScrollView
On layout change, I simply scroll down the ScrollView to the bottom:
public class LoginView : MvxActivity, ViewTreeObserver.IOnGlobalLayoutListener
{
private ScrollView _activityRootView;
public void OnGlobalLayout()
{
var focusedControl = Window.CurrentFocus;
_activityRootView.FullScroll(FocusSearchDirection.Down);
if (focusedControl != null)
focusedControl.RequestFocus();
else if (Window.CurrentFocus != null)
Window.CurrentFocus.ClearFocus();
}
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.LoginView);
_activityRootView = FindViewById<ScrollView>(Resource.Id.LoginViewRoot);
_activityRootView.ViewTreeObserver.AddOnGlobalLayoutListener(this);
}
}
(this is C# code using Xamarin.Android and MvvmCross. It is based on this answer)
This solution has one drawback: The controls are no longer centered in the area below the icon, but right now, I am OK with that:
See it in action
Used This Code :
public MainPage()
{
InitializeComponent();
App.Current.On<Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
}

Categories

Resources