Develop Reference

nestedscroolview doesn't scroll well inside another nestedscrollview

I have a bottom sheet dialog with 2 nestedscrollview, the outer one wrap the entire view, the inner one wrap a single textview, I have 2 problems:
1.
the the inner one can scroll only down, as you can see in the gif:
I need to make the inner nestedscrollview scrollable in both direction and the outer nestedscrollview scrollable when I drag outside the inner one, how can I do it?
2.
I need to make the inner nestedscrollview to wrap text, tried with constraints but not working, wrap_content make the entire textview to be shown, making the scrollview a simple textview.
How can I do it?
This is my XML code:
<androidx.core.widget.NestedScrollView
android:id="#+id/outer_scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ViewSwitcher
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.core.widget.NestedScrollView
android:id="#+id/inner_scrollview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="200dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
android:textColor="#color/white"
android:textSize="25dp"
</androidx.core.widget.NestedScrollView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</ViewSwitcher>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

After Some R&D at my End I have Finalised the XML Layout, Its Working For Me.
Actually the issue was the Wrong layout Designing. Grab the Latest Changes from Below.
<androidx.core.widget.NestedScrollView
android:id="#+id/outer_scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ViewSwitcher
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.core.widget.NestedScrollView
android:id="#+id/inner_scrollview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="200dp"
android:nestedScrollingEnabled="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
android:textColor="#color/white"
android:textSize="25dp"></TextView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</ViewSwitcher>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
Apply this layout XML and Let me know if anything Required more.

the problem simply is you are using scrolling view inside scrolling view so
I suggest you to make text scrollable in another way like making it read only edit text android:editable="false" or Edittext.setEnabled(false); and play with colors
or
give enough space to text view
or
adjust text size
or you can give focus when you tab on scrolling view like

ViewCompat.setNestedScrollingEnabled(listRecyclerView, false);
You might try this to fix the scrolling problem.

Toolbar title not aligned to the center when there's a navigation icon

I have a custom toolbar in which I set the title and other things programatically. The thing is, even though the title has the setting gravity="center", whenever the navigationIcon appears, it is moved a little bit to the side (like in the picture).
I understand that since the icon is not in the xml it must be moving it but is there a way to make the textView stay in the center no matter the icons? Or is there a way to add an ImageView or Button to the xml and then set the navigationIcon to that button so that the icon is contemplated in the code?
This is my xml, I added the buttons but I don't know a way to set the icons programatically.
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintly"
android:layout_width="match_parent"
android:layout_height="41dp"
android:gravity="center"
android:layout_gravity="center">
<Button
android:id="#+id/navigationIcon"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="center"
android:layout_marginStart="12dp"
android:layout_alignParentLeft="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/NavBar.Title"
android:singleLine="true"
android:ellipsize="end"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginEnd="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:text="Title"/>
<TextView
android:id="#+id/subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:ellipsize="end"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginEnd="12dp"
style="#style/NavBar.SubTitle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/centeredTitleTextView"
tools:text="Subtitle"/>
<Button
android:id="#+id/closeIcon"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="center"
android:layout_marginEnd="12dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
This is the part where the navigationIcon is set but setNavigationIcon cannot take the view.
public void setNavigationIconArrow() {
super.setNavigationIcon(R.drawable.ic_ui_24dp);
}
public void setNavigationIconClose() {
super.setNavigationIcon(R.drawable.ic_24dp);
}
Thank you.

Because of the icon size, your layout starts after that. So you can't use gravity=center. Also, You can't set static left margin or right margin, Because, Android has so much different screen sizes. So you have to do this programmatically.
1- You have to find the phone's screen width size.
2- Convert that size px to dp.
3- Now you can set the left margin to your layout. Which you want in gravity=center.
I hope, I did help you what you want:)

White padding/border

I installed my app on a device for the first time. It worked great on the emulator but it now has this white padding on the edges which affects the locations of the transparent buttons (See screenshot). I am wondering if there is a way to force the whole image to take up the full screen and remove the white on the sides. Please let me know your best solutions.
Thanks.
<?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=".firstroom">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/firstroom" />
</androidx.constraintlayout.widget.ConstraintLayout>

You can use android:scaleType="centerCrop" or android:scaleType="fitXY" in your ImageView.
I woulld also recommend you to go through this link: https://thoughtbot.com/blog/android-imageview-scaletype-a-visual-guide

You can use the "scaleType" attribute in the tag to ImageView
android:scaleType="centerCrop"
or
android:scaleType="fitXY"
There are some other other types also . Shown in image below

You have to use the attribute android:scaleType.
If you want to keep the aspect ratio unchanged, then you have to use android:scaleType="centerCrop", this will center your image to the imageview and scale it keeping the aspect ratio. So it might crop either some portions of width or height if required.
<ImageView
android:scaleType="centerCrop"
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/firstroom" />
If you do not want to keep the aspect ratio, then you have to use android:scaleType="fitXY", this will scale both height and width to fill your image to the imageview. As a result your image might be stretched horizontally or vertically.
<ImageView
android:scaleType="fitXY"
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/firstroom" />
For more info, see official doc.

How to properly place multiple TextView over imageView

I have an image that I desire to put textViews on top to my Android Application which is the following:
In order to place textViews on top of the image the only solution I have is to create a FrameLayout, place ImageView first, TextView after and then put padding into the TextView, this is very archaic and time consuming, and I don't know if it will stretch correctly to all android resolutions. This is the way I'm able to do it:
Is this the only way to do it? Does it have any issue relating to different phones resolutions? or since its based on dp it will always stretch correctly?

Instead of using image view, you can use a linear layout and set its background as that image..Then you can add edit text and text views on it.

You could use a ConstraintLayout. If you constrain the Name: TextView's top to the top of the ImageView and create a chain of constraints (ending with the Information EditText having its bottom constrained to the bottom of the ImageView), that will keep all your views in the bounds of the ImageView.
A layout like this:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<ImageView
android:id="#+id/image"
android:layout_width="0dp"
android:layout_height="300dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="#color/grey"/>
<TextView
android:id="#+id/name_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name:"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="#id/image"
app:layout_constraintTop_toTopOf="#id/image" />
<EditText
android:id="#+id/name_text_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="#id/name_text"
app:layout_constraintTop_toBottomOf="#id/name_text"
tools:text="Some random text in here"/>
<TextView
android:id="#+id/id_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ID:"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="#id/name_text_entry"
app:layout_constraintTop_toBottomOf="#id/name_text_entry"/>
<EditText
android:id="#+id/id_text_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="#id/id_text"
app:layout_constraintTop_toBottomOf="#id/id_text"
tools:text="Some random text in here"/>
<TextView
android:id="#+id/information_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Information:"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="#id/id_text_entry"
app:layout_constraintTop_toBottomOf="#id/id_text_entry"/>
<EditText
android:id="#+id/information_text_entry"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:lines="5"
app:layout_constraintStart_toStartOf="#id/information_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/information_text"
tools:text="Some random text in here"/>
will produce something like this (the grey background being your ImageView)
Here's a link since I can't embed images

How to center a TextView on the parent ImageView?

I've tried several ways of doing this and failed each time.
What I want to acomplish is centering TextView (horizontally and vertically) on ImageView, but instead command android:layout_centerInParent="true" results in vertical and horizontal centering on the whole area, not on ImageView. Please help me with attaching parent to TextView or other way of solving this.
Here is my xml code:
<ImageView
android:id="#+id/imageView1"
android:layout_width="170dp"
android:layout_height="46dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:contentDescription="Your Height BG"
android:src="#drawable/textareabg" />
<TextView
android:id="#+id/textView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Your Height"
android:textColor="#d88b6d"
android:textSize="20sp" />

It can be easily acheived using ConstraintLayout. Android recently introduced ConstraintLayout. It allows us to lay out child views using ‘constraints’ to define position based relationships between different views found in our layout. It is similar to RelativeLayout, but much more powerful than it because, ConstraintLayout reduces View Hierarchy to a greater extent. Now getting back to your question, Here is the sample xml code which does the work for you
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/image"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Image"
android:textSize="20sp"
app:layout_constraintRight_toRightOf="#+id/image"
app:layout_constraintLeft_toLeftOf="#+id/image"
app:layout_constraintTop_toTopOf="#+id/image"
app:layout_constraintBottom_toBottomOf="#+id/image"/>
</android.support.constraint.ConstraintLayout>
Output View on Device
You can position the TextView anywhere on the ImageView using app:layout_constraintHorizontal_bias and app:layout_constraintVertical_bias. By default these values will be set to 0.5. So, it will be center aligned by default , if we don't specify any values.
When you add a constraint to both sides of a view (and the view size
for the same dimension is either "fixed" or "wrap content"), the view
becomes centered between the two anchor points by default.
Note: Bias attribute only works if you specify the constraints for the boundaries (e.g. top and bottom for vertical bias, left and right for horizontal bias)
More about ConstraintLayout
ConstraintLayout
Sample Project
Blog on ConstraintLayout

Try this way,hope this will help you to solve your problem.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="170dp"
android:layout_height="46dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:contentDescription="Your Height BG"
android:src="#drawable/textareabg" />
<TextView
android:id="#+id/textView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Your Height"
android:textColor="#d88b6d"
android:textSize="20sp" />
</FrameLayout>

Perhaps this would help you with your question
Android TextView text won't center
A person here mentions using android:gravity="center".

Here's what I would do
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="170dp"
android:layout_height="46dp"
android:layout_centerHorizontal="false"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:contentDescription="Your Height BG" />
<TextView
android:id="#+id/textView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_alignTop="#+id/imageView1"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginTop="10dp"
android:text="Your Height"
android:textColor="#d88b6d"
android:textSize="20sp" />

What you need to do is use FrameLayout.The doc says:
FrameLayout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.
Child views are drawn in a stack, with the most recently added child on top. The size of the FrameLayout is the size of its largest child (plus padding), visible or not (if the FrameLayout's parent permits). Views that are GONE are used for sizing only if setConsiderGoneChildrenWhenMeasuring() is set to true.
So you need something like following psuedo layout code:
<FrameLayout>
<ImageView gravity="center">
<TextView gravity="center">
</FrameLayout>

Add one more relative layout under your layout like this :
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/textView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Check for width and height you want. Eg. If you want specific height and width for image, change height and width of this relative layout.
Thats it...