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">
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.
I tried to change the style, but apart from the round corners nothing worked.Here example of bottom sheet https://i.stack.imgur.com/6O92g.jpg.
Can anyone helps? Here what I tried and I got shadow line after I opened modal https://i.stack.imgur.com/uoHNA.jpg
I am trying to create custom modal bottom sheet with line on the top, how can I achieve that?
MainAct
class MainActivity : AppCompatActivity() {
lateinit var btnShowBottomSheet: Button
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
btnShowBottomSheet = findViewById(R.id.idBtnShowBottomSheet);
btnShowBottomSheet.setOnClickListener {
val dialog = BottomSheetDialog(this)
val view = layoutInflater.inflate(R.layout.bottom_sheet_dialog, null)
val btnClose = view.findViewById<Button>(R.id.idBtnDismiss)
btnClose.setOnClickListener {
dialog.dismiss()
}
dialog.setContentView(view)
dialog.show()
}
}
}
Bottom_sheet_xml
<?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="wrap_content"
android:background="#drawable/rounded_top_corners"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="20dp"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_rectangle"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
>
<!--image view for displaying course image-->
<ImageView
android:id="#+id/idIVCourse"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:src="#drawable/ic_launcher_background" />
<!--text view for displaying course name-->
<TextView
android:id="#+id/idTVCourseName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_toEndOf="#id/idIVCourse"
android:layout_toRightOf="#id/idIVCourse"
android:text="DSA Self Paced Course"
android:textColor="#color/black"
android:textSize="18sp"
android:textStyle="bold" />
<!--text view for displaying course tracks-->
<TextView
android:id="#+id/idTVCourseTracks"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/idTVCourseName"
android:layout_marginTop="10dp"
android:layout_toEndOf="#id/idIVCourse"
android:layout_toRightOf="#id/idIVCourse"
android:text="Course Tracks : 30"
android:textColor="#color/black"
android:textSize="15sp" />
<!--text view for displaying course duration-->
<TextView
android:id="#+id/idTVCourseDuration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/idTVCourseTracks"
android:layout_marginTop="10dp"
android:layout_toEndOf="#id/idIVCourse"
android:layout_toRightOf="#id/idIVCourse"
android:text="Course Duration : 4 Months"
android:textColor="#color/black"
android:textSize="15sp" />
<!--button for dismissing our dialog-->
<Button
android:id="#+id/idBtnDismiss"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/idIVCourse"
android:layout_margin="10dp"
android:text="Dismiss dialog"
android:textAllCaps="false" />
</RelativeLayout>
</RelativeLayout>
Based on the xml and code you have posted you have to make the below changes:
1.Change the xml android:background structure to be like below. The drawable which has rounded corners must be set to the 2nd child of RelativeLayout instead of parent and all other RelativeLayouts must have android:background="#android:color/transparent":
<?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="wrap_content"
android:background="#android:color/transparent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#android:color/transparent">
<ImageView
android:layout_width="80dp"
android:layout_height="10dp"
android:background="#color/white"
android:layout_centerInParent="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#drawable/rounded_top_corners">
<!--image view for displaying course image-->
<ImageView
android:id="#+id/idIVCourse"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:src="#drawable/ic_launcher_background" />
<!--text view for displaying course name-->
<TextView
android:id="#+id/idTVCourseName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_toEndOf="#id/idIVCourse"
android:layout_toRightOf="#id/idIVCourse"
android:text="DSA Self Paced Course"
android:textColor="#color/black"
android:textSize="18sp"
android:textStyle="bold" />
<!--text view for displaying course tracks-->
<TextView
android:id="#+id/idTVCourseTracks"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/idTVCourseName"
android:layout_marginTop="10dp"
android:layout_toEndOf="#id/idIVCourse"
android:layout_toRightOf="#id/idIVCourse"
android:text="Course Tracks : 30"
android:textColor="#color/black"
android:textSize="15sp" />
<!--text view for displaying course duration-->
<TextView
android:id="#+id/idTVCourseDuration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/idTVCourseTracks"
android:layout_marginTop="10dp"
android:layout_toEndOf="#id/idIVCourse"
android:layout_toRightOf="#id/idIVCourse"
android:text="Course Duration : 4 Months"
android:textColor="#color/black"
android:textSize="15sp" />
<!--button for dismissing our dialog-->
<Button
android:id="#+id/idBtnDismiss"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/idIVCourse"
android:layout_margin="10dp"
android:text="Dismiss dialog"
android:textAllCaps="false" />
</RelativeLayout>
</RelativeLayout>
where #drawable/rounded_top_corners will be:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/white" />
<corners android:topLeftRadius="30dp" android:topRightRadius="30dp"
android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
</shape>
2.You have to set a custom theme style for BottomSheetDialog with a Transparent window dialog like below:
val dialog = BottomSheetDialog(this, R.style.MyBottomSheetDialog)
where R.style.MyBottomSheetDialog is your custom BottomSheetDialog style defined in styles.xml like below:
<style name="MyBottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
<item name="android:colorBackground">#android:color/transparent</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:backgroundDimAmount">0.3</item>
<item name="android:windowFrame">#null</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
After the above changes you will have a Transparent Window BottomSheetDialog with a line on top like:
How to set layout drawable background using styles.xml? In the layout I'm using 2 drawable buttons.
When I using this in styles.xml all buttons change the background to what is in styles, but I want to change only the layout background.
<style name="menutheme">
<item name="android:background">#drawable/menu</item>
</style>
My layout:
<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"
android:theme="#style/menutheme"
android:contentDescription="#null"
tools:context="com.example.user.app.Activity2">
<RelativeLayout
android:layout_width="312dp"
android:layout_height="371dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.955">
<Button
android:id="#+id/entrycity"
android:layout_width="243dp"
android:layout_height="65dp"
android:layout_below="#+id/button3"
android:layout_centerHorizontal="true"
android:layout_marginTop="26dp"
android:background="#drawable/oval3"
android:fontFamily="#font/ultra"
android:text="#string/wybor2"
android:textColor="#android:color/background_light"
android:textSize="30sp"
tools:layout_editor_absoluteX="59dp"
tools:layout_editor_absoluteY="334dp" />
<Button
android:id="#+id/button3"
android:layout_width="243dp"
android:layout_height="65dp"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/entrycity"
android:background="#drawable/oval"
android:fontFamily="#font/ultra"
android:text="#string/wybor"
android:textColor="#android:color/background_light"
android:textSize="30sp"
tools:layout_editor_absoluteX="71dp"
tools:layout_editor_absoluteY="227dp" />
</RelativeLayout
</android.support.constraint.ConstraintLayout>
try WindowBackground instead of background. Like,
<style name="menutheme" parent="AppTheme">
<item name="android:windowBackground">#drawable/menu</item>
</style>
and you need to apply this theme to acivity in manifest. not in layout.
I'm trying to use an xml selector to change the image of imagebuttons when they are pressed but I've been faceing a few problems. First of all, the images appear with different dimensions on the screen, and secondly the button changes color only when clicked, but not when it is active.
This is the xml of the layout with the imagebuttons:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/coupon_filter_btns"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#a7a7a7"
android:weightSum="7"
>
<ImageButton
android:id="#+id/filter_greece"
android:layout_width="0dp"
android:layout_height="40dp"
android:scaleType="fitCenter"
android:src="#drawable/greece"
android:layout_weight="1"
android:background="#drawable/greece"
android:paddingTop="4dp"
android:paddingBottom="4dp"
/>
<ImageButton/>
<ImageButton/>
</LinearLayout>
Below is the selector called greece.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/greece_active" android:state_selected="true"></item>
<item android:drawable="#drawable/greece_active" android:state_focused="true"></item>
<item android:drawable="#drawable/greece_active" android:state_pressed="true"></item>
<item android:drawable="#drawable/filter_white_greece"></item>
</selector>
And this is the java code where the button is used:
ImageView filterGreece = (ImageView) kati.findViewById(R.id.filter_greece);
filterGreece.setBackgroundResource(R.drawable.greece);
filterGreece.setOnClickListener(new ViewListeners(this.getContext()).new OneFragmentFilters(OneFragment.this) ) ;
Ok first there Erro in your XML
you Just set drawable as background Not Src
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/coupon_filter_btns"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#a7a7a7"
android:weightSum="7"
>
<ImageButton
android:id="#+id/filter_greece"
android:layout_width="0dp"
android:layout_height="40dp"
android:scaleType="fitCenter"
android:layout_weight="1"
android:background="#drawable/greece"
android:paddingTop="4dp"
android:paddingBottom="4dp"
/>
</LinearLayout>
second selector will work fine without
filterGreece.setBackgroundResource(R.drawable.greece);
so remove this Line
I'm trying to put a small ImageView on top of a button, but somehow it stays under it. I don't understand why as this sort of layout work perfectly with other views.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now"
android:id="#+id/but_book_now"
/>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:id="#+id/img_bookmark"
android:src="#drawable/ic_action_bookmark_full"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
I've tried with different background for the button, but the image can be seen only when it is transparent. I also tried to replace the ImageView with a colored View, still doesn't work.
Any idea? Thx
EDIT:
There is a confusion in answers I get, I mean to make the ImageView on top of the Button in its Z-order, not y-axis.
EDIT 2 :
I don't want to use an image button, the image is just a "pin" on the button that will appear/disappear.
I don't want to use a drawable on the button, I need to place it where I want exactly.
Using FrameLayout instead of RelativeLayout doesn't change anything.
Using imgView.bringToFront() doesn't work.
EDIT 3 :
The problem doesn't appear on device before Lollipop. On KitKat, the layout works as intended.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="80dp" >
<Button
android:id="#+id/filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="7dp"
android:background="#0000FF"
android:gravity="center"
android:paddingBottom="25dp"
android:paddingTop="25dp"
android:text="Sort"
android:textColor="#FFFFFF" />
<ImageView
android:id="#+id/widget_title_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:adjustViewBounds="true"
android:paddingTop="-10dp"
android:scaleType="fitStart"
android:src="#drawable/ic_launcher" />
</FrameLayout>
Try it,though I haven't tested it.
Try
findViewById(R.id.img_bookmark).bringToFront();
You need to set the button below the imageview so:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now
android:id="#+id/but_book_now"
android:layout_below="#+id/img_bookmark"/>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:id="#+id/img_bookmark"
android:src="#drawable/ic_action_bookmark_full"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
EDIT
I noticed now that you wanted an image ON TOP of a button not ABOVE so don't care to my code above and use ImageButton:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now
android:id="#+id/but_book_now"
android:src="#drawable/ic_action_bookmark_full"/>
</RelativeLayout>
Sample code:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/img_bookmark"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/but_book_now"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/img_bookmark"
android:text="Test" />
</RelativeLayout>
Note :
Edit the text and src, for your needs
If you want image view with button :
<Button
android:id="#+id/but_book_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:background="#ff00ff"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
</RelativeLayout>
If you want image view without button :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/but_book_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff00ff"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
</LinearLayout>
You can define a RelativeLayout as a Button and add ClickEvents on it, add a child View with color or a child ImageView with a PNG, or whatever or both, to put images or color over it.
Example
<FrameLayout android:id="#+id/buttonTextFillColor"
android:layout_width="#dimen/mini_icon_width"
android:layout_height="#dimen/mini_icon_height"
android:background="#drawable/input_button_background"
android:clickable="true">
<View
android:id="#+id/colorTextFillColor"
android:layout_width="23dp"
android:layout_height="23dp"
android:background="#FFFFFF"
android:layout_gravity="center" />
<ImageView
android:layout_width="23dp"
android:layout_height="23dp"
android:src="#drawable/button_fill_text"
android:layout_gravity="center"/>
</FrameLayout>
You get a union of elements:
How will you see it?
please add the layout_below for Button attribute