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.
Related
I want to display view like above.I know its very simple one but I want to know in constraint layout what would be best approach?
I have added below constraints.If test text string should be long then it should not go beyond the arrow icon.
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
// test textview
<TextView
android:id="#+id/item_title"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_toStartOf="#id/item_accessory"
android:background="#color/error_red"
android:paddingEnd="40dp"
android:text="test"
android:gravity="center"
android:textColor="#android:color/white"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
// Arrow icon
<com.wrx.wazirx.views.custom.TextViewPlus
android:id="#+id/item_accessory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/icon_arrowhead_right"
android:textColor="?attr/colorLabel"
android:textSize="24sp"
android:layout_marginVertical="#id/item_title"
android:layout_marginEnd="25dp"
android:visibility="visible"
app:layout_constraintTop_toTopOf="#id/item_title"
app:layout_constraintBottom_toBottomOf="#id/item_title"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Let me know what wrong am doing and what is the best approach.
There are a couple of ways to do what you are asking. Take a look at ConstraintLayout chains for a way to place views side-by-side with constraints. In the XML below, I have replaced you custom view with a simple view but the concept works with either.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/item_title"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_toStartOf="#id/item_accessory"
android:background="#color/error_red"
android:gravity="center"
android:paddingEnd="40dp"
android:text="This is some long text for the button This is some long text for the button"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="#+id/item_accessory"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginVertical="#id/item_title"
android:background="#drawable/ic_baseline_arrow_forward_ios_24"
android:layout_marginEnd="16dp"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#+id/item_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/item_title" />
</androidx.constraintlayout.widget.ConstraintLayout>
With short text:
and longer text:
I am doing the chat system. So I need to do the UI for showing the message and sent time.
Please see the below images first. The red color is the text view width and blue color is sent time text view width. Now I set the sent time is right of the text view.
I would like to set the sent time text view have a margin. But you can see the text view width is not same. So I am not hard code the margin. So anybody can give me some useful suggestion to me. Thanks a lots.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.60"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/tvMessage"
android:layout_width="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="#id/guideline"
android:layout_height="wrap_content"
android:textColor="#color/white_color"
android:background="#color/red_color"
android:maxWidth="#dimen/_151sdp"
android:textStyle="bold"
android:minWidth="30dp"/>
<TextView
android:id="#+id/tvDateTime"
android:layout_width="0dp"
app:layout_constraintBottom_toBottomOf="#id/tvMessage"
app:layout_constraintEnd_toEndOf="#id/tvMessage"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/tvMessage"
android:layout_toRightOf="#id/tvMessage"
android:textColor="#color/chat_mag_date_time"/>
</androidx.constraintlayout.widget.ConstraintLayout>
For using a component in another you can use somethings like : CardView,FrameLayout or ConstraintLayout.
ConstraintLayout like this :
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/msg_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/cardview_dark_background">
<TextView
android:id="#+id/tvMessage"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:maxWidth="151dp"
android:minWidth="30dp"
android:text="fdsfdsfd
dsadas
asd
asd
as"
android:textColor="#color/black"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginEnd="8dp"
/>
<TextView
android:id="#+id/tvDateTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/tvMessage"
android:layout_toRightOf="#id/tvMessage"
android:text="1234"
android:textColor="#color/purple_700"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvMessage"
android:layout_marginStart="8dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Add following alignments to the TextView "tvDateTime"
android:layout_alignBottom="#id/tvMessage"
android:layout_alignRight="#id/tvMessage"
and remove the extra alignment instructions, so your TextView code will become:
<TextView
android:id="#+id/tvDateTime"
android:layout_width="wrap_content"
android:text="12:45"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/tvMessage"
android:layout_alignRight="#id/tvMessage"
android:textColor="#color/grey"/>
I'm trying to create an android application but I'm a beginner, especially with the XML. I don't know why, if I put Relative layout and move the widgets they remain anchored at the top left. does anyone know why?
ps I would like to work on the window design not on the code. Anyway I leave you the code in case there is something wrong
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".Tentativo">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Number"
android:textSize="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.255"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.299" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play"
tools:layout_editor_absoluteX="247dp"
tools:layout_editor_absoluteY="211dp" />
</RelativeLayout>
You are facing this problem because you are using the wrong attributes. The attributes you are using are meant for Constraint Layout and not Relative layout.
For Example: in case of TextView instead of using app:layout_constraintRight_toRightOf="parent" try using android:layout_alignParentRight="true"
Also, I would like to recommend you to use Constraint Layout instead of Relative as is much better and easier to use. example: To center a view in a RelativeLayout you would write centerInParent=true. Constraint Layout instead allows centering in-between views and the parent.
relative layout works great with nested sibling Containers, just add a container, and add the Widgets inside the container, my favorite one to use when Relative Layout is the parent is the Linear Layout, it makes the UI much cleaner and uses weights which is great for supporting different screen ratios. Here is a sample Example for your case (also you can remove all the constraints in the widget since their parent is no longer the relative layout) :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:gravity="center"
android:weightSum="2"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Number"
android:layout_weight="1"
android:textSize="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.255"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.299" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Play"
tools:layout_editor_absoluteX="247dp"
tools:layout_editor_absoluteY="211dp" />
</LinearLayout>
</RelativeLayout>
How can i group views in a constraint layout without nesting viewgroups?
<android.support.constraint.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"
android:orientation="vertical"
android:background="#color/color1">
<ImageView
android:id="#+id/mAlbumArtLarge"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:src="#drawable/image1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
<android.support.constraint.ConstraintLayout
android:id="#+id/mBottomSheet"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#20000000"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/mAlbumIvBottom"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="5dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
This is what i'm doing now to create a container mBottomSheet where i can group views and set a background, but i'm using another viewgroup constraintlayout for this which is not recommended because the point of constraintlayout is too have a flat view hierarchy.
So how can i achieve the same thing, but without using another viewgroup as a container?
EDIT
example:
You can use Gudeliens to achieve something similar.
For example, you can take some view (let's call it x) and place on your layout and just put all your wanted views above x.
As for the Gudeliens, with them, you can place your x in any way that you would want to use using app:layout_constraintGuide_percent attribute.
Take this layout for example:
<android.support.constraint.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"
android:background="#color/colorPrimary"
android:orientation="vertical">
<ImageView
android:id="#+id/mAlbumIvBottom"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/ic_launcher_background"
android:scaleType="fitXY"
android:elevation="6dp"
android:layout_margin="6dp"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button2" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="I am view x"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".15" />
<android.support.constraint.Guideline
android:id="#+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".3" />
</android.support.constraint.ConstraintLayout>
This layout will look like this without any nesting views: (I am adding preview image to you could better understand guidelines)
The layout above is an example of how you could achieve this without using nested view groups.
This solution will work for you but I also agree with user1506104.
It's ok to have a very small level of nesting, if you don't overdo it your layout performance could stay the same
You can either go with my solution or have some nesting views (again, don't overdo it)
I prefer to use my solution so I can avoid nesting.
Just remember that my solution may be a bit longer than just having some lever of nesting when creating your layout.
You can try:
androidx.constraintlayout.widget.Group
or
You can group your Views together by assigning Constraints with respect to each others position but you won't be able to apply a background on all of the widgets as they are still the child of the parent ViewGroup. There are many other options to avoid using nested ConstraintLayout.
You can use another ViewGroup like LinearLayout or RelativeLayout inside ConstraintLayout.
You can create a seperate layout for BottomSheet and include it, for clean code
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