I have a CardView as parent and inside the CardView I have a ConstraintLayout and defined a border for the ConstraintLayout. But the problem is that the border disappears when it reaches the imageView I put inside ConstraintLayout and it can't be seen anymore
https://imgur.com/dELnfoB
Now to fix this problem, I set the top and bottom and right margins as 1dp for imageView because my border is 1dp wide, but still the problem is that the corner angle has a problem and gets narrow and is not displayed clearly
By the way, I don't want to use cardElevation
item code :
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv_item_parent"
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:clickable="true"
android:focusable="true"
android:layoutDirection="ltr"
app:cardCornerRadius="4dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/pc_corners_parent_gray_stroke">
<ImageView
android:id="#+id/iv_item_avatar"
android:layout_width="130dp"
android:layout_height="0dp"
android:layout_marginTop="1dp"
android:layout_marginEnd="1dp"
android:layout_marginBottom="1dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/wqe" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/iv_item_avatar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/tv_item_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:ellipsize="end"
android:maxLines="1"
android:text="4.0 ★"
android:textColor="#color/colorTextPrimary"
android:textDirection="ltr"
android:textSize="#dimen/text_tiny_other"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
corners code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/colorWhite"/>
<corners android:radius="4dp"/>
<stroke android:width="1dp" android:color="#color/colorCardViewsBackgroundSet" android:dashWidth="1dp"/>
</shape>
You can put the ImageView inside a CardView and it should keep the corners round.
I am not sure if it's the best way to go about it but it works.
Related
My recyclerview is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/recyclerview_highlight"
android:layout_margin="6dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="6dp">
<TextView
android:id="#+id/articleCategTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="#null"
app:layout_constraintBottom_toTopOf="#id/articleNameTextView"
app:layout_constraintRight_toLeftOf="#id/articleQteTextView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleQteTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toRightOf="#id/articleCategTextView"
app:layout_constraintBottom_toTopOf="#id/articleNameTextView"
android:text="#null" />
<TextView
android:id="#+id/articleNameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="parent"
android:text="#null" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
#drawable/recyclerview_highlight:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#color/selected_color"/>
</selector>
In "onBindViewHolder", I highlight it, when selected with:
holder.itemView.setSelected(article.isSelected());
All is ok BUT, for a little more visual elegance, I wanted to transform the LinearLayout into Cardview.
And when I try it, setSelected has not effect anymore. I even try to "setActivated" with state_activated but not better.
What should I modify to obtain the same type of operation? Is it at the level of the layout, the selector or the java code, and what to use instead of "selected"?
I finaly had to add a LinearLayout, inside the cardView; which is the one I setSelected() and the result is what I needed.
Im trying to change shape of root constraintlayout in my fragment.
like below image, to place my close button on right top corner. Is it possible in android?
constraintlayout shape image
Yes it is possible, just have a white background of the parent constraintlayout. Here's the working code which produces exact same output as of your image:
<?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"
android:background="#color/white"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp">
<RelativeLayout
android:id="#+id/cross"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff0000"
android:padding="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_baseline_clear_24" />
</RelativeLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/dostuff"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff0000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/cross">
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Adding Image in landscape mode of the above layout:
I have a button that is complex but can be done easily with Constrain Layout. However I would like button state change feature to change the background color when pressed. I tried with state press or selected, but it doesn't work. What's the best way to solve this?
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/button_pressed"/>
<item android:state_pressed="false" android:drawable="#drawable/button_grayout" />
</selector>
ConstraintLayout as a Button
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:background="#drawable/button_press"
android:id="#+id/background_create"
android:padding="8dp">
<TextView
android:id="#+id/txt_display"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Big Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mini Text"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#D5D5D5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/txt_display_alert1" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can try to add onClick event to the ConstraintLayout like following:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:background="#drawable/button_press"
android:id="#+id/background_create"
android:padding="8dp"
android:onClick="onClick"
>
....
add onClick() in the activity or fragment
As you apply the drawable to the ConstraintLayout, not to a Button; then you have to make it clickable and focusable in order to have the press effect of the Button:
So, you need to add:
android:clickable="true"
android:focusable="true"
Like:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:background="#drawable/button_press"
android:id="#+id/background_create"
android:clickable="true"
android:focusable="true"
android:padding="8dp">
I have some imageview in to this rounded LinearLayout. here is my simple code:
<LinearLayout
android:layout_width="128dp"
android:layout_height="128dp"
android:id="#+id/point_image_table1"
android:orientation="vertical"
android:drawable="#drawable/image_view_style"
android:layout_below="#+id/repoint_p_name"
android:weightSum="4">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="centerCrop"
android:id="#+id/imageView61"
android:layout_marginBottom="1dp"
android:src="#color/realRed"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/imageView71"
android:layout_marginRight="1dp"
android:layout_marginEnd="1dp"
android:scaleType="centerCrop"
android:src="#drawable/pinpoint_logo_large"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/imageView51"
android:scaleType="centerCrop"
android:src="#drawable/pinpoint_logo_large"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="1dp"
android:layout_marginStart="1dp"
android:scaleType="centerCrop"
android:id="#+id/imageView81"
android:src="#drawable/pinpoint_logo_large"/>
</LinearLayout>
but Images corner covered the LinearLayout corner and finally border if LinearLayout has'nt seen.
how can I fix it? i need to set some imageview in to linear layout and also i need to set border and rounded corner to linearlayout.
Thanks.
Edit: I want to have something like this( four images in to the rounded corner layout):
I suggest you to use cardview with multiple images it will be easy to get collage view,try this way
<android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
card_view:cardCornerRadius="10dp">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="300dp"
android:layout_height="300dp">
<LinearLayout
android:id="#+id/left_container"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_width="150dp"
android:layout_height="300dp"
android:orientation="vertical">
<ImageView
android:id="#+id/dog"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/mmm" />
<ImageView
android:id="#+id/bottom_left_image"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:background="#drawable/mmm" />
</LinearLayout>
<LinearLayout
android:id="#+id/right_container"
android:layout_width="150dp"
android:layout_height="300dp"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/left_container"
android:orientation="vertical">
<ImageView
android:id="#+id/top_right_image"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/mmm" />
<ImageView
android:id="#+id/bottom_right_image"
android:layout_width="50dp"
android:layout_height="0dp"
android:layout_weight="0"
android:background="#drawable/mmm" />
</LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
OUPUT
First you want to create a simple drawable and use this code. You can change the width or the stroke and colour to your choosing. The radius can also be simplified to android:radius=dpValue.
?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffffff"/>
<stroke android:width="3dp"
android:color="#ff000000"/>
<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp" android:topRightRadius="7dp"/>
</shape>
Once you've created this you can then assign it as the background of your imageView with:
android:background="#drawable/yourDrawableName"
I'd maybe try making your image views wrap_content. You should also try setting a 0dp on the height of your imageviews.
Hope this helps.
In my view, I would like a ripple effect to appear whenever a user touches an ImageView in the layout. I've tried wrapping the ImageView inside a RelativeLayout, but it hasn't worked. Here is the layout:
<RelativeLayout
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"
tools:context="com.sample.me.TapActivity" >
<RelativeLayout
android:id="#+id/tap_view_frame"
android:layout_width="#dimen/activity_tap_image_width"
android:layout_height="#dimen/activity_tap_image_height"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:clickable="true"
android:background="#drawable/ripple_view" >
<ImageView
android:id="#+id/tap_view"
android:src="#drawable/ram"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:clickable="true" />
</RelativeLayout>
<TextView
android:id="#+id/tap_name_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white"
android:layout_marginLeft="#dimen/textview_horizontal_margin"
android:layout_alignParentLeft="true"
android:layout_above="#+id/tap_number_textView"/>
<TextView
android:id="#+id/tap_number_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white"
android:layout_marginBottom="#dimen/textview_vertical_margin"
android:layout_alignLeft="#+id/tap_name_textView"
android:layout_alignBottom="#+id/tap_view_frame" />
<android.support.v7.widget.CardView
android:id="#+id/tap_card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/cardview_horizontal_margin"
android:layout_marginRight="#dimen/cardview_horizontal_margin"
android:layout_marginTop="#dimen/cardview_vertical_margin"
android:layout_below="#+id/tap_view_frame">
<android.support.v7.widget.RecyclerView
android:id="#+id/tap_options_recyclerview"
android:layout_width="match_parent"
android:layout_height="#dimen/cardview_tap_height" />
</android.support.v7.widget.CardView>
And here is the "ripple_view" drawable:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ffa0a0a0">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#ffa0a0a0"/>
</shape>
</item>
</ripple>
I have also tried adding in the android:background="?android:attr/selectableItemBackground" tag, but that didn't seem to help. Can anyone explain why the ripple is not showing up? I used the same method to enable the effect in my custom buttons and RecyclerView rows, but it is not working for the RelativeLayout. Ideally, I would like to avoid using a third party library for something as simple as this.