how to add stroke on text - android-studio

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.

Related

Problems with the color Vector Asset in Floating Action Button

So, guys.
I created an Asset Vector to use in my Fluting Action Button(Asset Add or Plus), in white color. When I add it to the FAB, it turns black and I can't change it.
Where can I make the change?
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:fabSize="normal"
app:rippleColor="#color/white"
app:srcCompat="#drawable/ic_confirmar_24"
/>
enter image description here
Just add app:tint="#color/white" in your FloatingActionButton.

Layout in Android Emulator looks different as compared to the layout file

I have recently started learning Android Development. I am using Android Studio and I created the XML layout file with it. But the layout is looking different on the emulator to the one I created on XML and I have no clue why it is happening.
This is the picture of my Main activity layout:
And this is the picture of my emulator:
The plain text should be below the text view but in the emulator, its position is different(I have marked the error by red).
Here is the code for the Main activity:
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="208dp"
android:text="SUBMIT"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="80dp"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:text="Enter the value in kg below"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editTextNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number"
tools:layout_editor_absoluteX="100dp"
tools:layout_editor_absoluteY="73dp" />
I'm not sure why it is showing that way in the emulator versus the preview, but the reason that the EditText field isn't where you want it to be is because of how you have set the position of the editTextNumber field:
tools:layout_editor_absoluteX="100dp"
tools:layout_editor_absoluteY="73dp"
You are telling Android to position the field 100 pixels in and 73 pixels down from the top of the screen. Most than likely this occurred because you accidentally dragged the field slightly in the editor window, which specifies the exact pixel placement.
Instead, since you are using a ConstraintLayout, you'll want to set the location of the EditText in relation to other fields on your layout. For example, remove the two lines above and replace them with something like this:
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
I would also suggest that you name your fields on the layout with descriptions of what they represent, rather than the defaults of textView and textView2. For example, consider changing textView2 to something like weight_label_textview. It will make it much easier to know which field you are dealing with both in the layout and in your code.
As you are using constraint layout every UI item must constraint vertical and horizontally. Try adding constraints to your EditText.

Android how to change text input background image

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

HorizontalGridView from lean back i want to keep item in center

I have list of item, i am using HorizontalGridView to display that item, i want to keep the HorizontalGridView in center of the screen but its not working.
Following is my code:
<android.support.v17.leanback.widget.HorizontalGridView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
android:layout_centerHorizontal="true"/>
But it occupies complete width and height even-though there is less item
Note: I am developing for android tv using leanback library
It's better to use RecyclerView if you want to center and wrap content. Actually, HorizontalGridView extends RecyclerView, so it will be easy to change to:
<androidx.recyclerview.widget.RecyclerView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
android:layout_centerHorizontal="true"/>

TextView text cut off on the left instead of getting ellipsis-shortened

Look at the part of the layout:
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:gravity="center_vertical|right"
android:layout_weight="1">
<TextView
android:id="#+id/second_team_code"
android:layout_marginRight="6dp"
style="#style/TextView.TeamCode"/>
<ImageView
android:id="#+id/second_team_flag"
android:layout_marginRight="1dp"
style="#style/FlagImageView"/>
</LinearLayout>
For some reason, when small size of enclosing views causes text to overflow, text is not shortened by adding "...", but the beginning of the text is truncated. Swap the TextView and ImageView - and the text is ellipsis-shortened as needed.
Why does it work so? And how to fix this?
Style:
<style name="TextView.TeamCode">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:singleLine">true</item>
<item name="android:ellipsize">end</item>
</style>
LinearLayout doesn't handle this situation very well... I mean if you have first child like that (with wrap_content) and you want it to stop expanding when it reaches {parent_width}-{next_child_width}. Unfortunately it will stop with width={parent_width}. So, if the text will be bigger, the left bound of view will move outside of it's parent (to the left, but keeping the right bound in place) and the beginning of text will be cut (because view is drawn partially outside od parent left bound). If the text will also not fit the parent width - text will also be cut from the right side, but this time with ellipsize (...)
You can see the results here:
Try something like that:
<TextView
android:id="#+id/second_team_code"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:singleLine="true"
android:ellipsize="end"
android:layout_marginRight="6dp"
android:text="Super long text"/>
By applying the weight TextView will occupy all the remaining space (with fixed width) and will not be pushed outside because text won't fit inside. To keep the right alignment you can also add:
android:gravity="right"
android:singleLine="true" is obsolete.
Instead of
android:singleLine="true"
android:ellipsize="end"
you have to use
android:gravity="right"
android:inputType="text"

Resources