How to move up and move down activity - android-studio

I'm new in android. I want to show activity by moving up and down. (We can see it in many music players). But I don't know how to do it. Please give me some solutions, examples or suggestions.

Как дела?
Suggestion: You may find all crazy animation, including 2D and 3D animation in the following link. I did not have enough time find the exact one but I am sure they exist in this following collection.
https://android-arsenal.com/tag/6?sort=created
Advice: You can easily achieve it with Animation APIs in Android SDK. Or you may find some relevant answers here
Make activity animate from top to bottom
Good luck.

Finally, I decided to use Android Bottom Sheet. Here is code example:
<?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"
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="340dp"
android:background="#android:color/darker_gray"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="80dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#color/colorAccent"
android:gravity="center"
android:text="#string/bottom_sheet_peek"
android:textColor="#android:color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/bottom_sheet_content"
android:textColor="#android:color/white" />
</LinearLayout>

Related

How to add XML Google Pay Button in Flutter

My Flutter app uses Google Pay as a payment method. Following these guidelines, they provide XML buttons (which I have never dealt with).
How can I add one of these button to a flutter widget using dart?
There are different implementations for laying out content for Android versus Flutter.
The layout/googlepay_button.xml layout effectively describes the way the button appears, and drawable/googlepay_button_content.xml contains VectorDrawable file for the Google Pay button. flutter_svg should help you render the contents of the image.
To get this to work with Flutter, you would need to reproduce the xml layout as a Flutter widget tree.
Sample layout black/res/layout/googlepay_button.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:clickable="true"
android:focusable="true"
android:layout_width="match_parent"
android:layout_height="48sp"
android:background="#drawable/googlepay_button_no_shadow_background"
android:paddingTop="2sp"
android:contentDescription="#string/googlepay_button_content_description">
<LinearLayout
android:duplicateParentState="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2"
android:gravity="center_vertical"
android:orientation="vertical">
<ImageView
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scaleType="fitCenter"
android:duplicateParentState="true"
android:src="#drawable/googlepay_button_content"/>
</LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:duplicateParentState="true"
android:src="#drawable/googlepay_button_overlay"/>
</RelativeLayout>
It looks like SVG. Try to open all these XML files like SVG, and add it to assets folder in your project.

How to add constrainlayout only to floating actio button?

I want to add constrainlayout only two the last two floating action button with nested framelayout. any help would be highly appreciated. My main idea is to able to move and position the floating action button from graphical user interface.
I have notice that android gravity help to put button at right and the center from right with
android:layout_gravity="right|center"
how can i add a button at right but between center and end at bottom.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000000"
tools:context=".MediaPresentationActivity"
android:id="#+id/FrameLayout">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<VideoView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/videoViewPresentation"
android:layout_gravity="center" />
<ImageView
android:id="#+id/imageViewPresentation"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="left|top"
android:background="#ffffff"
android:src="#drawable/serv24logobig" />
</FrameLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</LinearLayout>
//*how to add only below two floating action button as constrainlayout //
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="right|center"
android:src="#android:drawable/stat_sys_phone_call"
android:visibility="visible"
app:backgroundTint="#android:color/holo_red_dark"
app:elevation="12dp"
app:rippleColor="?android:attr/colorActivatedHighlight" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="right|center"
android:src="#android:drawable/stat_sys_phone_call"
android:visibility="visible"
app:backgroundTint="?android:attr/colorMultiSelectHighlight"
app:elevation="12dp"
app:rippleColor="?android:attr/colorActivatedHighlight" />
</FrameLayout>
FrameLayouts only allow ONE child (well they allow N children, but they overlap, because it doesn't support children positioning, rather it expects them to take all the available space), so if you want to use a ConstraintLayout to position two items inside a FrameLayout, then you need to ensure that the children of your FrameLayout, is a ViewGroup that allows positioning of its own children.
Let's see what you got.
Your Root is a FrameLayout, perhaps you should consider making it a ConstraintLayout to begin with...
You're asking your Root layout to wrap its contents. Unless this is a custom view, this is somewhat frowning, but not wrong; since I don't know how you're using this, it's hard to tell if this is the correct approach in this case.
I don't know how your UI should look, but from what I see, you have a series of nested LinearLayouts, Vertical, then Horizontal to have an ImageView and a VideoView... not sure how you expect these to be positioned.
Down Below you have an empty LinearLayout... (?)
and then you tossed the two FABs.
This is not going to work. I suggest you revisit your entire Layout (which, btw, is incorrect as pasted, because you're closing the FrameLayout twice...).
If you post an image of what your desired output is, perhaps we can help you better understand where your problem is. As it is, it's not possible to determine.
The answer to your question, as written at this time is:
"How can I add a constraint Layout onlo to the last two FABs?"
You can't (for the purposes I think you want), but if you really want to see why, and what would happen:
Simply add, inside your FrameLayout this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<!-- YOUR FABS GO HERE -->
</androidx.constraintlayout.widget.ConstraintLayout>
This will obviously NOT LOOK THE WAY YOU WANT, but that's why I asked you in the comment above, "show us what you want, we need a minimal reproducible example of what you need".
There was a reason why I asked that, not to annoy you, but to help you. You chose to ignore it, and that's as far as I can go to help you with the information I have.

In Android Studio the widgets are moving up on the screen during emulation

I am new to both Stack Overflow and Android Studio and learning to code now.
I did a basic user and password layout in Android Studio like this:
When I ran this on emulator, it displays the widgets like this:
I tried to change the width of the EditText fields, buttons, but nothing I have tried seems to be working.
How do I solve this?
What am I missing or am I doing something wrong ?
Layout code:
<?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:weightSum="1">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="233dp"
android:scaleType="fitStart"
android:visibility="visible"
app:srcCompat="#drawable/worldcurrency" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Enter ammount"
android:textSize="18sp" />
<EditText
android:id="#+id/dollar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberDecimal" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="convert"
android:text="Convert" />
<TextView
android:id="#+id/rupees"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Your layout's parent is a ConstraintLayout, but it's lacking every constraint. ConstraintLayout is characterised by the ability to set constraints to every view, forcing its behaviour across screens of different sizes and orientations.
If you really want to use a ConstraintLayout I suggest taking a look at the ConstraintLayout Documentation. Once you've properly set the constraints, you should have an xml like this (note the constraint* attributes in my Views.
So, your layout has no constraints, it's likely it will end at "random" positions. Moreover, you've set the views coordinates with tools, which is valid only for the layout preview, not for runtime. And moreover, the use of absolute coordinates is very not recommended, since it can cause problems across different screen sizes.
If ConstraintLayout is an optional choice for you, you can change the layout parent to a LinearLayout with vertical orientation, I think it's more suitable for the layout you're building (I'm assuming this by your screenshots).Hope I helped, let me know. Good luck and happy coding!

android layout: constant size of bottom view

I just started learning Android and got a problem implementing a special layout. I read a lot about layouts and tried everything that crossed my mind, but i couldnt solve it. Probably its very easy and I would be very grateful for your help!
I need a simple layout, having a bigger view at the top and a smaller one at the bottom. The lower view should have a constant size of 150dp, the upper view should be variable in height and fill the rest . It is no problem giving the upper one a constant size and the lower one the rest - but thats not the way i need it...
Thats a simplified screenshot how it should look like:
Screenshot
Thanks a lot!
Here you go:
<?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/rl_layout_one"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_light"
android:layout_above="#+id/rl_layout_two">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_centerInParent="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl_layout_two"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#android:color/darker_gray"
android:padding="15dp"
android:layout_alignParentBottom="true">
</RelativeLayout>
</RelativeLayout>
This matches your expectation. Howerev, i would like to point out that generally, layout height or width are not specified.It is bad practice. I would suggest another option, using LinearLayouts with weights, find the code below.
<?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:weightSum="1">
<RelativeLayout
android:id="#+id/rl_layout_one"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_light"
android:layout_weight="0.4">
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl_layout_two"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:padding="15dp"
android:layout_weight="0.6">
</RelativeLayout>
</LinearLayout>
Hope these help.
EDIT 1:
Check the 1st solution, it was missing the layout_above attribute, that is why it took the whole screen space and centered the image according to the whole screen space. Now, it will not, since layout one is above layout two, it will center your image according to layout one.

In Android, how do I position an image on top of another to look like a badge?

Please see below:
I tried using Absolute layout, but that's deprecated. I appreciate your help, thanks.
RelativeLayout is a great option.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="#drawable/iconImage" />
<ImageView
android:id="#+id/badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/icon"
android:layout_alignTop="#+id/icon"
android:src="#drawable/badge" />
If you actually want a badge with a dynamic number/text, then you can make the second ImageView a TextView (or a ViewGroup such as LinearLayout or RelativeLayout) and give it a background drawable and set the text to what you want.
Have a look at the ViewBadger project on github(but keep in mind that you shouldn't try to copy other platforms UI elements in android apps).

Resources