Android how to change text input background image - android-layout

I have the following code for the input text
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/ic_login_screen_input_container">
<EditText android:id="#+id/input_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Name"/>
</android.support.design.widget.TextInputLayout>
After adding the android:background, the input text becomes:
As you see, i added the rounded container as a background image, but the input text box still has the rectangular box behind it. My ultimate goal is to create a input text box like this:
Then when user start typing in the box, the input text box should becomes:
Please let me know how i should achieve this

I resolve this problem by enabling Material Design as suggested by #Mohammad (https://stackoverflow.com/a/52401339/9793695), however, i also need to follow instruction in (Updating com.android.support libraries v7:26.+ to v7:28.0.0 throw Multiple dex files define Lcom/google/common/util/concurrent/ListenableFuture) to resolve all the dependencies first. Hope this help!

Use compileSdkVersion 28
Use targetSdkVersion 28
Dependencies
implementation 'com.android.support:appcompat-v7:28.0.0-alpha3'
implementation 'com.android.support:design:28.0.0-alpha3'
Add this code
<android.support.design.widget.TextInputLayout
android:id="#+id/userIDTextInputLayout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="#+id/userIDTextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email or Username" />
</android.support.design.widget.TextInputLayout>

add android:background="#drawable/ic_login_screen_input_container" inside EditText and remove it from TextInputLayout OR add android:background="#null" to your EditText

Related

how to add stroke on text

I can't find a way to put a stroke on text (on the text, not on the whole text view box) , the stroke should be around the letters.
is there any custom text view or library or drawing can be implemented to draw a stroke
<TextView
style="#style/Header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="150dp"
android:text="HELLO DROID"
/>
i expect the text to look like so , (the stroke color is red)
I tried below two ways for adding stroke to text :
First is add shadow to your TextView:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="50sp"
android:textColor="#android:color/holo_blue_light"
android:text="Hello"
android:shadowRadius="10"
android:shadowDx="1"
android:shadowDy="1"
android:shadowColor="#android:color/holo_red_dark"/>
The output of above code is:
Second I found GitHub project android-outline-textview.
Please follow this Link
For this you need to add StrokedTextView and related files to your project
after that add below Code in XML file:
<com.skd.stackdemo.StrokedTextView
android:id="#+id/stroke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="60sp"
android:text="Hello"
android:textColor="#android:color/holo_blue_light"
android:layout_marginTop="30dp"/>
Add below code in Java file:
StrokedTextView stroke = findViewById(R.id.stroke);
stroke.setStrokeColor(Color.RED);
stroke.setStrokeWidth(1f);
The output of above code is:
I hope it works for you.

How to add constrainlayout only to floating actio button?

I want to add constrainlayout only two the last two floating action button with nested framelayout. any help would be highly appreciated. My main idea is to able to move and position the floating action button from graphical user interface.
I have notice that android gravity help to put button at right and the center from right with
android:layout_gravity="right|center"
how can i add a button at right but between center and end at bottom.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000000"
tools:context=".MediaPresentationActivity"
android:id="#+id/FrameLayout">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<VideoView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/videoViewPresentation"
android:layout_gravity="center" />
<ImageView
android:id="#+id/imageViewPresentation"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="left|top"
android:background="#ffffff"
android:src="#drawable/serv24logobig" />
</FrameLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</LinearLayout>
//*how to add only below two floating action button as constrainlayout //
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="right|center"
android:src="#android:drawable/stat_sys_phone_call"
android:visibility="visible"
app:backgroundTint="#android:color/holo_red_dark"
app:elevation="12dp"
app:rippleColor="?android:attr/colorActivatedHighlight" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="right|center"
android:src="#android:drawable/stat_sys_phone_call"
android:visibility="visible"
app:backgroundTint="?android:attr/colorMultiSelectHighlight"
app:elevation="12dp"
app:rippleColor="?android:attr/colorActivatedHighlight" />
</FrameLayout>
FrameLayouts only allow ONE child (well they allow N children, but they overlap, because it doesn't support children positioning, rather it expects them to take all the available space), so if you want to use a ConstraintLayout to position two items inside a FrameLayout, then you need to ensure that the children of your FrameLayout, is a ViewGroup that allows positioning of its own children.
Let's see what you got.
Your Root is a FrameLayout, perhaps you should consider making it a ConstraintLayout to begin with...
You're asking your Root layout to wrap its contents. Unless this is a custom view, this is somewhat frowning, but not wrong; since I don't know how you're using this, it's hard to tell if this is the correct approach in this case.
I don't know how your UI should look, but from what I see, you have a series of nested LinearLayouts, Vertical, then Horizontal to have an ImageView and a VideoView... not sure how you expect these to be positioned.
Down Below you have an empty LinearLayout... (?)
and then you tossed the two FABs.
This is not going to work. I suggest you revisit your entire Layout (which, btw, is incorrect as pasted, because you're closing the FrameLayout twice...).
If you post an image of what your desired output is, perhaps we can help you better understand where your problem is. As it is, it's not possible to determine.
The answer to your question, as written at this time is:
"How can I add a constraint Layout onlo to the last two FABs?"
You can't (for the purposes I think you want), but if you really want to see why, and what would happen:
Simply add, inside your FrameLayout this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<!-- YOUR FABS GO HERE -->
</androidx.constraintlayout.widget.ConstraintLayout>
This will obviously NOT LOOK THE WAY YOU WANT, but that's why I asked you in the comment above, "show us what you want, we need a minimal reproducible example of what you need".
There was a reason why I asked that, not to annoy you, but to help you. You chose to ignore it, and that's as far as I can go to help you with the information I have.

Android Keyboard, custom popuplayout in Nougat

i developed a keyboard that works without issue on MM and lower. By the way on Nougat i have a layout issue, check this images to understand better: http://imgur.com/a/IHfeZ.
The 1st image is on Nougat ( the popup isn't showed completely) the 2nd is like appeared on MM ( all the lines are showed correctly ).
I used this xml to customize the popup:
<?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="horizontal"
android:background="#color/aosp_pressed">
<android.inputmethodservice.KeyboardView
android:layout_gravity="bottom"
android:id="#android:id/keyboardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:keyPreviewLayout="#layout/preview"
android:keyBackground="#drawable/key_background"
android:keyTextColor="#fff"
android:background="#color/aosp_background"
android:keyTextSize="25sp"/>
<ImageButton android:id="#android:id/closeButton"
android:background="#color/aosp_pressed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:clickable="true"
android:src="#drawable/ic_close_black" />
</LinearLayout>
As you can see the issue is caused by the position of the popup that isn't showed outside the keyboard. How can i solve this issue?
Thanks in advance to everyone.
What is your #layout/preview like?
My theory is that in between Android 6 and 7, the time when wrap_content chooses it's size changed.
Before when using
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<TextView
android:id="#+id/xxxxx"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
</LinearLayout> //PARTIAL CODE!
there were no problems in 6.0. The text view would expand to fit the text and then be centered.
However, in 7, the text gets displayed completely vertically suggesting that the initial LinearLayout was getting set to a width of 0 and not adjusting.
Try playing with the height in your #layout/preview, or in your closeButton. Set them to manual heights and see if things change accordingly!

Android clickable layouts above empty views

My project also uses Xamarin with MvvmCross, but I don't think this will effect the answer since the problem is all view-layout/axml related.
I have a GridView that summarizes a list of contacts. When clicking on this grid view, I would like the user to be taken to another screen to add more contacts to this list (so there is more space).
Subscribing to the GridView's OnClick event gives me an exception, saying I should be subscribing to the item click event, so I have done this using a clickable relative layout that surrounds the GridView (and its accompanying empty image view) as such:
...
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/addContactsRelativeLayout"
android:clickable="true">
<ImageView
android:id="#+id/empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_add" />
<Mvx.MvxGridView
android:id="#+id/addContactsGridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
local:MvxBind="ItemsSource Contacts"
local:MvxItemTemplate="#layout/contact_summary_item"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:columnWidth="55dip"
android:gravity="center" />
</RelativeLayout>
...
This works fine when the GridView is empty, and the empty ImageView is shown. However, when there are items in the GridView, the RelativeLayout no longer seems to exist and clicks over the GridView can be seen to highlight items on the GridView. This means the user is not taken to the screen to edit their contact list.
I have tried several different configurations and attributes from similar questions on SO, but I think the addition of an empty view is causing problems. Any help would be greatly appreciated.
Ok, after a lot more playing around I found a solution.
Essentially it's adding another relative layout, higher in the z-index and therefore above the 'real' contents, within the surrounding relative layout.
...
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<ImageView
android:id="#+id/empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_add" />
<Mvx.MvxGridView
android:id="#+id/addContactsGridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
local:MvxBind="ItemsSource Contacts"
local:MvxItemTemplate="#layout/contact_summary_item"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:columnWidth="55dip"
android:gravity="center"
android:focusable="false"/>
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:clickable="true"
android:id="#+id/addContactsRelativeLayout"/>
...
Then just move all your click listeners to listen to the relative layout at the bottom.

Android text input - field name shown in field itself

I am trying to achieve a log-in screen like the following:
Where the field's name is displayed in the field itself. I am using the ADT plugin in Eclipse. I tried setting the android:text attribute of the text input, but I don't think this is correct because through the password field, only the dots show (the redacted text), and not the text itself. What is the attribute then. I have looked in the documentation for the EditText widget.
The XML I currently have for the two EditText fields are:
<EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="#+id/editText1" android:inputType="textEmailAddress" android:text="#string/username">
<requestFocus></requestFocus>
</EditText>
<EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="#+id/editText2" android:inputType="textPassword" android:text="#string/password" ></EditText>
You should be able to set default values for the fields with android:hint or android:sethint I think its the first.
android:hint="Please enter your password"
its the first one, thanks to a search on SO. Just for additional info it came up with this.
SO Question about android:hint
Share Java code for when click on Submit Button then Show the Name
<EditText
android:id="#+id/name_enter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/Name"
android:inputType="textCapSentences|textAutoCorrect"
/>

Resources