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"
Related
I am trying to add multiple TextViews dynamically to my RelativeLayout, and while this works, when the screen is filled with text, the scrolling does not kick in. Any ideas on how to make it scroll-able?
It looks like this: https://imgur.com/a/a7AnOQV (also, while we're at it, how can I make the fab buttons be 0% transparent? i dont understand why u can see through the buttons the text) :(
One way I tried to make it work was to make ScrollView the parent layout (but it would push my buttons on the top side of the screen), but scrolling worked (but idk how to push the buttons back on the bottom of the screen) and also tried other answers found on Stackoverflow, but none seemed to help me. I tried the whole day to fix this goddamn Scroll.
XML Code:
<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:id="#+id/relativeLayoutId"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".PostDataFragment">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
android:scrollbars="vertical"
android:id="#+id/scrollViewId">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<TextView
android:id="#+id/row0"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView" />
</RelativeLayout>
</ScrollView>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayoutId"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:src="#drawable/baseline_add_white_24dp"
app:backgroundTint="#color/colorPrimary"
app:fabSize="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<LinearLayout
android:id="#+id/pictureLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="24dp"
android:layout_marginBottom="90dp"
android:orientation="horizontal">
<TextView
android:id="#+id/textView2"
style="#style/TextAppearance.AppCompat.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:text="New Picture" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabPicture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#drawable/baseline_insert_photo_white_24dp"
app:fabSize="mini" />
</LinearLayout>
<LinearLayout
android:id="#+id/textLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="24dp"
android:layout_marginBottom="150dp"
android:orientation="horizontal">
<TextView
android:id="#+id/textView"
style="#style/TextAppearance.AppCompat.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:text="New Paragraph" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#drawable/baseline_notes_white_24dp"
app:fabSize="mini"
tools:layout_editor_absoluteX="144dp"
tools:layout_editor_absoluteY="320dp" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
Java Fragment File (inside onCreateView):
parentRLayout = (RelativeLayout) v.findViewById(R.id.relativeLayoutId);
Inside a button listener in the Java Fragment File -> When a button is
clicked, then text is added into a dialog, and when fabText button is
clicked and text is added on the screen -> following line of code:
parentRLayout.addView(createNewTextView(paragraphText.getText().toString(), 0, 5, 5));
//Function that returns a TextView (in the same Java Fragment Class)
TextView createNewTextView(String text, int alignment, int margin, int padding){
TextView newDynamicTextView = new TextView(getActivity());
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT
);
layoutParams.addRule(RelativeLayout.BELOW, currentId);
newDynamicTextView.setLayoutParams(layoutParams);
newDynamicTextView.setId(TextView.generateViewId());
currentId = newDynamicTextView.getId();
Log.d("currentId", ""+currentId);
newDynamicTextView.setText(text);
Log.d("newDynamic:", newDynamicTextView.getText().toString());
return newDynamicTextView;
}
EDIT:
I have managed to make it work. The idea is to have the CoordinatorLayout as the root(parent) layout and inside it a ScrollView that has inside a RelativeLayout. The buttons are outside the ScrollView (under it) so they don't scroll.
My one cent.
It looks like this: https://imgur.com/a/a7AnOQV (also, while we're at it, how can I make the fab buttons be 0% transparent? i dont understand why u can see through the buttons the text)
Please take note that views are drawn based on their order in your xml layout.
Because the tree is traversed pre-order, this means that parents will
be drawn before (i.e., behind) their children, with siblings drawn in
the order they appear in the tree.
https://developer.android.com/guide/topics/ui/how-android-draws
This is my xml code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/nero"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<Button
android:layout_width="130dp"
android:layout_height="130dp" />
....
</RelativeLayout>
<FrameLayout
android:id="#+id/imprint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal">
<Button
android:layout_width="230dp"
android:layout_height="230dp" />
</FrameLayout>
</LinearLayout>
I want to place the FrameLayout at the bottom of the LinearLayout and all elements in the FrameLayout should be centered. How can I do that?
In Frame Layout Use Layout_Gravity will work
android:layout_gravity="bottom|center"
Also Use Bottom margin to make it in perfect location from bottom.
android:layout_marginBottom="20dp"
To center the button inside the FrameLayout you should add:
android:layout_gravity="center"
inside the Button or:
android:gravity="center"
inside the FrameLayout. And btw, if a Button is the only child why are you using a FrameLayout?
I don't know exactly if that would solve the issue, but you can use "wrap_content" as your layout_width in your FrameLayout at the bottom. That would center the FrameLayout, so the views which are in the layout would get centered.
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.
I've tried several ways of doing this and failed each time.
What I want to acomplish is centering TextView (horizontally and vertically) on ImageView, but instead command android:layout_centerInParent="true" results in vertical and horizontal centering on the whole area, not on ImageView. Please help me with attaching parent to TextView or other way of solving this.
Here is my xml code:
<ImageView
android:id="#+id/imageView1"
android:layout_width="170dp"
android:layout_height="46dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:contentDescription="Your Height BG"
android:src="#drawable/textareabg" />
<TextView
android:id="#+id/textView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Your Height"
android:textColor="#d88b6d"
android:textSize="20sp" />
It can be easily acheived using ConstraintLayout. Android recently introduced ConstraintLayout. It allows us to lay out child views using ‘constraints’ to define position based relationships between different views found in our layout. It is similar to RelativeLayout, but much more powerful than it because, ConstraintLayout reduces View Hierarchy to a greater extent. Now getting back to your question, Here is the sample xml code which does the work for you
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/image"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Image"
android:textSize="20sp"
app:layout_constraintRight_toRightOf="#+id/image"
app:layout_constraintLeft_toLeftOf="#+id/image"
app:layout_constraintTop_toTopOf="#+id/image"
app:layout_constraintBottom_toBottomOf="#+id/image"/>
</android.support.constraint.ConstraintLayout>
Output View on Device
You can position the TextView anywhere on the ImageView using app:layout_constraintHorizontal_bias and app:layout_constraintVertical_bias. By default these values will be set to 0.5. So, it will be center aligned by default , if we don't specify any values.
When you add a constraint to both sides of a view (and the view size
for the same dimension is either "fixed" or "wrap content"), the view
becomes centered between the two anchor points by default.
Note: Bias attribute only works if you specify the constraints for the boundaries (e.g. top and bottom for vertical bias, left and right for horizontal bias)
More about ConstraintLayout
ConstraintLayout
Sample Project
Blog on ConstraintLayout
Try this way,hope this will help you to solve your problem.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="170dp"
android:layout_height="46dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:contentDescription="Your Height BG"
android:src="#drawable/textareabg" />
<TextView
android:id="#+id/textView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Your Height"
android:textColor="#d88b6d"
android:textSize="20sp" />
</FrameLayout>
Perhaps this would help you with your question
Android TextView text won't center
A person here mentions using android:gravity="center".
Here's what I would do
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="170dp"
android:layout_height="46dp"
android:layout_centerHorizontal="false"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:contentDescription="Your Height BG" />
<TextView
android:id="#+id/textView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_alignTop="#+id/imageView1"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginTop="10dp"
android:text="Your Height"
android:textColor="#d88b6d"
android:textSize="20sp" />
What you need to do is use FrameLayout.The doc says:
FrameLayout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.
Child views are drawn in a stack, with the most recently added child on top. The size of the FrameLayout is the size of its largest child (plus padding), visible or not (if the FrameLayout's parent permits). Views that are GONE are used for sizing only if setConsiderGoneChildrenWhenMeasuring() is set to true.
So you need something like following psuedo layout code:
<FrameLayout>
<ImageView gravity="center">
<TextView gravity="center">
</FrameLayout>
Add one more relative layout under your layout like this :
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Large Text"
android:id="#+id/textView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Check for width and height you want. Eg. If you want specific height and width for image, change height and width of this relative layout.
Thats it...
I'll try to simplify the problem for avoiding long code pieces: I want to do something like that in my layout
The structure should be easy with something like:
LinearLayoutA (vertical)
LinearLayoutB (vertical)
LinearLayoutC (horizontal)
LinearLayoutC' (horizontal)
LinearLayoutB' (vertical)
LinearLayoutC'' (horizontal)
LinearLayoutC''' (horizontal)
All with weight=1
the problem for me is define what to put within the LinearLayoutC. So focusing now the elements inside LinearLayoutC:
My first option was another LinearLayout (vertical) the problem is that if the image is taller than the LinearLayoutC the TextView is not visible.
So I used that RelativeLayout:
<RelativeLayout
android:id="#+id/RelativeLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Eiffel"
android:textSize="45sp"
android:id="#+id/text"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"
></TextView>
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/eiffel2"
android:id="#+id/image"
android:layout_above="#id/text"
android:layout_centerHorizontal="true"></ImageView>
</RelativeLayout>
Nice it works! But not for long =(. (We will call it from now RelativeLayout1) When the screen is smaller than the views the layout seems perfect but when going into a larger screen the block is aligned to the bottom of the parent and I'd like it to be centered in the screen (or the sublayout). Like shows that screen:
That is because of the android:layout_alignParentBottom="true" at the TextView.
Trying to solve that I used a RelativeLayout2 for wrap the RelativeLayout1 with a code like:
<RelativeLayout2
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout1
android:layout_centerInParent="true"
.....
></RelativeLayout1>
</RelativeLayout2>
But even with that the layout RelativeLayout1 still aligned to the bottom of the image (and filling all the screen vertically as it had a height= fill_parent and I don't understand why is that happening and how can I solve it. Please can you help me? I've tried for hours. Thanks in advance
Add
android:adjustViewBounds="true" in your ImageView
remove the android:layout_alignParentBottom="true" from the textview and add this to your root relativelayout tag android:layout_centerInParent="true"
I had debug your code .. try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/RelativeLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity = "center_vertical" >
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/eiffel2"
android:id="#+id/image"
android:layout_centerHorizontal = "true"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Eiffel"
android:textSize="45sp"
android:id="#+id/text"
android:layout_below = "#+id/image"
android:layout_centerHorizontal = "true"
/>
</RelativeLayout>
use android:layout_height="wrap_content" for your second RelativeLayout
set
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
in the ImageView and the TextView, and then use a LinearLayout (with gravity= center) as container and it work
Have you considered using TableLayout? It is best suited for grid like views such as this one. You can even specify weights for different columns, etc. and have different column widths.