I am using Google's API Camera2Video classes Camera2VideoFragment and AutoFitTextureView and I have a small problem. When I'm using the preview in a custom FrameLayout, it goes to the left corner.
I have found a way to sretch the preview for it to fill the whole framelayout but as expected, it looks way too stretched. Perfect solution would be if there could be some black edges on corners and the screen would be in the middle. Also I dont think making the inflator to inflate the layout from the middle would help because there could be cases where the screen is big enough for the preview to fit properly and that being positioned in the middle would just ruin it.
Link to Google's Camera2Video API: https://github.com/googlesamples/android-Camera2Video
I created a simple layout to show what I get. (This is the only thing I have changed after downloading Google's API, and also removing the buttons that came with):
The 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">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:context="com.example.android.camera2basic.CameraActivity" />
</android.support.constraint.ConstraintLayout>
And a picture of what I'm seeing.
You are using a sample that wraps the AutoFitTextureView in an extra wrapper of RelativeLayout. There it defines the position of the texture view as
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
which caused the layout that you observed.
Your task does not need this wrapper. You can embed the AutoFitTextureView directly inside the FrameLayout of CameraActivity. Your FrameLayout should define
android:gravity="center"
to command the children to be centered.
Note that you can probably remove the wrapping ConstrantLayout, if its only child is the id/container FrameLayout.
Related
I have a circular image and a button icon
Lets say image is size of 20x
And button is size of 8x
I want to put the button icon in a way that 80% of its portion stays on the image view and 20% goes beyond it.
My xml code-
RelativeLyaout<
andoird.cardview.widget.Cardview<
<ImageView/>
/>
<button_icon>
layout_alignRight:ImageView
</button_icon>
ImageViw and button_icon overlaps but not that way I want.
80% portion of the button stays behind the image view that i cant see and the rest 20% of the button that goes beyond the image view is visible
This is for my Android studio app. I things above code is less time consuming.
If you need full code i can provide that too.
you can't exceed parents bounds. but you can introduce one extra layer which will hold both your Views and second one may cover part of first one. some basic example with FrameLayout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#097267">
<View
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_margin="40dp"
android:background="#A9C26A">
</FrameLayout>
also be aware that elevation and translationZ XML attributes may change order of drawing (first View will be drawn on top of second and will cover it). e.g. Button have some elevation set by default, also CardView (setCardElevation(float)) - additionally (mainly?) this makes some small shadow under these Views
Try this code... I have added constraint layout and inside it i have added button overlapping the image.
You can change the size according to your requirements !!
<?xml version="1.0" encoding="utf-8"?>
<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">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/circleImageView4"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="60dp"
android:src="#drawable/blue1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.057"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatButton
android:layout_width="60dp"
android:layout_height="40dp"
android:layout_marginTop="50dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.166"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/circleImageView4" />
</androidx.constraintlayout.widget.ConstraintLayout>
Newbie question here, but I'm struggling to find the answer.
When laying out components, clearly if android can fit all the components on the screen while respecting all the requested attributes (height, margin etc), then it will do that.
But what if there is not enough room on the screen for everything? I had thought that it would simply put what it could on the screen starting at 0,0, and then have horizontal or vertical scrollbars for the rest.
However, that's not what I'm seeing, but I can't figure out what I am seeing. For example, when I try to view the following layout on my phone, the text has disappeared off the top of the screen (I can get this by turning the phone to landscape mode where there is obviously less available height).
What gives? How is android determining how to lay out these components and where to place the centre of the screen?
Many thanks!
EDIT: It looks like the problem has to do with me using so many dp values that mean that there's no way for everything to fit on the screen. I've fixed my immediate problem by using layout 'weight' to scale my components proportionally to the screen rather than trying to specify absolute sizes. I'm still curious why the layout code would choose to push my text off the top though - perhaps it priortises dp values?
The layout:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="40dp"
android:text="#string/TextView1Text2" />
<Button
android:id="#+id/button"
android:layout_width="200dp"
android:layout_height="150dp"
android:onClick="#string/Button1OnClick"
android:text="#string/Button1Text" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/bla"
app:srcCompat="#drawable/blank_1024_200" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am working on one of my first apps. One activity of the app includes swiping left and right to scroll through different fragments, I am using Scroll-View for this. I want each fragment to include multiple elements, but unfortunately Scroll-View only supports a maximum of one direct child element. To work around this, I placed all the views I want in the fragment inside a ConstraintLayout, making the ConstraintLayout the only direct child of the ScrollView. You can see this in my XML code below:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/gayLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ScrollView
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<A BUNCH OF CHILD VIEWS (ImageViews, TextViews, etc.)/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Unfortunately, this completely messes up the formatting. You can see this in the image below:
A blue line can be seen in the render underneath all the views. From what I can gather, this is the bottom edge of the inner Constraint-Layout, but the thing is, I have no idea how to move it, and I cannot move any of its child elements below the line. I can make it smaller, just not larger, and there's no way for me to get it to scale to different screen sizes. What would be a better way to group these child elements without having this problem? Thanks!
I have linked Google login to my 'JoinActivity'. Like this...
activity_join.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".JoinActivity">
<!-- this line-->
<com.google.android.gms.common.SignInButton
android:id="#+id/btn.google"
android:layout_width="200dp"
android:layout_height="wrap_content"/>
</androidx.constraintlayout.widget.ConstraintLayout>
But, I couldn't see any 'visual' button on my Design tab, there was only '200dp-linear button('cause its width values is 200dp. It doesn't have height value. idk why)' on the top-left.
I referenced other sites, videos. They all have visual button like this but not me.
Yes, we can not see the icon in design mode, but it display when
running the app.
Your XML has an error:
This view is not constrained. It only has designtime positions, so it
will jump to (0,0) at runtime unless you add the constraints
To make it work properly, we must add the constraint for horiziation and vertical.
<com.google.android.gms.common.SignInButton
android:id="#+id/btn.google"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
And this is constraint-layout introduction
Try running Gradle, this sometimes triggers the design to redraw (if you have just added the google library without having ran Gradle fully)
I stumbled upon something weird. I am using the same CardView component in more than one place in my app, all with the same elevation (3dp), and they all looks the same. However, for one scenario I need to embed the CardView inside a ScrollView. I didn't change anything in the CardView configuration, but the shadow now looks different.
This is my layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false"
android:padding="16dp"
android:scrollbars="none">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
app:cardCornerRadius="8dp"
app:cardElevation="3dp"
app:cardUseCompatPadding="true">
<!-- some other views-->
</androidx.cardview.widget.CardView>
</ScrollView>
In the picture below you can see on the right the CardView and on the left the two shadows: on the top the shadow generated by the CardView alone, on the bottom the one generated when the CardView is inside a ScrollView. As you can see the second one appears darker and thicker.
NOTE: The background color (#FAFAFA) is the same in both scenario.
For both cases, I would check the following properties as it could contribute to the difference you're seeing:
getTranslationZ()
getElevation()
getOutlineAmbientShadowColor() (this is only valid in API 28+)
getOutlineSpotShadowColor() (this is only valid in API 28+)
Plus, checking Layout inspector to see if there's any view that could affect to the rendering.
Also, this article from Sebastiano Poggi could be of help.