I was changing the background of an edit view in Android and I did it with a drawable that contains the following code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFF" />
<corners
android:radius="7dp" />
</shape>
Then add it with the "android: background" property to the style of my input:
<style name="inputPrimary">
<item name="android:background">#drawable/btn_rounded_background</item>
<item name="android:padding">9dp</item>
</style>
I don't know if I am very detailed but I find that the text in my Edit view is vertically misaligned (a little but it becomes noticeable enough)
My edit text
What can I do?
Set the individual padding of the view either in styles or layout xml,then adjust the top and bottom padding to the pressie level you need the text to be.Be careful of the height of the view as the text height+padding top+padding bottom should be less than the views height.
android:paddingBottom="10dp"
android:paddingTop="9dp"
android:paddingLeft="9dp"
android:paddingRight="9dp"
Related
How can I set the scrollbar track thinner than the thumb in RecyclerView without using custom scrollView
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scrollbars="vertical"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:fadeScrollbars="false"
android:scrollbarSize="4dp"
android:scrollbarThumbVertical="#drawable/scroll_view_gradient"
android:scrollbarTrackVertical="#color/scroll_bar_track"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
I did this on my own, it looks 'nice' & it acts 'somewhat nice', but some things aren't tested enough, should be somewhat helpful at least. Can check it on this link as well. Also, this first is just visually, if you want to customize the length of the thumb, then you need to create a custom view and manipulate the offset. Since it isn't a part of the question(and this answer), I didn't write it, it can be found in the link above if someone does need it.
bottom, left, right & top are insets, you can think of them as paddings, they don't affect the layout size, but you should keep the top & bottom insets on track and thumb on the same size(for vertical recyclerviews, horizontal ones should use left & right).
Also manipulates the thickness of thumb and track, and stroke width places transparent pixels, so that track seems smaller than it actually is. Kudos to #Razvan S.
scrollbar_track.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp">
<shape>
<solid android:color="#color/scroll_bar_color" />
<stroke
android:width="3dp"
android:color="#android:color/transparent" />
<size android:width="4dp"
android:height="4dp" />
</shape>
</item>
</layer-list>
This doesn't need width & height properties, because recyclerview calculates the length automatically, and track width sets the thumb width.
thumb_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp">
<shape android:shape="rectangle">
<solid android:color="#color/scroll_bar_color" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
styles.xml
<style name="scrollbar_style">
<item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
<item name="android:scrollbars">vertical</item>
<item name="android:fadeScrollbars">false</item>
<item name="android:scrollbarThumbVertical">#drawable/thumb_shape</item>
<item name="android:scrollbarTrackVertical">#drawable/scrollbar_track</item>
</style>
recyclerview tag in your layout: style="#style/scrollbar_style"
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/scrollbar_style" />
Now comes the 2nd part, if you want to manipulate the length of the thumb, you need to calculate the offset on your own. I did that by creating a Custom RecyclerView which implements ScrollingView, and calculated manually everything.
Hope this helped you, it did the job for me.
Also for those of you wondering, I used layer-list because it worked as I wanted it, if I switched to something else I didn't get the desired behavior. It's probably a bit flawed, and there might be a better solution somewhere out there, but I did this by trial&error until I produced something I could work with.
I'm working on an Android application where I want to create a windowBackground with a centered element and a layout also with a centered element. I want these elements to be in the exact same position, with the layout overlapping the background. The problem I'm having is that the layout and the background seem to be calculating center differently (see image). Why is this happening, and what can I do to line the elements up?
This is what I see right now. The red box is created by the background and the green box is created by the foreground. Screenshot was created with a Nexus 5X API 26 emulator.
Foreground layout:
<?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">
<View
android:background="#color/foreground_box"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerInParent="true" />
</RelativeLayout>
Background Drawable (applied via android:windowBackground in my theme)
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/background" />
<item android:gravity="center">
<shape
android:gravity="center"
android:shape="rectangle">
<solid android:color="#color/background_box" />
<size android:width="10dp"
android:height="10dp" />
</shape>
</item>
</layer-list>
For clarity, my colors file is
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<color name="background">#ffffff</color>
<color name="background_box">#AAFF0000</color>
<color name="foreground_box">#AA00FF00</color>
</resources>
Full source for this sample project is available at https://github.com/HofmaDresu/AndroidCenteredTest
The reason windowBackground includes both the heights 1) statusBar and 2) actionBar
Modify below line in your background.xml
<item android:gravity="center" android:top="80dp"> // 56 actionBarSize + 24 statusBarHeight
You may need to manage this programatically as statusBarHeight and actionBarSize varies based on device API/resolution.
Here is the result. For testing, have resized background size bit bigger so that overlapping between views and background become visible.
It is probably because of the extra space taken up by the ActionBar in the foreground.
To fix this, you can add a margin to your View in the foreground layout as:
android:layout_marginBottom="?android:attr/actionBarSize"
After test it in AS, I can say you that the right code for you background_drawable is this:
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/background" />
<item android:gravity="center" android:bottom="48dp">
<shape
android:gravity="center"
android:shape="rectangle">
<solid android:color="#color/background_box" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
</item>
using android:top, the red square go more down than center. Need to use android:bottom instead to center background. By my tests results that 48dp is the right value.
I have a question which I can't find an answer to and really have to solve.
I am trying to change the background for the tab layout indicator but JUST FOR IT, i.e. if the entire tablayout is green and the tablayoutindicator height is 4dp I want the ENTIRE bottom 4dp of the tablayoutview will be in another color (lets say red) is that possible?
Before you answer please note I'm not talking about app:tabIndicatorColor property but on the entire height of the tabIndicator (regardless of the tabIndicator itself).
For example, on the attached image the app:tabIndicatorColor is white but the background of it is black while the entire view is a gardient of blue.
Edit -
I managed to do it using a FrameLayout having the bottom view in black while the tablayout is above it with its properties, I'm still looking for a more "clean" way to achieve the same thing
To achieve what you are looking for you can try the following
Create a selector tab_layout_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false" android:state_pressed="false">
<layer-list>
<!-- Stripe bottom indicator color -->
<item android:top="-5dp" android:left="-5dp" android:right="-5dp">
<shape android:shape="rectangle">
<stroke android:color="#color/red" android:width="4dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
Finally, in your TabLayout add
<android.support.design.widget.TabLayout
<!-- Whole tab background -->
android:background="#color/white"
<!-- Line color -->
android:tabBackground="#drawable/tab_layout_selector"
.... Others....
/>
In my Android application I have one view it may be ImageView or TextView how can I set shadow effect for View in android? I have set the shadow by using the following code, but it won't work:
view.setElevation(130)
Please help me to solve this
You can create your own "shadow view"
<View
android:id="#+id/shadow_view"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_gravity="bottom"
android:background="#drawable/shadow_gradient" />
and add the shadow drawable to it:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:endColor="#android:color/transparent"
android:startColor="#8f000000" />
</shape>
The height is up to you, to experiment and see what works best for you as is the angle and start colour of the drawable. You just need to align this view layout to any view layout you want to have a shadow and you are good.
I am using a LinearLayout as view group which holds two children (TextView and EditText). My XML code looks as follows:
<?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="match_parent"
android:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text View"
android:textSize="20sp" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Edit Text"
android:textSize="20sp" />
</LinearLayout>
which will produce the following design:
As depicted in the zoomed-in view on the left, TextViewand EditText are not equally aligned vertically (EditText is indented a bit more as shown by the small red arrows).
It seems there is a bit of a padding (a few dp) around the hint and the line underneath which prevents them from "touching" the left edge of their view field. Is there any way to force the hint within EditText to squeeze to the left of its view field?
How can I get rid of this indentation, other than by adding paddings and margins?
Thanks for any ideas and advice!
Without add any paddings and margins you can use a custom drawable for the background of your Edittext to remove the default padding
in drawable/edittext_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item
android:top="-2dp"
android:right="-2dp"
android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#000000" />
</shape>
</item>
</layer-list>
Now use it in your editext:
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/edittext_bg"
android:hint="Edit Text"
android:textSize="20sp" />
Output:
It should not be in this way... You should check your style.xml, maybe you set additional margins there.
Also, try to specify layout_gravity:"left" attribute.
try typing letters on Edit Text then you can see both textview and edit text was aligned equally
Did you try Constraint layout? It's removing the need to have so much hierarchy in xml layouts and is easy to use.
this preview, run the simulator for correct preview.
But, for best result use https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html