<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">
<TextView
... />
<androidx.cardview.widget.CardView
app:cardCornerRadius="20dp"
android:layout_width="100sp"
android:layout_height="200sp"
app:layout_constraintBottom_toTopOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" >
<ImageView
android:layout_marginTop="0dp"
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_launcher_background" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
But when I create new project a corners is not override. I do not why I have this and how i can repair this
For assigning cornerRadius to CardView just Use
app:cardCornerRadius="10dp"
in your CardView to assign corner's to your cardView .
And for Rounded ImageView use RoundedImageView library .
First Step :
Add the below dependency to your app level gradle file
implementation 'com.makeramen:roundedimageview:2.3.0'
Second Step :
And in your project level gradle file make sure you have inside your repositories block:
repositories {
mavenCentral()
}
Third Step :
Now just replace your ImageView with the RoundedImageView :
For eg like this :
com.makeramen.roundedimageview.RoundedImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/imageView1"
android:src="#drawable/photo1"
android:scaleType="fitCenter"
app:riv_corner_radius="30dip"
app:riv_border_width="2dip"
app:riv_border_color="#333333"
app:riv_mutate_background="true"
app:riv_tile_mode="repeat"
app:riv_oval="true" />
Here you can change the corner_radius as you like and also if you want to keep it oval as shape then mark it app:riv_oval as true else mark it as false .
Related
I wanted to create a new Android launch screen for my Flutter app using constraint layout.
Firstly, I wasn't able to directly open layout builder in Android Studio in my Flutter app project. So using Android Studio, I created a new Android app with an empty activity and used the layout builder to create my layout by setting constraints. I then copied the generated XML into launch_background.xml of my Flutter project - where my previous splashscreen (not using constraint layout) had been working. I added this vectorDrawables.useSupportLibrary = true in the android.defaultConfig in and compile 'com.android.support:appcompat-v7:24.1.1' in dependencies, both in build.gradle.
I'm now unable to run my app because of errors for each constraint:
attribute layout_constraintTop_toTopOf (aka pha.myapp.dep.us:layout_constraintTop_toTopOf) not found.
...and repeat for each constraint.
How have I already tried to fix it?
I tried with this: implementation 'androidx.constraintlayout:constraintlayout:2.0.4' in the
dependencies in build.gradle but my app was stuck building for over
an hour.
I've run flutter clean
I've deleted my entire gradle file.
Am I missing something?
Finally, as reference, this is my XML file. The three drawables exist and have worked before when I haven't used constraint 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"
>
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/ic_bg_splash" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="157dp"
android:layout_marginLeft="157dp"
android:layout_marginEnd="157dp"
android:layout_marginRight="157dp"
android:layout_marginBottom="32dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/ic_logo" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginLeft="56dp"
android:layout_marginEnd="56dp"
android:layout_marginRight="56dp"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:srcCompat="#drawable/ic_brandlogotag" />
</androidx.constraintlayout.widget.ConstraintLayout>
I created a fragment_b.xml file in my resources/layout folder. On my two buttons I get the following warning:
Element Button is not allowed here
Why is this warning popping up? My code is working fine.
fragment_b.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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<Button
android:id="#+id/btn_fragment_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/go_to_fragment_c"
app:layout_constraintBottom_toTopOf="#id/btn_nagivate_to_fragment_f"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<Button
android:id="#+id/btn_nagivate_to_fragment_f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/go_to_fragment_f"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/btn_fragment_b"
android:layout_marginTop="#dimen/a_lot_of_margin"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This will happen if you don't have the androidx ConstraintLayout library added as a dependency in your gradle files.
In your app/build.gradle file, in the dependencies block, add this:
dependencies {
// ...
implementation "androidx.constraintlayout:constraintlayout:2.0.0-beta3"
}
Of course you can use a different library version, but the androidx.constraintlayout:constraintlayout: part is important.
Once that's done, do a gradle sync and rebuild your project and the warning should go away.
Try change it to:
androidx.appcompat.widget.AppCompatButton
or
com.google.android.material.button.MaterialButton
I am reading the documentation for Fresco, and it says I can create a progress bar for a SimpleDraweeView with the following attribute:
fresco:progressBarImage="#drawable/progress_bar"
or with this code (I modified the example to work in Kotlin and work with a draweeView inside of a recyclerview)
val hierarchy : GenericDraweeHierarchy = GenericDraweeHierarchyBuilder.newInstance(context.resources)
.setProgressBarImage(ProgressBarDrawable())
.build()
holder.draweeView.setHierarchy(hierarchy)
However, in my XML I am getting the "cannot resolve symbol" error in reference to the drawable.
Additionally, the .setHierarchy(hierarchy) is not recognized.
What's going on?
My build.gradle has the following dependencies (among others):
implementation 'com.facebook.fresco:fresco:1.9.0'
implementation 'com.facebook.fresco:animated-gif:1.9.0'
Also, here is the XML layout for the item column for my recyclerview:
<?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:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/itemImage"
android:layout_width="300dp"
android:layout_height="0dp"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.7"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
fresco:progressBarImage="#drawable/progress_bar"
/>
<ToggleButton
android:id="#+id/itemFavoriteButton"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/ic_favorite"
android:textOff=""
android:textOn=""
android:text=""
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.3"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/itemImage" />
</android.support.constraint.ConstraintLayout>
I am currently trying ConstraintLayout in our project.
The layout I would like to implement can be simplified as following:
There are two views (say TopA and TopB) on the top of the layout, and there is another view (say BottomC) positioned below them.
TopB have changeable height, in different situations TopB's height may be larger or smaller than TopA's.
My questions is: how to constrain BottomC to the bottom of the Top view who has a larger height, so that BottomC won't be overlapped by the view with a larger height. (Screenshot attached below)
I can do that by adding TopA and TopB to an extra ViewGroup (LinearLayout for example) and constrain BottomC to the bottom of that ViewGroup. But is it possible to achieve that without introducing an extra layer of ViewGroup?
3 minutes after posting the question, I just found that recently released version 1.1.x of ConstrainLayout has a new feature called Barrier, and the official training doc of ConstrainLayout has been updated to introduce it.
This is exactly what I was looking for. Hope this can help guys like me.
The actual layout code looks like this (notice the android.support.constraint.Barrier node):
<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" >
<ImageView
android:id="#+id/topA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher"/>
<TextView
android:id="#+id/topB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="24dp"
android:text="Text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.75"
app:layout_constraintStart_toEndOf="#+id/topA"
app:layout_constraintTop_toTopOf="#+id/topA"
/>
<android.support.constraint.Barrier
android:id="#+id/barrier4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="topA,topB"
tools:layout_editor_absoluteY="16dp"/>
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.50"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/barrier4"/>
</android.support.constraint.ConstraintLayout>
Actually this one is the common problem with the ConstraintLayout so basically there are two options, one is that if your imageview is of fixed height then set TextView minheight as imageview's height else ConstraintLayout is now introduced Barrier but this is in the Beta version if you want to use it with beta version set up as follow
This is new feature introduced in ConstraintLayout which is currently in Beta version.
How to add beta ConstraintLayout to project follow steps below
add maven support in project gradle file as below
allprojects {
repositories {
maven { url 'https://maven.google.com' }
jcenter()
}
}
then in app gardle dependencies add ConstarintLayout library dependency
compile 'com.android.support.constraint:constraint-layout:1.1.0-beta3'
add barrier in layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Barrier
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/barrier1"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView2, imageView2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintTop_toBottomOf="#id/barrier1"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
Now Beta3 is released with some fixes and new features
https://androidstudio.googleblog.com/2017/10/constraintlayout-110-beta-3-is-now.html
Option 1:
I recommend to do the following by adding the two views(Image, TextView) to a viewgroup(Any can do) then constraint the progressbar to the bottom of the viewgroup.(Edit:Just read the part were you said no view group so option 2)
Option 2:
But if u have to do it programmatically for animation or other reasons i recommend reading about:
https://developer.android.com/reference/android/support/constraint/ConstraintSet.html
and
https://developer.android.com/reference/android/transition/TransitionManager.html
Layout with shadow
I would like to create same shadow and layout as shown in above figure i tried http://inloop.github.io/shadow4android/ but i am not able to clear those 9 patch lines on top and left side of image
Using Material design, this can be done elegantly using elevation:
<TextView
android:id="#+id/myview"
...
android:elevation="2dp"
android:background="#drawable/myrect" />
https://developer.android.com/training/material/shadows-clipping.html
I will suggest you to use Cardview for this.
like below you can show shadow.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:padding="#dimen/_5sdp"
app:cardElevation="#dimen/_3sdp"
android:layout_marginTop="#dimen/_10sdp"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="#dimen/_3sdp"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:text="Profile"
android:drawableLeft="#drawable/profile"
android:drawablePadding="#dimen/_5sdp"
android:id="#+id/frag_setting_profile_tv"
android:padding="#dimen/_10sdp"
style="#style/textview_primary"
android:layout_height="match_parent" />
</android.support.v7.widget.CardView>
app:cardElevation property show below shadow view .