Halloo guys I have problem here with coordinator layout. I have TextInputLayout and inside it I have editText. What I want is to show it on click on FAB on the left side and hide on click on FAB.
But I have always problem with edit text going below FAB:
Only way I was able to somehow do it is with using marginRight, see xml below. But is there any way to do it without that I think there must be better way.
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="#dimen/fab_normal_size"
android:layout_height="#dimen/fab_normal_size"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:fabSize="normal"
android:src="#drawable/ic_add_black_24dp" />
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="#id/fab"
app:layout_anchorGravity="left|center_vertical"
android:layout_marginRight="#dimen/fab_normal_size">
<EditText
android:id="#+id/input_txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="banany"
android:text="testestes....." />
FAB is always over UI by design:
Floating action buttons are used for a special type of promoted
action. They are distinguished by a circled icon floating above the UI
and have special motion behaviors related to morphing, launching, and
the transferring anchor point.
I haven't checked how it is implemented so unless someone else come with better answer you can either check CoordinatorLayout and FAB sources to see what makes it hoovering over UI, or if time is short you simply put something that looks like FAB (either you use regular button with proper drawable, or 3rd party lib).
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="#id/fab"
app:layout_anchorGravity="left|center_vertical">
<EditText
android:id="#+id/input_txt"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:hint="banany"
android:text="testestes....." />
</android.support.design.widget.TextInputLayout>
Just try the above code, hope it suffice the purpose to some extent
Related
So, the title may be confusing, but to put it in context:
I have an ImageButton component in my app display that should be on the opposite side of my ImageView, lined up perfectly, and to repeat this for any other item on the same list.
My question and doubt itself is how to do this when the ImageButton in this case is inside a LinearLayout while the ImageView is outside of it. Is there like a code line that can connect an outside element to a LinearLayout inside element.
Here's how my display looks:
item_contact.xml
The blue rectangle, being the LinearLayout, means everything inside belongs to it, but the call button looks to be the on the other side of the user pic, which is not inside the LinearLayout, which is what I wanted, the problem is this:
activity_main.xml
Each of the TextViews are above and below both the user picture and the call button, but because they both also belong to the LinearLayout, it's obvious it's because of the latter.
Now I tried fixing the problem by simply adding the user picture to the LinearLayout, which seems like the obvious answer, but I needed to be sure, because my call button isn't correctly aligned to the right:
<ImageView
android:id="#+id/iv_image"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginStart="16dp"
android:contentDescription="#string/todo"
android:src="#drawable/ic_baseline_person_24"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="ImageContrastCheck" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#id/iv_image"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<TextView
android:id="#+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:textColor="#color/purple_700"
android:textSize="18sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/call_button"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginStart="248dp"
android:background="#1072E1"
android:contentDescription="#string/call"
android:minWidth="48dp"
android:src="#android:drawable/stat_sys_phone_call" />
<TextView
android:id="#+id/tv_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textSize="14sp" />
</LinearLayout>
My ImageButton's "right alignment" was only done with the manual positioning of the android:layout_marginStart which I set to 248dp by attempts. Surely there's a better way to do this, but I've yet to find a solution that works.
Lastly, there's also the aforementioned problem: I can't seem to fix the LinearLayout issue without having to backtrack the progress I've done and use new code lines or already existing ones to resolve the issue.
So:
How can I "connect" two components, one inside a LinearLayout and another not, with or without the use of constraints and/or RelativeLayouts, and do I really have to insert the outside component to the LinearLayout;
How can I forcefully align a component to the right without having to manually push it with margin inputs (attempts);
Is there a way to know exactly how to connect a component to another by using constraints accurately, so it repeats that process through the entire contact list?.
I would really like if someone could answer at least one of the listed questions or, even better, resolve one of the most developed questions, where I show some images of reference.
Maybe even a suited tutorial for my case in specific that explains the ways of designing the layout of an app.
If more information is needed, I will gladly help, and I'll also try to answer to every response I can get.
Also, in case you're curious, here's my last question about the same app (already resolved):
"[AppName] stopped working" when I try to run my app on an AVD emulator
(Keep in mind that the problem at hand in this question has barely anything to do with this one.)
I want to show an action menu when I Press the ExtendedFloatingActionButton as in the image. My menu has 4 items, but I can't figure out how to easily make the FAb expand to display the actions.
I know ExtendedFloatingActionButton is a child class of MaterialButton, rather than FloatingActionButton, therefore working with it slightly differs from using the normal FAB
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:backgroundTint="#color/colorAccent"
android:contentDescription="Menu"
android:text="Menu"
app:iconTint="#color/card_background"
android:textColor="#color/background_card"
android:textStyle="bold"
app:icon="#drawable/ic_menu_black_24dp" />
I want to have a result like this:
I have found an easy implementation for a FloatingActionButton, but not for an ExtendedFloatingActionButton.
FAB transformation | animaiton-samples by android at GitHub
I am trying to do some simple app to practice, and the user interface gets broken for some reason I don't know why when I run test on my phone. I did an app on android only once before and I didn't have this problem, I was using a different phone though. I'm testing this on Samsung Galaxy A5.
That's how it looks in project: http://imgur.com/Pnbg5ns
And that's how it looks on my phone: http://imgur.com/a/uki84
Anyone knows how to resolve this?
All your views have locations set with the tools:... attribute. The locations set this way (using tools:) position the views within the Android Studio editor, and Android Studio editor only. It doesn't do anything at all to position the views for when the app is actually run, that's why all your views are on top of each other, they simply don't have any attributes to indicate their positioning on the screen when the app is run.
You should check tutorials for how to use ConstraintLayout (if you want to use that layout) which is a recent (2016) addition to Android and position your views with the constraints you need. Or you could use some of the older layouts like LinearLayout which should be perfectly fine for your layout needs.
And absolute positioning of the views like you have with the use of the tools:... attribute is also a big no most of the time. Views need to be positioned in some relative way within a layout, which doesn't mean it has to be within a RelativeLayout :), just saying that the views should be positioned in reference to the layout containing them, not just at some absolute point f.e. (150, 110).
This is a very simple layout. You can use LinearLayout instead of ConstraintLayout.
Here is an example using LinearLayout:
<?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="match_parent"
android:orientation="vertical"
android:layout_margin="16dp">
<EditText
android:id="#+id/etLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Login"
android:inputType="textPersonName" />
<EditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Hasło"
android:inputType="textPassword" />
<Button
android:id="#+id/bLogin"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Loguj"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="#+id/tvRegister"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Nie masz jeszcze konta? Kliknij tutaj."
android:layout_gravity="center_horizontal"/>
</LinearLayout>
OUTPUT:
Hope this will help~
I have implemented floating action with list item and setting elevation from layout and run time on bind data as well. Then following issues occur:
fab elevation showing on first item only that is from xml resource I think.
setElevation() not working run time.
fab show()/hide() also not working with scale animation.
xml code is here:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_btn_video"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/parentLayout"
android:layout_marginEnd="#dimen/fab_margin"
android:layout_marginRight="#dimen/fab_margin"
android:src="#drawable/ic_av_videocam"
app:elevation="#dimen/fab_shadow"
tools:targetApi="lollipop" />
This worked for me to change elevation:
fab.setCompatElevation(8f); //API>=21
You can try to use com.google.android.material.floatingactionbutton.FloatingActionButton instead of android.support.design.widget.FloatingActionButton. This will allow you to use show() and hide() methods.
I have two floating action buttons in one layout file, but only the last one gets the ripple effect applied. If I place them opposite, then it's also the last one getting the ripple. So no matter how they are placed in the layout file, the last one gets a ripple effect on touch and the other does not.
How can this be? Are there any solution to getting the ripple effect on both FABs?
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_report"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_fab_run"
android:elevation="8dp"
app:backgroundTint="#color/primary"
app:rippleColor="#color/blue" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_run"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_fab_run"
android:elevation="8dp"
app:backgroundTint="#color/primary"
app:rippleColor="#color/blue" />
TL;DR: Only the last one FAB in the layout gets the ripple effect, how to solve this?
I don't know the reason, but adding this attribute solved the problem:
app:theme="#style/Base.Widget.AppCompat.ImageButton"
I had a similar issue - turns out I was implementing a TouchListener for one FAB, and consuming the touch event by returning true from the listener callback. Once I changed this to return false, the FAB ripple effect started working again.