My problem is that i have my listview working perfect on a absoulteLayout but the buttons on the bottom aren't show up! I put a scrollview with a absoluteLayout with all items (textview, button, etc) and outside of the scrollview I put the listview, this didn't work, either, just scroll the buttons but the listview just move a little bit, how can I put a scrollview to can see the buttons on the button and make the listview works?
my XML:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- The main content view -->
<AbsoluteLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/Ab">
<ListView
android:layout_width="317dp"
android:layout_height="429dp"
android:id="#+id/listView"
android:layout_gravity="center"
android:layout_x="45dp"
android:layout_y="41dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This Works Monica!!"
android:id="#+id/TV1"
android:layout_gravity="center_horizontal"
android:layout_x="120dp"
android:layout_y="22dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="Play :D"
android:id="#+id/TESTME"
android:layout_gravity="center_horizontal|bottom"
android:layout_x="190dp"
android:layout_y="520dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="Pause"
android:id="#+id/PAUSE"
android:layout_x="110dp"
android:layout_y="521dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="37dp"
android:text="Lista"
android:id="#+id/LISTA"
android:layout_x="274dp"
android:layout_y="520dp" />
<CheckBox
android:layout_width="84dp"
android:layout_height="wrap_content"
android:text="Lista?"
android:id="#+id/CHECARL"
android:layout_x="267dp"
android:layout_y="490dp"
android:checked="false" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="BorrarL"
android:id="#+id/BORRARL"
android:layout_x="20dp"
android:layout_y="520dp" />
</AbsoluteLayout>
<!-- The navigation drawer -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#E6E6E7" />
You are using absolute layout that means, from documentation:
A layout that lets you specify exact locations (x/y coordinates) of its children.
So if you don't see the buttons it is because they are positioned outside of your device screen bounds. And their position is absolute / fixed so they stay there no matter what.
I would recommend to change to different layout. I don't know what kind of app you are building but absolute layout is generally not the best choice.
Possibility number one:
<?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/background"
android:clickable="true">
<ListView
android:id="#+id/allPaymentListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/addNewPayment"
android:layout_marginTop="10dp"></ListView>
<Button
android:id="#+id/addNewPayment"
android:layout_width="match_parent"
android:layout_height="#dimen/primary_button_height"
android:layout_alignParentBottom="true"
android:layout_margin="10dp"
android:background="#drawable/blackbutton"
android:text="#string/add_new_card"
android:textColor="#color/light_blue"/>
</RelativeLayout>
In this case the button will be always seen on the bottom of the page, below the listview.
The second possibilty is to add a footer to the listview:
http://developer.android.com/reference/android/widget/ListView.html#addFooterView(android.view.View)
In that case the view with the button will be the last element in the listview.
And don't use Absolute Layout it is deprecated, the reason is the app will not scale to different screen sizes as you wanted.
You should use a RelativeLayout with the buttons at the bottom and the ListView placed on top of the buttons.
AbsoluteLayout is, in general. to be avoided for layouts unless you are trying to accomplish a very specific purpose. It's considered an anti-pattern to position elements absolutely. To achieve what you have stated, a RelativeLayout would be the way to go.
Related
I have implemented persistent bottom sheet with FAB anchored to the top of it.
When I try to do the same with modal bottom sheet (extends BottomSheetDialogFragment) it says
java.lang.IllegalStateException: Could not find CoordinatorLayout descendant view to anchor view android.support.design.widget.FloatingActionButton
Is it possible to do the same layout with modal bottom sheet or maybe make a shadow and unclickable area above persistent one?
I was trying to do the same "FAB on top" thing in ModalBottomSheet, but there's no direct method/way to do that.
For such cases, we therefore use FrameLayout. Inside the definition, it says that -
Child views are drawn in a stack, with the most recently added child on top.
So we can create a layout for the ModalBottomSheet (extends BottomSheetDialogFragment), which would look something like this in your case -
<FrameLayout
android:id="#+id/parent_frame_layout"
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:orientation="vertical"
tools:context=".ModalBottomSheetFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="25dp"
android:orientation="vertical">
<!-- Whatever layout you want to give here. This is going to be the body
of the ModalBottomSheet. Also you might not wanna use the current Linear
Layout too.-->
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/icon_sheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_gravity="center|top"
android:src="#drawable/ic_music"
android:elevation="20dp"/>
</FrameLayout>
Notice that -
FAB is made after LinearLayout (body for the BottomSheet), as it would be stacked over the LinearLayout.
We gave a marginTop=25dp for LinearLayout but we gave marginTop=0dp for the FAB. This is how you create the half-out, half-in effect. And also gave elevation on FAB for better float look.
Finally we can inflate it's view inside the onCreateDialog overridden method and perform all necessary actions thereafter.
Hope I was able to answer your question. Do comment for any further doubts/updates.
Adding to #Krishn Agarwal answer we need to make sure the bottom sheet dialog has a transparent theme then only the same look and feel will be achieved. We can even have a Constraint Layout instead of a Linear Layout. We can use BottomSheetDialog/BottomSheetDialogFragment
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/parent_frame_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_success_dialog"
style="#style/AppModalStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/margin_60"
android:paddingStart="#dimen/dimen_25"
android:paddingEnd="#dimen/dimen_25"
android:paddingBottom="#dimen/dimen_25">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_title_text"
style="#style/style_bottomsheet_header_22sp"
android:gravity="center"
android:layout_marginTop="80dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="#string/mf_mandate_creationsuccessful" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_description"
style="#style/open_sans_semi_bold_15sp_gray"
android:layout_marginTop="#dimen/dimen_7"
android:layout_marginBottom="#dimen/margin_25"
app:layout_constraintBottom_toTopOf="#+id/go_to_dashboard_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_title_text"
tools:text="Description" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/go_to_dashboard_btn"
style="#style/mf_style_blue_button"
android:layout_width="0dp"
android:elevation="#dimen/margin_5"
android:text="#string/mf_go_to_dashboard"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_description"
tools:targetApi="lollipop" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floating_tick_icon"
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_gravity="center|top"
android:layout_marginTop="0dp"
android:importantForAccessibility="no"
android:visibility="visible"
app:backgroundTint="#color/very_light_green"
app:elevation="#dimen/margin_20"
app:fabCustomSize="128dp"
app:maxImageSize="128dp"
app:srcCompat="#drawable/ic_success_tick"
app:tint="#null" />
</FrameLayout>
I am new to Android development. I have been working in iOS since long. As in iOS when we want to put VIEW on xib on some exact position, we simply put it there, drag it up to that point.
For example say Two buttons at lower area in iOS, which look like below
As, I simply want them in middle, I will put them their. as below
Now same thing in Android environment, I go for following code,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/myAwesomeTextView"
android:layout_width="wrap_content"
android:layout_height="1dip"
android:layout_centerInParent="true"
android:text="Veer Suthar" />
<TextView
android:id="#+id/myAwesomeTextView1"
android:layout_width="wrap_content"
android:layout_height="100dip"
android:layout_below="#id/myAwesomeTextView"
android:layout_centerInParent="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/myAwesomeTextView1"
android:gravity="center_vertical"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:onClick="buttonPressed"
android:text="Button One" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:onClick="buttonPressed"
android:text="Button Two" />
</LinearLayout>
</RelativeLayout>
It shows Activity Screen, like below
Now If I want to drag buttons, using GRAPHICAL LAYOUT, I can't move them as I want, and for spacing to put them into lower area, I need to put extra TextView .
Is there any better way to organise Android Activity GUI properly, like iOS?
I'll give you a brief example, since Android graphical layout is not as smooth as XCode.
To accomplish what you need, centering the two buttons in the screen, you can use a XML code like this:
<?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" >
<LinearLayout
android:id="#+id/layout_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_centerInParent="true">
<Button
android:id="#+id/button_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button One"/>
<Button
android:id="#+id/button_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Two"/>
</LinearLayout>
</RelativeLayout>
The trick is to use android:layout_centerInParent="true" for the only component that you want to be centered in the screen all other components can use that one for reference to be placed in the screen.
For example
<TextView
android:id="#+id/myAwesomeTextView1"
android:layout_width="wrap_content"
android:layout_height="100dip"
android:layout_above="#+id/layout_center"
android:text="Veer Suthar"/>
This is one way for doing this, you can always find a better and more comprehensible way to do things.
Hope this helped.
Add this to your LinearLayout:
android:layout_alignParentBottom = "true"
Childs in a RelativeLayout can be "glued" to a particular position relative to the parent layout or to other elements in the same layout using the xml tags listed here: http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
Supose I have a layout oriented vertically with one button in the top, a list view in the middle, and a button in the bottom:
------
BUTTON
LISTVIEW
LISTVIEW
LISTVIEW
------
I would like to make the whole layout scrollable, to be able to see the full list when scrolling down it:
------
LISTVIEW
LISTVIEW
LISTVIEW
BUTTON
------
I think I found it, here's a solution for you, without using ScrollView (which is actually not needed):
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
<ListView android:id="#android:id/list1"
android:layout_height="0dip"
android:layout_width="match_parent"
android:layout_weight="1" />
<ListView android:id="#android:id/list2"
android:layout_height="0dip"
android:layout_width="match_parent"
android:layout_weight="1" />
<ListView android:id="#android:id/list3"
android:layout_height="0dip"
android:layout_width="match_parent"
android:layout_weight="1" />
<Button android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
You can add a button to the header of a ListView and a button to the bottom of the ListView
Add a Button as header and a Button as footer to the ListView.
Write a custom Adapter for the ListView, return Button view at 0 and last position in getView().
I'm not really sure if you want to be able to scroll the buttons too, depending on that there are two ways which you can try. First where the button won't change their position while list view is scrolling. In this situation your xml should look like this :
<?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" >
<Button
android:id="#+id/top_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<ListView
android:id="#+id/my_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/bottom_button"
android:layout_below="#+id/top_button" />
<Button
android:id="#+id/bottom_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>
The second option is when you want these two buttons to scroll while list view is scrolling too. To achieve this you should add Buttons to your list view as header and footer :
mListView.addHeader(myFirstButton);
mListView.addFooter(mySecondButton);
And that should do the trick for you in both scenarios.
You should use android:layout_height="wrap_content"
I have some FrameLayout to display overlapping images. Under this FrameLayout I want to display a standard button for some click-action.
To make my work easier, I thought, I can put a new Linear, or Relative, Layout under the FrameLayout - surely all in one LinearLayout.
But this method isn't working for me.
What is the best way to show my button under a whole FrameLayout without putting it in the Layout and managing his position programmaticaly?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<FrameLayout
android:id="#+id/framelayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|left" >
<ImageView
android:id="#+id/coverimg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:maxHeight="100dp"
android:minHeight="130dp"
android:minWidth="130dp"
android:src="#drawable/cover_img" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="100dp"
android:src="#android:drawable/ic_media_play" />
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
</FrameLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Button" />
</LinearLayout>
</LinearLayout>
first to say:
your orientation of the first LinearLayout is wrong. You should use vertical instead of horizontel, cause it would show the button right of your images and not below.
second:
no nead to wrap the button into another LinearLayout, cause it's a sinlge item and attached to your first LinearLayout.
third:
to set the button on another 'place', give your top LinearLayout an ID like 'android:id="#+id/myLinear"' and then use following code:
LinearLayout myLinear = (LinearLayout)this.findViewById(R.id.myLinear);
LayoutParams lp = new LinearLayout.LayoutParams(Gravity.CENTER);
myLinear.setLayoutParams(lp);
maybe this will work to:
LinearLayout myLinear = (LinearLayout)this.findViewById(R.id.myLinear);
myLinear.setLayoutParams(new LinearLayout.LayoutParams(Gravity.CENTER));
Hope i could help you?
First you change Linear layout orientation to vertical, and second no need to use another
layout u can put button directly
Ex: android:orientation="vertical"
I'm using 4 listviews in my layout and if i use scrollview , i cannot scroll into my listview. If i remove scrollview in my xml, then the last list is been hiddden. How to overcome this problem?
My code goes below:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:id="#id/LinearLayout01" android:layout_width="fill_parent" android:layout_height="42.0dip">
<Button android:textSize="23.0dip" android:onClick="newtodo_Click" android:textStyle="bold" android:textColor="#ffffffff" android:gravity="center" android:id="#id/btnNewTodo" android:background="#drawable/new_todo" android:layout_width="fill_parent" android:layout_height="wrap_content" />
</LinearLayout>
<TextView android:textColor="#000000" android:layout_height="wrap_content" android:background="#FF0000" android:layout_width="match_parent" android:text="High Priority" android:id="#+id/textView1"></TextView>
<ListView android:id="#+id/lvhigh" android:cacheColorHint="#00000000" android:background="#000000" android:layout_width="match_parent" android:layout_height="175px"></ListView>
<TextView android:background="#ffff01" android:textColor="#000000" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="Medium Priority" android:id="#+id/textView2"></TextView>
<ListView android:id="#+id/lvmed" android:layout_width="match_parent" android:layout_height="175px"></ListView>
<TextView android:background="#00ff01" android:textColor="#000000" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="Low Priority" android:id="#+id/textView3"></TextView>
<ListView android:id="#+id/lvlow" android:layout_width="match_parent" android:layout_height="175px"></ListView>
<TextView android:background="#cccccc" android:textColor="#000000" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="Incomplete Tasks" android:id="#+id/textView4"></TextView>
<ListView android:id="#+id/lvinc" android:layout_width="match_parent" android:layout_height="175px"></ListView>
</LinearLayout>
</ScrollView>
Any Help is really appreciated and thanks in advance...
In you layout there is textview and after that listview so why you not used expandable listVIew.It will help you in your problem.
Here is example of Expandable listview
Expandable Listview
Expandable Listview example
Click Here
Click Here
An simple workaround is to
Remove ScrollView
Set height of all ListView to 0
Set layout_weight property of all child to 1
To overcome, try re-factoring your UI to not include multiple scrollable objects inside of another scrollable object. This will not be reliable and will produce unexpected results (as you have found).
As the100rabh said, this is generally bad design. Normally an application will present a list of some sort to a user. Four lists for a screen that is 2-5 (~10 for tablets) inches is three too many.
please set your listview as a non scrolling container By using
ls_edu.setScrollContainer(false);
it may help to scroll the list view.