Manually arrange buttons in layout in Android app - java

I would like to know how to make a layout like this picture : http://www.noelshack.com/2014-13-1395752335-app.png
I have no idea how I can do that. I already have a LinearLayout with some buttons inside, but I don't know how to move them easily.
Thanks in advance for your help (and sorry for my bad english !)

If You are suggesting interactive moving of items, then You should search for "Drag and Drop". For example: Drag and drop for linearlayout's child views.
If you want to overlay one view over another - then use RelativeLayout and remember that latest view in xml layout has more Z axis value.
<?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/button_below"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_centerVertical="true"
android:text="ButtonBelow" />
<Button
android:id="#+id/button_above"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignBottom="#+id/button_below"
android:layout_alignParentLeft="true"
android:layout_marginBottom="62dp"
android:text="ButtonAbove" />
</RelativeLayout>

Related

How to multiply layouts dynamically and know witch one is clicked by user?

Fristly, sorry for my english.
Then, I'm trying to develop an app with android studio. I'm doing well, thank to stackoverflow !
But now I have a problem. In my app, I need to create new layouts (from an original one) when the user wants a new one in the main layout.
The layout I want to duplicate :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusable="true"
android:background="?android:attr/selectableItemBackground"> >
<TextView android:id="#+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="text1">
<TextView android:id="#+id/text2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="text2"
</LinearLayout>
After adding it and setting Textviews with data, the user can click on it to see more information (by maybe using another layout).
But the problem is, I don't know how to put a global Click Listener AND know witch layout added is clicked. I try a lot of things because it didn't work, can someone help me please ?

Center ProgressBar inside RecyclerView that is inside ConstraintLayout

I have a ProgressBar that is an item of the RecyclerView and was added there with the adapter following this tutorial Android RecyclerView dynamically load more items when scroll to end with bottom ProgressBar.
But instead of using a RelativeLayout in the activity_main.xml file, I'm using the default ConstraintLayout. The problem for me is that the ProgressBar isn't centered.
Please find below the layouts I've described above:
The progress bar item
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ProgressBar
android:id="#+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
</LinearLayout>
The activity_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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="me.bookquotes.quotes.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
Below is a screenshot of the ProgressBar that appears on the left (I need it to be centered):
I've taken a closer look at your issue and it is not clear at all what is going on. I have taken the sample project and applied your changes to the layouts and it works just fine. (I did remove a tools reference and changed a couple of ids.)
Here is the GitHub project with the changes just to the two layouts above. Here is a video of this modified app that shows the progress bar in the center as expected.
I was thinking that this was a constraint issue but, as you can see from the demo, that is not the case.
It is also possible that this may be related to the version of ConstraintLayout you are running or some other configuration thing, so you may want to check that out. Otherwise, it looks like something else is going on that has not been revealed. Are you doing any other manipulation of the layout widgets?
It would be useful to know what in your layout is not lining up. Give the LinearLayout a background color to see if it stretching across the screen or not. That will tell you if the progress bar is misaligned or whether the LinearLayout is pinched.
One other possibility: Are you failing to name the parent in the inflation of the LinearLayout? Say something like this:
View view = LayoutInflater.from(activity).inflate(R.layout.item_loading, null, false);
instead of this
View view = LayoutInflater.from(activity).inflate(R.layout.item_loading, parent, false);
That small difference will shove your progress bar to the side.
You need to add gravity to your parent LinearLayout which sets the child's gravity to center.I have corrected the progressbar layout.
Hope this could help.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ProgressBar
android:id="#+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
</LinearLayout>
Are you trying to center in middle of screen ?
Or just inside the linear layout
Try gravity instead of layout gravity which will try to center inside the linear layout instead of constraint layout. Since you already have match parent width on it . Also post code to show when you are adding the progress bar to the view .

Android ImageView scale type centerCrop

I'm creating an activity on Android. I want to show a background image in it. I put a ImageView into my main RelativeLayout.
<RelativeLayout
android:id="#+id/relativeLayoutMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/bgImage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:src="#drawable/bg4"
android:scaleType="centerCrop" />
</RelativeLayout>
It makes view like this.
I need to make view like this
How can I do it?
Try set ImageView attribute ScaleType=fitEnd ?
use this code.it's give the out-put as you want.
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" >
<RelativeLayout
android:id="#+id/relativeLayoutMain"
android:layout_width="150dp"
android:background="#android:color/background_dark"
android:layout_height="150dp" >
<ImageView
android:id="#+id/bgImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
one advice if u give the imageview width fill parent then it's contain whole space according to main container.
Best Luck
Set the android:background="#drawable/bg4" in the RelativeLayout like that:
The whole XML should look like that:
<RelativeLayout
android:id="#+id/relativeLayoutMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:background="#drawable/bg4
android:orientation="vertical" >
</RelativeLayout>
First, I believe there are a couple of things wrong in the xml:
RelativeLayout does not make use of an orientation, you should remove that
Is this your full xml file? If so then the alignParentLeft in the RelativeLayout doesn't do anything because that is an attribute you use if it's parent is a RelativeLayout.
fill_parent is the deprecated name of match_parent, you should use that.
I also believe that code you have would center the image on the screen putting anything that is to big evenly on both sides and not at all what you said it does.
If you just want a background you can just use android:background="#drawable/bg4" in the RelativeLayout
EDIT: Changing the layoutparams of the ImageView to wrap_content both height and width and removing the scaleType alltogether might make it like you wanted it to be.

LinearLayout minHeight not working with weigth="1"

I tried all afternoon to get the minHeight attribute to work.
What I want is the linearMe layout to:
Stretch from the bottom of the screen to the bottom of the ListView when the ListView has just a few elements.
I need to be able to fill the linearMe layout with a picture for example.
As the ListView gets bigger I want the linearMe layout to:
Have a fixed height (while being at the bottom of the screen) and the ListView to allow scrolling.
My problem is that the the linearMe layout is smaller and smaller as there is more elements in the ListView. And when there is enough element for the listView to fill the screen, the linearMe layout is just gone. It looks like the minHeight is useless in this case.
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:id="#+id/linearMe"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FF0000"
android:minHeight="200dp" />
</LinearLayout>
I hope you can help me out ! :)
Add android:layout_weight="1" to the ListView as well.
Change them both (list & linearMe) android:layout_height attribute to "match_parent"
Remove `minHeight.
That way each View will take half of the screen.`
You might want to try your spacer layout using "View" instead of "LinearLayout". The ViewGroup classes sometimes handle layouts slightly differently.
If you are willing to use ConstraintLayout as the parent container, the following xml should serve your purpose:
<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">
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/linearMe"
app:layout_constraintTop_toTopOf="parent"
tools:listitem="#android:layout/list_content" />
<LinearLayout
android:id="#+id/linearMe"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#FF0000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/list"
app:layout_constraintHeight_min="200dp"
android:orientation="vertical"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
What I've done is that I've defined constraints to chain both list and linearMe with each other. app:layout_constraintHeight_min="200dp" will ensure minimum height of 200dp for linearMe. app:layout_constrainedHeight="true" makes sure that when list has more items, it doesn't hide behind linearMe.
I couldn't test it with some data to fill the ListView. You can just try it out and post your feedback here.

Android Layout with ListView and Buttons

Alright, this specific layout is just annoying me. And can't seem to find a way to have a listView, with a row of buttons at the bottom so that the listview doesn't extend over top of the buttons, and so the buttons are always snapped to the bottom of the screen. Here's what I want:
removed dead ImageShack link
It seems like it should be so easy, but everything I've tried has failed. Any help?
Here's my current code:
RelativeLayout container = new RelativeLayout(this);
container.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
//** Add LinearLayout with button(s)
LinearLayout buttons = new LinearLayout(this);
RelativeLayout.LayoutParams bottomNavParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
bottomNavParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
bottomNavParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
buttons.setLayoutParams(bottomNavParams);
ImageButton newLayer = new ImageButton(this);
newLayer.setImageResource(R.drawable.newlayer);
newLayer.setLayoutParams(new LinearLayout.LayoutParams(45, LayoutParams.FILL_PARENT));
buttons.addView(newLayer);
container.addView(buttons);
//** Add ListView
layerview = new ListView(this);
RelativeLayout.LayoutParams listParams = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
listParams.addRule(RelativeLayout.ABOVE, buttons.getId());
layerview.setLayoutParams(listParams);
container.addView(layerview);
I think this is what you are looking for.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#+id/testbutton"
android:text="#string/hello" android:layout_alignParentBottom="true" />
<ListView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/list"
android:layout_alignParentTop="true" android:layout_above="#id/testbutton" />
</RelativeLayout>
I had the same problem for ages.
The solution to keeping the ListView above the buttons, but preventing it from covering them up when the list is long, is to set android:layout_weight="1.0" on the ListView. Leave the layout_weight on the buttons unset so that they remain at their natural size, otherwise the buttons will get scaled. This works with LinearLayout.
There's an example in the Android ApiDemos:
ApiDemos/res/layout/linear_layout_9.xml
I was just searching for an answer to this question and this was one of the first results. I feel as if all of the answers, including the one that is currently chosen as the "best answer" is not addressing the issue being asked about. The problem that is being stated is that there is an overlap of the two components Button and ListView in that the ListView is taking up the entire screen, and the Button is visually floating above (in front of) the ListView (blocking view/access of the last item in the ListView)
Based on the answers I've seen here and on other forums, I finally came to a conclusion on how to resolve this.
Originally, I had:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF394952">
<ListView
android:id="#+id/game_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
style="#android:style/ButtonBar">
<Button
android:id="#+id/new_game"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/new_game"
android:textColor="#FFFFFFFF"
android:background="#drawable/button_background" />
</LinearLayout>
</RelativeLayout>
Note the use of RelativeLayout as the root node.
This is the final, working version in which the Button does not overlap the ListView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF394952">
<ListView
android:id="#+id/game_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_weight="1.0" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
style="#android:style/ButtonBar">
<Button
android:id="#+id/new_game"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/new_game"
android:textColor="#FFFFFFFF"
android:background="#drawable/button_background" />
</LinearLayout>
</LinearLayout>
There are only two differences. First, I've switched to using a LinearLayout. This will help with the next bit, which was adding android:layout_weight to my ListView
I hope this helps.
The best way is a relative layout that sets the buttons below the listview. In this example the buttons are also in a linear layout because it is easier to put them side by side at an equal size.
<RelativeLayout android:id="#+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView android:id="#+id/ListView01"
android:layout_alignParentTop="true"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</ListView>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_below="#+id/ListView01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button android:id="#+id/ButtonJoin"
android:text="Join"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentBottom="true">
</Button>
<Button android:id="#+id/ButtonJoin"
android:layout_alignRight="#id/ButtonCancel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel"
android:layout_alignParentBottom="true">
</Button>
</LinearLayout>
</RelativeLayout>
I know this post is rather old, but, to answer the original poster's question, the reason the code did not work was buttons.getId() returns -1. If you are going to do this, you need to set do something like call buttons.setId(10). If you do that, the code works just fine.
the easiest solution would be to create two linear layouts, one with the button and the other with the list view(Wrap content on the button height and match parent on the list layout height). then only make a scroll view over the layout with the list view and the button layout will be ignored. hope it helps, sorry i didn't feel like writing out the code.
this should work. to have buttons above the listview too, put the buttons inside another linear layout.
<LinearLayout> main container // vertical
<LinearLayout> scrollview must be contained in a linear layout //vertical - height to fill parent
<ScrollView> set the height of this to fill parent
<ListView> will be contained in the scrollview
</ListView>
</ScrollView>
</LinearLayout>
<LinearLayout> //horizontal - height to wrap content
<Button>
</Button>
</LinearLayout>
</LinearLayout>

Categories