TextView goes beyound the ConstraintLayout - android

I would like to get a effect dotted text(ellipsis property) - both textView in this same line, but I have problem with ConstraintLayout.
In first TextView if I have long text, my second textView going to off screen.
I would like to block second textView on the end of layout and dotted 1st textView.
It is possible ?
Screens:
short text
long text
xml:
<?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"
android:background="#color/colorPrimary"
android:padding="16dp"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="36dp"
android:background="#00D54C4C"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="longTextlongTextlongTextlongTextlongTextlong"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="85dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123456789"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/textView2"
tools:layout_editor_absoluteY="85dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Your constraints aren't correct as you don't have an end constraint. The following should resolve that issue:
<?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"
android:background="#color/colorPrimary"
android:padding="16dp"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="36dp"
android:background="#00D54C4C"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="longTextlongTextlongTextlongTextlongTextlong"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteY="85dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123456789"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="85dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
That however still leaves you with some fairly gnarly layout code that isn't too great. There is never a good reason to have nested ConstraintLayouts so I'd recommend refactoring it to be something like this (which will still give you same end result):
<?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"
android:background="#color/colorPrimary"
android:padding="16dp"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="longTextlongTextlongTextlongTextlongTextlong"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="123456789"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView2"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The above also includes vertical constraints (constraintTop_...) which will ensure the layout displays correctly at runtime and will also resolve the IDE warning you had with the code previously.
And then from there to get the ellipsize effect you just need to add the following attributes to your TextView: android:ellipsize="end" and android:lines="1"
The final XML would look something like this:
<?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"
android:background="#color/colorPrimary"
android:padding="16dp"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="longTextlongTextlongTextlongTextlongTextlonglongTextlongTextlongTextlongTextlongTextlong"
android:ellipsize="end"
android:lines="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="123456789"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView2"/>
</androidx.constraintlayout.widget.ConstraintLayout>
One thing to note: this does remove the margin you had previously. Making use of Guideline you are able to add the margins/padding you wanted by adding a start and end Guideline which has a vertical orientation. The final-final version of the layout would look something like this:
<?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"
android:background="#color/colorPrimary"
android:padding="16dp"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineStart"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineEnd"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_end="16dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="longTextlongTextlongTextlongTextlongTextlonglongTextlongTextlongTextlongTextlongTextlong"
android:ellipsize="end"
android:lines="1"
app:layout_constraintStart_toStartOf="#+id/guidelineStart"
app:layout_constraintEnd_toEndOf="#+id/guidelineEnd"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="123456789"
app:layout_constraintStart_toStartOf="#+id/guidelineStart"
app:layout_constraintEnd_toEndOf="#+id/guidelineEnd"
app:layout_constraintTop_toBottomOf="#id/textView2"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Having TextViews On Same Line
If you want to have the TextViews on the same line you can use another Guideline to include where the first should stop and the second should begin. In this example the guideline is set at the halfway point using app:layout_constraintGuide_percent=".5":
<?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"
android:background="#color/colorPrimary"
android:padding="16dp"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineStart"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineCenter"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent=".5" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guidelineEnd"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_end="16dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="longTextlongTextlong"
android:ellipsize="end"
android:lines="1"
app:layout_constraintStart_toStartOf="#+id/guidelineStart"
app:layout_constraintEnd_toStartOf="#+id/guidelineCenter"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="123456789"
app:layout_constraintStart_toStartOf="#+id/guidelineCenter"
app:layout_constraintEnd_toEndOf="#+id/guidelineEnd"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Add the following to your text view you want to ellipsize(...)
android:ellipsize="end"
android:singleLine="true"

Related

How to align 2 image view in a row?

this is my xml code i want to set two images in row
XML code
<?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"
android:padding="10dp"
android:background="#ffffff"
tools:context=".SplashActivity">
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_gravity="left"
android:src="#drawable/ic_2"
android:text="Hello World!"
android:tint="#ff0000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
tools:layout_editor_absoluteX="-52dp" />
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_gravity="right"
android:src="#drawable/ic_karo"
android:text="Hello World!"
android:tint="#0000b3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
tools:layout_editor_absoluteX="123dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
In Android Studio Preview, It's looking perfect as I want. But when I install APK in a device, It's not working
Android Studio Preview:
This is my Device Preview:
You should use a Linera Layout instead Constraint Layout or Linear Leyout within parent Constraint Layout. You can directly use the following code:
<?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"
android:padding="10dp"
android:background="#ffffff"
tools:context=".SplashActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_gravity="left"
android:src="#drawable/ic_2"
android:text="Hello World!"
android:tint="#ff0000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
tools:layout_editor_absoluteX="-52dp" />
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_gravity="right"
android:src="#drawable/ic_karo"
android:text="Hello World!"
android:tint="#0000b3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
tools:layout_editor_absoluteX="123dp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
As I mentioned in the comment add layout_gravity as centre in both the ImageView. I have also edited the code as you can not use text in Image View.
<?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"
android:background="#ffffff">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:padding="10dp"
android:orientation="horizontal">
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_gravity="center"
android:src="#drawable/ic_2"/>
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_gravity="center"
android:src="#drawable/ic_karo"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Hope this will work perfectly for you.
i think you should try with Linear Layout
Like this...
<LinearLayout 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:padding="10dp"
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_gravity="center"
android:background="#ffffff">
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_gravity="center"
android:src="#drawable/app_icon"
android:text="Hello World!"
android:tint="#ff0000"
android:layout_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
tools:layout_editor_absoluteX="-52dp" />
<ImageView
android:layout_width="340dp"
android:layout_height="340dp"
android:layout_weight="1"
android:layout_gravity="center"
android:src="#drawable/app_icon"
android:text="Hello World!"
android:tint="#0000b3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
tools:layout_editor_absoluteX="123dp" />
</LinearLayout>
As I can see your question you can use Constraint layout property to set two images in row :-
Start to Start
End to End
Start to End
End to Start
for example :-
<?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="wrap_content"
android:layout_gravity="center">
<ImageView
android:id="#+id/button_save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button_share"
app:layout_constraintHorizontal_chainStyle="spread" />
<ImageView
android:id="#+id/button_share"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintStart_toEndOf="#+id/button_save"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

How I can put a label above the button in android studio?

I want to design a messages button that is attached to a label showing the number of messgaes. Like the image below
I designed it with android studio, but the label is not aligned properly. How I can put it at the top of the button?
Here is my code
<?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=".HomeActivity">
<Button
android:id="#+id/msg"
android:layout_width="157dp"
android:layout_height="42dp"
android:background="#color/lightgrey"
android:backgroundTint="##color/lightgrey"
android:text="Messages"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.206" />
<TextView
android:id="#+id/mark"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_textview"
android:gravity="center"
android:text="2"
android:textColor="#color/lightgrey"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.662"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.17" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can use a BadgeDrawable.
val badge = BadgeDrawable.create(this)
BadgeUtils.attachBadgeDrawable(badge, yourButton)
// usage
badge.number = 5
You need to remove any constraints of the TextView attached to the parent, and make the TextView only constrained to the Button
<?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=".HomeActivity">
<Button
android:id="#+id/msg"
android:layout_width="157dp"
android:layout_height="42dp"
android:background="#color/lightgrey"
android:backgroundTint="##color/lightgrey"
android:text="Messages"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.206"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/mark"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_textview"
android:gravity="center"
android:text="2"
android:textColor="#color/lightgrey"
android:textSize="20sp"
android:elevation="10dp"
app:layout_constraintBottom_toTopOf="#+id/msg"
app:layout_constraintEnd_toEndOf="#id/msg"
app:layout_constraintStart_toEndOf="#id/msg"
app:layout_constraintTop_toTopOf="#id/msg" />
</androidx.constraintlayout.widget.ConstraintLayout>
Preview

Aligning horizontal recycler view below imageview using constraint layout

I am using below xml code for placing a horizontal RecyclerView below ImageView
But My Recycler is not displaying and ImageView occupies entire space.
In Big size mobile design looks fine. But not able to acheive that for small mobile phones.
Horizontal RecyclerView consists of multiple images..it should be bottom of the screen...On clicking the image, I want to display it above horizontal RecyclerView.
I am using barrier for that issue but that does't solve my question.
Anybody please help me to find the solution.
<?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/constriantLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlSymmetry">
<ImageView
android:id="#+id/view_current_photo"
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/no_photo_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/top_guideline"
app:layout_constraintStart_toStartOf="#id/left_guideline"
/>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:id="#+id/left_guideline"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"/>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/top_guideline"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/photo_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/barrier3"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteX="39dp" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="view_current_photo"
app:barrierDirection="bottom" />
</androidx.constraintlayout.widget.ConstraintLayout>
Thank u all for ur answers,
I got a solution,
here it is,
<?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:ignore="RtlSymmetry">
<ImageView
android:id="#+id/view_current_photo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
app:layout_constraintBottom_toTopOf="#id/image_view_guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
android:contentDescription="#string/view_current_photo" />
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image_view_guideline"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.7"/>
<TextView
android:id="#+id/no_photo_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/top_guideline"
app:layout_constraintStart_toStartOf="#id/left_guideline"
/>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:id="#+id/left_guideline"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"/>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/top_guideline"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/photo_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
app:layout_constraintTop_toBottomOf="#id/image_view_guideline"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I have try to modify your layout hope it help you, do not fix your image size.
<?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/constriantLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlSymmetry">
<ImageView
android:id="#+id/view_current_photo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#id/top_guideline"/>
<TextView
android:id="#+id/no_photo_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/top_guideline"
app:layout_constraintStart_toStartOf="#id/left_guideline" />
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:id="#+id/left_guideline"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/top_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/photo_recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/top_guideline"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am not sure about my answer but this is my code if i understand correctly your problem. RecyclerView scroll horizontall with each item is an image, when i click item, image will display, replace for image above
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="vn.prdcv.dlreader.InputPasswordActivity"
android:theme="#style/Theme.AppCompat.Light.NoActionBar">
<ImageView
android:id="#+id/ivBackground"
android:layout_width="match_parent"
android:layout_height="100dp"
android:src="#drawable/panasonic"
android:scaleType="fitXY"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="16dp"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#color/red"
/>
</android.support.constraint.ConstraintLayout>

How do I make two textviews in a ConstraintLayout in a CardView be flush?

I'm a bit new to Android development, so I apologize if this question is simple. I have two textviews stacked vertically that I would like to get flush with each other. There's too much whitespace between the two elements:
I have the following activity layout in which I've tried to make the TextViews flush by using a constraint view and setting the margin between the bottom and top to 0dp:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".PackageService">
<android.support.v7.widget.CardView
android:id="#+id/card_inventory"
android:layout_width="match_parent"
android:layout_height="101dp"
android:layout_marginBottom="1dp"
android:layout_marginTop="1dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_inventory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#android:drawable/btn_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.048"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.49" />
<TextView
android:id="#+id/text_inventory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginStart="32dp"
android:text="Button Title"
android:textAppearance="#android:style/TextAppearance.Material.Large"
app:layout_constraintBottom_toTopOf="#id/text_last_scan"
app:layout_constraintStart_toEndOf="#+id/image_inventory"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text_last_scan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Subtitle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/text_inventory"
app:layout_constraintTop_toBottomOf="#+id/text_inventory" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Any help would be appreciated.

android scrollview not scrolling down after keyboard opens

I have a textview that is inside of a scrollview, it scrolls fine untill the soft keyboard is opened.
When the keyboard is opened it act like it scrolled up again with the height of the keyboard.
What I have tried
I tried this in the manifest, but yielded the exact same results
android:windowSoftInputMode="adjustResize"
Then this:
android:windowSoftInputMode="adjustPan"
That seemed to work, but the problem was that it was moving the whole screen up and taking the header out of view.
I also tried adding the following in the linear layout
android:focusable="true"
android:focusableInTouchMode="true"
That only caused the app not to focus on the input field (EditText) and the keyboard didn't open automatically, but when you clicked on the input field it would just act the same as before.
This is the XML file code:
<?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"
android:background="#color/lightGray"
android:orientation="vertical" >
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_layout"
android:layout_marginTop="10dip" >
<LinearLayout
android:id="#+id/msg_list_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/bottom_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#android:color/background_light">
<Button
android:id="#+id/send_btn"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="#string/txt_send" />
<EditText
android:id="#+id/msg_edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/send_btn"
android:layout_toLeftOf="#+id/send_btn"
android:inputType="text" >
</EditText>
</RelativeLayout>
Any suggestions?
I had same problem and the solutions is this:
My activity was in fullscreen mode and scroll does not work in this mode this is a bug and we send a report to google.
Just look at your activity in manifest if there is a fullscreen mode just remove it.
I got this problem and it is a headache.
the soloution is instead of drawing an XML layout from the top of the screen, you need to draw it from the bottom of the screen.
look at these examples :
main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="0dp"
android:layout_height="match_parent"
android:fillViewport="true"
android:isScrollContainer="true"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<include layout="#layout/main_contents"/>
</ScrollView>
</android.support.constraint.ConstraintLayout>
main_contents.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="20dp">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.92" />
<android.support.v7.widget.CardView
android:id="#+id/card1"
android:layout_width="0dp"
android:layout_height="250dp"
android:layout_margin="30dp"
android:padding="10dp"
app:cardCornerRadius="10dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/sam3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="sample"
android:textColor="#673AB7"
android:textSize="23sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/sam2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:backgroundTint="#673AB7"
android:digits="0123456789"
android:gravity="center"
android:hint="sample"
android:inputType="phone"
android:maxLength="11"
android:maxLines="1"
android:nextFocusDown="#id/sam1"
android:textColor="#673AB7"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/sam3"
app:layout_constraintVertical_bias="0.3"/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<Button
android:id="#+id/sam1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#fff"
android:background="#673AB7"
android:text="sample"
android:layout_marginLeft="60dp"
android:layout_marginRight="60dp"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/card1"
app:layout_constraintEnd_toEndOf="#+id/card1"
app:layout_constraintStart_toStartOf="#+id/card1"
app:layout_constraintTop_toBottomOf="#+id/card1" />
</android.support.constraint.ConstraintLayout>
main_contents2.xml
<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="20dp">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.45" />
<android.support.v7.widget.CardView
android:id="#+id/card1"
android:layout_width="0dp"
android:layout_height="250dp"
android:layout_margin="30dp"
android:padding="10dp"
app:cardCornerRadius="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/sam2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"
android:backgroundTint="#673AB7"
android:digits="0123456789"
android:gravity="center"
android:hint="sample"
android:inputType="phone"
android:maxLength="11"
android:maxLines="1"
android:nextFocusDown="#id/sam1"
android:textColor="#673AB7"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/sam3"
app:layout_constraintVertical_bias="0.3" />
<TextView
android:id="#+id/sam3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="sample"
android:textColor="#673AB7"
android:textSize="23sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<Button
android:id="#+id/sam1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#fff"
android:background="#673AB7"
android:text="sample"
android:layout_marginLeft="60dp"
android:layout_marginRight="60dp"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/card1"
app:layout_constraintEnd_toEndOf="#+id/card1"
app:layout_constraintStart_toStartOf="#+id/card1"
app:layout_constraintTop_toBottomOf="#+id/card1" />
</android.support.constraint.ConstraintLayout>
the second XML file main_contents2 drew from top and android just put the EditText from top of the keyboard.BUT the main_contents drawn from the bottom of the screen. so when the soft keyboard comes up the layout resizes.
Try changing the layout_height of scrollview to wrap_content.
All you need to do is
android:isScrollContainer="true"

Categories

Resources