RelativeLayout height increases after RecyclerView loads - android

My activity has a RecyclerView and 2 Button. The RecyclerView is in between the 2 Buttons and takes the remaining height of the screen. It works as expected, but when I set the adapter of the RecyclerView and fill it with items, the height of the RecyclerView (and parent RelativeLayout) expands and goes over the Button below it. I want my layout to remain the same (as well as the height of the RelativeLayout and RecyclerView). Here is my xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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:padding="25dp">
<Button android:id="#+id/download_btn"
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="download all canadian universities"
android:textColor="#FFFFFF"
android:textSize="22sp"
android:background="#drawable/buttonshape"
android:shadowColor="#A8A8A8"
android:layout_weight="0"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FFAA22AA">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cleared!"
android:visibility="gone"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/rvSchools"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
<Button android:id="#+id/clear_btn"
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="clear"
android:textColor="#FFFFFF"
android:textSize="22sp"
android:background="#drawable/buttonshape"
android:shadowColor="#A8A8A8"
android:layout_weight="0"
/>
</androidx.appcompat.widget.LinearLayoutCompat>

I think in that case better solution is to use ConstraintLayout as your root layout:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.andr`enter code here`oid.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:id="#+id/download_btn"
android:layout_width="0dp"
android:layout_height="100dp"
android:text="download all canadian universities"
android:textColor="#FFFFFF"
android:textSize="22sp"
android:background="#drawable/buttonshape"
android:shadowColor="#A8A8A8"
app:layout_constraintTop_toTopof="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>
<View
android:background="#FFAA22AA"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/download_btn"
app:layout_constraintBottom_toTopOf="#+id/clear_btn"
/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvSchools"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/download_btn"
app:layout_constraintBottom_toTopOf="#+id/clear_btn"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cleared!"
android:visibility="gone"
app:layout_constraintTop_toTopof="#+id/rvSchools"
app:layout_constraintStart_toStartOf="#+id/rvSchools"
app:layout_constraintEnd_toEndOf="#+id/rvSchools"
app:layout_constraintBottom_toBottomOf="#+id/rvSchools"
/>
<Button android:id="#+id/clear_btn"
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="clear"
android:textColor="#FFFFFF"
android:textSize="22sp"
android:background="#drawable/buttonshape"
android:shadowColor="#A8A8A8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
ConstraintLayout is much more powerful than RelativeLayout. You also don't need separate layout for background for RecyclerView - in my example I used View with required background color that has the same constraints as RecyclerView.

You can also use RelativeLayout instead:
<?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"
android:orientation="vertical"
android:padding="25dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#id/clear_btn"
android:orientation="vertical">
<Button android:id="#+id/download_btn"
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="download all canadian universities"
android:textColor="#FFFFFF"
android:textSize="22sp"
android:background="#drawable/buttonshape"
android:shadowColor="#A8A8A8"
android:textAlignment="center"/>
<TextView
android:id="#+id/clear_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Cleared!"
android:textSize="24sp"
android:gravity="center"
android:visibility="gone"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvSchools"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<Button android:id="#+id/clear_btn"
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="clear"
android:textColor="#FFFFFF"
android:textSize="22sp"
android:background="#drawable/buttonshape"
android:shadowColor="#A8A8A8"
android:layout_alignParentBottom="true"/>
</RelativeLayout>

Related

How do I put buttons next to each other in linear layout in android studio?

Hello I am trying to put two buttons next to eachother in android studio with linearlayout:
<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:orientation="vertical"
android:gravity="center"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="222dp"
android:layout_height="237dp"
app:srcCompat="#drawable/ic_launcher_background"
tools:layout_editor_absoluteX="246dp"
tools:layout_editor_absoluteY="322dp" />
<com.google.android.material.button.MaterialButton
android:id="#+id/cameraBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/camera"
android:layout_marginTop="8dp"
app:strokeColor="#color/teal_700"
app:cornerRadius="100dp"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/galleryBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gallery"
android:layout_marginTop="8dp"
app:cornerRadius="100dp"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
/>
the output currently is:
I have tried with relativelayout - didn't work and also using horizontal in linearlayout.
I have tried putting also the android:layout_weight as 1 and the buttons disappeared.
I want to have the imageview in the center and the two buttons below and the two buttons are next to each other.
You can use another Linear Layout inside the parent layout and set its orientation to horizontal to achieve the desired output.
Code For Desired Output:
<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:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="222dp"
android:layout_height="237dp"
app:srcCompat="#drawable/ic_launcher_background"
tools:layout_editor_absoluteX="246dp"
tools:layout_editor_absoluteY="322dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center"
android:gravity="center">
<com.google.android.material.button.MaterialButton
android:id="#+id/cameraBtn"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/camera"
app:cornerRadius="100dp"
app:strokeColor="#color/teal_700" />
<com.google.android.material.button.MaterialButton
android:id="#+id/galleryBtn"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:text="Gallery"
app:cornerRadius="100dp" />
</LinearLayout>
In your current layout, all the elements are in one container, that is your LinearLayout.
One idea to achieve what you want with a LinearLayout is to separate the image and buttons in 2 different LinearLayouts.
The orientation of the LinearLayout that will host your buttons should be horizontal.
<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:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="222dp"
android:layout_height="237dp"
app:srcCompat="#drawable/ic_launcher_background"
tools:layout_editor_absoluteX="246dp"
tools:layout_editor_absoluteY="322dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<com.google.android.material.button.MaterialButton
android:id="#+id/cameraBtn"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="#string/camera"
app:cornerRadius="100dp"
app:strokeColor="#color/teal_700" />
<com.google.android.material.button.MaterialButton
android:id="#+id/galleryBtn"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Gallery"
app:cornerRadius="100dp" />
</linearLayout>
</LinearLayout>
If the LinearLayout isn't a hard requirement, I would suggest to use ConstraintLayout. By using that, you can position everything in a much better and easy way.
You need to use another linear layout to put two button besides each other,
Here is the code for 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:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="222dp"
android:layout_height="237dp"
app:srcCompat="#drawable/ic_launcher_background"
tools:layout_editor_absoluteX="246dp"
tools:layout_editor_absoluteY="322dp" />
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.button.MaterialButton
android:id="#+id/cameraBtn"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:gravity="center"
android:text="Camera"
app:cornerRadius="100dp"
app:strokeColor="#color/teal_700" />
<com.google.android.material.button.MaterialButton
android:id="#+id/galleryBtn"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:text="Gallery"
app:cornerRadius="100dp" />
</androidx.appcompat.widget.LinearLayoutCompat>
</LinearLayout>
Here is the screenshot of the desired output.
you can give desired margins to set the buttons in the layout.
If you are intending to keep this view inside of a LinearLayout this is how you will do it. You will add a new LinearLayout below your ImageView and set its orientation or horizontal. Then add your buttons inside of that LinearLayout.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="222dp"
android:layout_height="237dp"
app:srcCompat="#drawable/ic_launcher_background" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.google.android.material.button.MaterialButton
android:id="#+id/cameraBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/camera"
android:layout_marginTop="8dp"
app:strokeColor="#color/teal_700"
app:cornerRadius="100dp"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/galleryBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gallery"
android:layout_marginTop="8dp"
app:cornerRadius="100dp"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
/>
</LinearLayout>
</LinearLayout>
If you are interested in using ConstraintLayout this is how you would do it:
<?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:orientation="vertical"
android:gravity="center"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="222dp"
android:layout_height="237dp"
app:srcCompat="#drawable/ic_launcher_background"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="#+id/cameraBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/camera"
android:layout_marginTop="8dp"
app:strokeColor="#color/teal_700"
app:cornerRadius="100dp"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toStartOf="#+id/galleryBtn"
app:layout_constraintStart_toStartOf="parent"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/galleryBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gallery"
android:layout_marginTop="8dp"
app:cornerRadius="100dp"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintStart_toEndOf="#+id/cameraBtn"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The outer (main) layout has a vertical orientation, so all the elements inside this layout will be arranged vertically, So in order to have these two buttons next to each other you have to use inner
linearlayout (inside the main layout) and set its 'orientation' to horizontal.

How to place frame layout in bottom in the linear layout

I am creating custom keyboard in Android. Keyboard view will be in frame layout. And I want to place this frame layout in bottom in the linear layout. Please give some idea for this.
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Testing"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Testing 2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Testing 3"/>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="bottom|end"
android:layout_gravity="bottom">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Custom Keyboard"/>
</FrameLayout>
</androidx.appcompat.widget.LinearLayoutCompat>
The easiest way is to put a View with the attribute android:layout_weight = "1" between the last TextView and the FrameLayout
...
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Testing 3"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="bottom|end"
android:layout_gravity="bottom">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Custom Keyboard"/>
</FrameLayout>
...
Anyway, in this case I suggest using Relative Layout or, better, Constraint Layout
you can try Constraint Layout for your view as:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/txt_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="SomeText 1"
android:layout_margin="5dp"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/txt_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="SomeText 2"
android:layout_margin="5dp"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/txt_1"/>
<TextView
android:id="#+id/txt_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="SomeText 3"
android:layout_margin="5dp"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/txt_2"/>
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="5dp"
app:layout_constraintTop_toBottomOf="#+id/txt_3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="keyboard"/>
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
u can use the parent as linear layout or scroll view. just replace with scroll view.

Android. TableLayout does not displayed. ImageView problem

I am new in Android and somewhere didnt understand how it works. I has this 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:id="#+id/mainWindow"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:id="#+id/katalog"
android:layout_width="388dp"
android:layout_height="179dp"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintStart_toStartOf="parent">
<TableRow
android:id="#+id/row"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView // problem is here
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:srcCompat="#tools:sample/avatars" />
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="18sp" />
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description"
android:textSize="18sp" />
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Stock"
android:textSize="18sp" />
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</TableRow>
</TableLayout>
<Button
android:id="#+id/button3"
android:layout_width="135dp"
android:layout_height="51dp"
android:text="Stuff"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button5"
android:layout_width="135dp"
android:layout_height="51dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:text="Person"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/button3" />
<Button
android:id="#+id/button6"
android:layout_width="135dp"
android:layout_height="51dp"
android:layout_marginStart="1dp"
android:layout_marginLeft="1dp"
android:text="card"
app:backgroundTint="#07464E"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/button5" />
</androidx.constraintlayout.widget.ConstraintLayout>
And i have another one with almost same options. But this one doesn't displayed. Also java class has few action listeners for buttons, and nothing for TableLayuout. But another java class with table layout doesnt have anything with code, like that
public class admpanel extends lk{
private TableLayout table;
#SuppressLint("SetTextI18n")
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.admpanel);
}
}
And thats works.
P.S. another one TableLayout doesnt displayed because im forgot to use "id" for pieces, then i fixed it. But now im idk
EDIT: That code start work if i am delete ImageView. How to use Image View? Pointed problem
The issue with your code is that the code has not specified a proper android:src or app:srcCompat for the imageView which is necessary to inflate the UmageView to some height or it considers the height as 0dp resulting in the ImageView not show up. tools:src is used just to show the image in the XML design tab to have an idea of how much space or how the view will look. The image specified can not be used for showing it in the application. I have updated your code for a better design and also added a proper image for your ImageView(Resource here). Save the image in your drawable folder as a12_logo. Check this code and comment if you have any issues ahead.
Also, if the purpose of this TableLayout is to use it for showing a list of items, switch to RecyclerView for better performance and easy data handling.
Also, your Buttons have fixed height and width which is not ideal as the buttons might get out of the screen for some devices so I have added better code for the buttons.
<?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"
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:id="#+id/katalog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
app:layout_constraintBottom_toTopOf="#id/button3">
<TableRow
android:id="#+id/row"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="120dp"
android:layout_height="match_parent"
android:layout_column="0"
android:src="#drawable/a12_logo" />
<LinearLayout
android:id="#+id/linear"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_column="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="18sp" />
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description"
android:textSize="18sp" />
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Stock"
android:textSize="18sp" />
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</TableRow>
</TableLayout>
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Stuff"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:text="Person"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toEndOf="#+id/button3" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="1dp"
android:text="card"
app:backgroundTint="#07464E"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button5" />
</androidx.constraintlayout.widget.ConstraintLayout>

Can I put a Button to bottom of a ConstraintLayout inside ScrollView?

I have a ScrollView contains a ConstraintLayout. Inside the ConstraintLayout, I put many views with an attribute layout_constraintTop_toBottomOf to make a relation between the view and the view top of it, and I used layout_marginTop to put spaces between the views.
In my design, I have a Button that should be in the bottom of the layout and it cannot happen with the layout_marginTop because it should have a relation with the bottom of the ConstraintLayout.
Here's my code:
<ScrollView 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.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<TextView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="120dp"
android:text="Logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/un_et"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="25dp"
android:layout_marginRight="28dp"
android:gravity="center"
android:hint="User name"
android:textColor="#bebebe"
android:textCursorDrawable="#null"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/logo" />
<EditText
android:id="#+id/pw_et"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="13dp"
android:layout_marginRight="28dp"
android:gravity="center"
android:hint="Password"
android:inputType="textPassword"
android:textColor="#bebebe"
android:textCursorDrawable="#null"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/un_et" />
<RelativeLayout
android:id="#+id/save_pw"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingLeft="28dp"
android:paddingRight="28dp"
app:layout_constraintTop_toBottomOf="#id/pw_et">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:buttonTint="#bebebe"
android:text="Save account"
android:textColor="#bebebe" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Forget password?"
android:textColor="#a40000" />
</RelativeLayout>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="17dp"
android:layout_marginRight="28dp"
android:text="Login"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintTop_toBottomOf="#id/save_pw" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintTop_toBottomOf="#id/btn" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
Replace ScrollView with NestedScrollView & also add android:fillViewport="true" like this
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
// rest of code
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="#id/btn"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
Just set this property to your button:
app:layout_constraintBottom_toBottomOf="parent"
Then add this to your last view this property:
app:layout_constraintBottom_toTopOf="#+id/button"
Also, add to your last view:
android:layout_marginBottom="height_of_button"
However, if you are adding a lot of views it would be better to populate them inside a RecyclerView using an Adapter. Decide what you want to do. Also, tell me if I understood your question correctly, it was a bit confusing.
I found one solution to keep the button at the bottom, doesn't matter is your text is dynamic, read about app:layout_constraintVertical_bias https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout#Bias
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/text_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="20sp"
android:text="Title"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintTop_toBottomOf="#id/text_gallery"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="true">
<androidx.appcompat.widget.AppCompatTextView
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/texto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text=" Text \n Text" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Buton1"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="#+id/texto"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

ListView under constraint layout disappears in preview

Output png
So below is my xml for the activity:
I have migrated to androidx from support libraries.
Is there a way to achieve 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<AutoCompleteTextView
android:id="#+id/partyname"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/rounded_edittext"
android:layout_marginBottom="8dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:hint="#string/firm_name"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/billform"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#drawable/rounded_buttons"
app:layout_constraintTop_toBottomOf="#id/partyname">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/identifier"
android:layout_height="50dp"
android:layout_width="0dp"
android:padding="5dp"
android:layout_marginEnd="8dp"
android:textSize="16sp"
android:textAllCaps="true"
android:hint="#string/code_article"
android:background="#drawable/rounded_edittext"
android:layout_marginRight="8dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/add"
android:layout_toStartOf="#+id/add" />
<Button
android:id="#+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_buttons"
android:text="#string/add"
android:textAllCaps="true"
android:textSize="18sp"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/billform"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
For god knows why, the listView is not available in the preview.
It works when the root is linear layout. I tried creating a linear layout within the constraint layout, it didn't work
android:layout_height="0dp"
That might be your problem or if you are talking about not seeing items then it might be a bug in android studio because I tried adding another ConstraintLayout without getting any luck.
This answer might help
I wanted to add my answer as a comment but StackOverflow won't let me.
Try to remove the nested layouts.
Try the below 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">
<AutoCompleteTextView
android:id="#+id/partyname"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="24dp"
android:padding="5dp"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
<AutoCompleteTextView
android:id="#+id/identifier"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/add"
android:layout_toLeftOf="#+id/add"
android:padding="5dp"
android:textAllCaps="true"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/partyname" />
<Button
android:id="#+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="ADD"
android:textAllCaps="true"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/identifier" />
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/add" />
change the width from match_parent to 0dp and you can create left and right constraint.The following will work for you.
<ListView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/billform"
app:layout_constraintBottom_toBottomOf="parent"/>
Update
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools">
<AutoCompleteTextView
android:id="#+id/partyname"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/rounded_edittext"
android:layout_marginBottom="8dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:hint="#string/firm_name"
android:padding="5dp"
app:layout_constraintTop_toTopOf="parent"/>
<AutoCompleteTextView
android:id="#+id/identifier"
android:layout_height="50dp"
android:layout_width="0dp"
android:padding="5dp"
android:textSize="16sp"
android:textAllCaps="true"
android:hint="#string/code_article"
android:background="#drawable/rounded_edittext"
android:layout_toStartOf="#+id/add"
app:layout_constraintEnd_toStartOf="#+id/add"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/partyname"/>
<Button
android:id="#+id/add"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/rounded_buttons"
android:text="#string/add"
android:textAllCaps="true"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/partyname"/>
<ListView
android:layout_width="0dp"
android:layout_height="0dp"
tools:listitem="Add items here"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/add"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Categories

Resources