Develop Reference

Drawing A Title Bar At The Top Of A CardView

I am trying to draw a title bar on the top of a card view.
This is what I am getting (Also why is the text "Test Title Goes Here" not being drawn?
but I am looking for this
This is the xml I am using to get this
<?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"
tools:context=".MainActivity">
<android.support.v7.widget.CardView
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="1.9"
app:cardCornerRadius="40dp"
app:contentPadding="13dp"
tools:layout_editor_absoluteY="35dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/header_when"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#D3D3D3"
android:textColor="#000000"
android:textStyle="bold"
android:padding="8dp"
tools:text="Test Title Goes Here" />
<com.google.android.flexbox.FlexboxLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignContent="stretch"
app:alignItems="stretch"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_start">
</com.google.android.flexbox.FlexboxLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
Any help is greatly appreciated

Passing a xml for your textview should help you. Add the xml as background for the textview in your main xml layout. In the custom textview xml do something like this:-
<?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" />
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
<corners android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
</shape>
I hope this helps.

How to set gradient color from complete transparency to dark in android?

I have an imageview and a cardview elevated on top of it. The cardview contains multiple views inside it.
I want to set a background color to cardview such that its startcolor should make the initial part of the imageview behind it to be visible at a transparency rate of 30% and the cardview should become darker and darker and black at the end.
This is what I have tried so far:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#80000000"
android:endColor="#FF000000"
android:angle="270"
android:dither="true"
/>
</shape>
This doesn't make my imageview visible.I have explored many SOF posts but wasn't able to reproduce what I want!
Any inputs are welcome and would be very helpful!!

Use this XML code
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#21293B"
android:centerColor="#21293B00"
android:endColor="#00000000"
android:angle="90"/>
</shape>
put it as a background to a View, put that View above your ImageView
<RelativeLayout
android:id="#+id/player_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/shasha_poster"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:minHeight="500dp"
android:scaleType="centerCrop"
android:src="#drawable/placeholder"
android:visibility="visible" />
<View
android:id="#+id/gradient"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_with_shadow2" />
</RelativeLayout>

You can do something like this
// this is your back image
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/xxxxx"
...
/>
// your cardview over the image
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
app:cardBackgroundColor="#00000000" // make cardview transparent
...
>
// an image to make the new drawable background
<ImageView
android:background="#drawable/gradient" // the xml with your gradient
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
/>
</android.support.v7.widget.CardView>

I think this is what you looking for, I test this and work as you expected.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/your_image" />
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
card_view:cardBackgroundColor="#color/transparent"
card_view:cardCornerRadius="5dp"
card_view:cardElevation="0dp"
card_view:cardMaxElevation="0dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true"
card_view:contentPaddingTop="2dp">
<RelativeLayout
android:id="#+id/list_container_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/your_gradient"
android:gravity="center"
android:orientation="vertical">
<!--Add your cardview contents-->
</RelativeLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
This is the gradient background file your_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#80000000"
android:endColor="#FF000000"
android:angle="270"
android:dither="true"
/>
</shape>

RadioButton circle spacing

I have a radio button with a selector background and an animation.
All of them work correctly. But there is a problem with the alignment of the circle in the radio button. When I try to set the margin to it, It changes with the background drawable. Is there any way to move the radio button's circle only?
Also please help me in the case of checkboxes.
rbtn_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape>
<solid android:color="#8effffff" />
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="#51ffffff" />
</shape>
</item>
activity_radio.xml
<?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:orientation="vertical"
android:gravity="center"
android:layout_height="match_parent"
android:background="#drawable/back1"
tools:context="com.wiinnova.custom_views.RadioActivity">
<RadioGroup
android:id="#+id/radioGroup1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rbtn_selector"
android:layoutDirection="rtl"
android:paddingLeft="10dp"
android:text="apple"/>
</RadioGroup>

Try by setting background android:background="#drawable/rbtn_selector" to RadioGroup instead of android.support.v7.widget.AppCompatRadioButton
<?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:orientation="vertical"
android:gravity="center"
android:layout_height="match_parent"
android:background="#drawable/back1"
tools:context="com.wiinnova.custom_views.RadioActivity">
<RadioGroup
android:id="#+id/radioGroup1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#drawable/rbtn_selector"
android:orientation="vertical" >
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layoutDirection="rtl"
android:paddingLeft="10dp"
android:layout_margin="10dp"
android:text="apple"/>
</RadioGroup>
</LinearLayout>

I just used a custom image for the radio button drawable with some transparent padding. And replaced that selected drawable at the same position as for click effects. And created a selector to change the drawable while checking the radio button.
Thanks Mohit

Is it possible to have shine or glint movement animation on button with coding? (not gif or similar way)

I want to have a button with a shine or glint movement animation on it.
not so much complicated just a moving shine line on a button.
is it possible with Animation in java in the android studio or not?

There are lots of ways doing it but I will give the method that I use more often...
Create shapes with a gradient of horizontal and vertical line...
vert_line.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:angle="0"
android:endColor="#555994"
android:centerColor="#ffffff"
android:startColor="#555994"
android:type="linear" />
<corners
android:radius="0dp"/>
</shape>
hor_line.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#555994"
android:centerColor="#ffffff"
android:startColor="#555994"
android:type="linear" />
<corners
android:radius="0dp"/>
</shape>
Then create a selector in order to make button's background change when it is pressed and it will give you shine effect...
shine_line.xml
<?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/line_vert" /> <!-- pressed -->
<item android:drawable="#drawable/line_hor" /> <!-- default -->
</selector>
Last set it to your button background.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shine_line"/>
It will work like a charm.

Create XML
<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">
<RelativeLayout
android:layout_width="200dp"
android:layout_height="80dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginStart="30dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/bg_circular"
android:gravity="center"
android:weightSum="6">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_weight="1"
android:src="#drawable/ic_baseline_add_24" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Create"
android:textColor="#color/white"
android:textSize="20sp" />
</LinearLayout>
<!--This is the view which we will be animating
in order to show shine effect-->
<View
android:id="#+id/shine"
android:layout_width="30dp"
android:layout_height="85dp"
android:background="#drawable/bg_shine"
android:rotation="20" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Create Drawable file shine.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="40dp"/>
<solid
android:color="#308D46"/>
</shape>
Create bg_shine.xml inside the drawable folder we will use this as the background of our animating view
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:centerColor="#AAffffff"
android:endColor="#00ffffff"
android:startColor="#00ffffff"/>
</shape>
Create left_right.xml inside the anim folder of res.
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0"
android:toXDelta="100%p"
android:duration="1500"
/>
</set>
Go to the MainActivity.kt
class MainActivity : AppCompatActivity() {
// Initialize the view
lateinit var shine: View
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// attach it with the id of view
// that we will animate
shine = findViewById(R.id.shine)
shineAnimation()
}
private fun shineAnimation() {
// attach the animation layout Using AnimationUtils.loadAnimation
val anim = AnimationUtils.loadAnimation(this, R.anim.left_right)
shine.startAnimation(anim)
// override three function There will error
// line below the object
// click on it and override three functions
anim.setAnimationListener(object : Animation.AnimationListener {
// This function starts the
// animation again after it ends
override fun onAnimationEnd(p0: Animation?) {
shine.startAnimation(anim)
}
override fun onAnimationStart(p0: Animation?) {}
override fun onAnimationRepeat(p0: Animation?) {}
})
}
}

Android Toolbar : shadow on top instead of bottom

I use the standard Android Toolbar android.support.v7.widget.Toolbar
https://developer.android.com/reference/android/support/v7/widget/Toolbar.html
I want to place this toolbar at the bottom of my screen => I want the shadow at the top and not at the bottom of the toolbar.
How can I do this?
Thanks !

You can define the following gradient in your drawables folder
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#000"
android:angle="90"
/>
</shape>
And then use it in your layout as follows
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom">
</android.support.v7.widget.Toolbar>
<View android:background="#drawable/drop_shadow_tab"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_gravity="bottom"
android:layout_marginBottom="50dp"/>
</FrameLayout>
Probably this is what you wanted. :)