Android handle virtual Direction pad on screen to focus view - java

I'm developing an app can visible Direction pad on the screen, but I don't know how to handle or override action like UP, DOWN, LEFT, RIGHT to focus the next view (like some buttons in image below).

Set this tow attributes for your view items :
android:focusableInTouchMode="true"
android:background="#drawable/bg_view"
where bg_view.xml is :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#android:color/white" />
<solid android:color="#1F1F3E" />
</shape>
</item>
<item>
<shape>
<solid android:color="#1F1F3E" />
</shape>
</item>

I found a solution to what I need here Android simulate key press
. Use Instrumentation class to sendKeyEvent.

Related

How to create a custom circular seekbar with custom thumb?

Im trying to create a custom circular seekbar like this one:
I have the shape and the thumb xml done but the thumb isn't appearing when i put it in the layout xml.
Seekbar background xml (lap_counter.xml):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle"
android:thicknessRatio="16"
android:useLevel="false">
<corners android:radius="500dp" />
<stroke
android:width="45dp"
android:color="#color/blue_secondary" />
</shape>
</item>
</layer-list>
Custom thumb xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/white">
<item>
<shape android:shape="oval">
<solid android:color="#color/white"/>
<stroke android:color="#color/orange" android:width="3dp"/>
<size android:width="30dp" android:height="30dp"/>
</shape>
</item>
</layer-list>
But when apply the custom xml this are the results:
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/sb_lap_counter"
android:layout_width="700dp"
android:layout_height="300dp"
android:layout_centerInParent="true"
android:progress="50"
android:background="#drawable/lap_counter"
android:thumb="#drawable/lap_counter_thumb"
tools:progress="50" />
I tried putting it in as a custom style in themes.xml but it doesn't work either.
What am i doing wrong?
You are using a seekbar.This only works for horizontal seeks.That orange thing is the thumbnail which you need.

Inner Shadow effect like Figma in native Android

I wonder if there is a way to create a view container with an Inner Shadow like in Figma in native Android.
I have already spent the whole day trying layer-list with different items (linear, radial gradients, shapes, bitmaps) but nothing seems to be similar to what I need.
Please check the attachment, pay attention to container's inner shadow, this is what I really need:
Links or parts of code/xml will be appreciated.
Thanks in advance!
Try this:
Example XML for the layer-list:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners android:radius="10dp"/>
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="10dp">
<shape android:shape="rectangle">
<solid android:color="#00000000"/>
<corners android:radius="10dp"/>
<padding
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="0dp"/>
</shape>
</item>
</layer-list>
You can set the above XML as the background for the CardView:
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/layer_list_example">
<!-- Add your content here -->
</androidx.cardview.widget.CardView>
Note that you may need to adjust the offset and blur radius to achieve the desired appearance.

How to achieve Android Button Animation with text-blurred and shadow

I want to achieve this button animation in Android. The sample below is from iOS. I want the shadow to disappear when the user clicks the button and reappear once the user releases the button.
Any help will be highly appreciated.
You need to add color like the following. For example, the color name is button_text_color.xml. Here is the .xml file which needs to be put in the color folder. If the color folder does not exist, create one in your res directory.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#50FFFFFF" android:state_pressed="true" />
<item android:color="#FFFFFF" android:state_pressed="false" />
</selector>
Check that I have added 50% transparency to the white color in the pressed state. Now just add this attribute in the Button where it is declared.
Now you need a background drawable, to be put in your drawable folder. For example, let us take the name of the drawable is button_state_list_animator.xml. This should have the following content.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<layer-list>
<item>
<shape>
<solid android:color="#android:color/darker_gray" />
<corners android:radius="19dp" />
</shape>
</item>
<item android:bottom="5px">
<shape>
<padding android:bottom="5dp" />
<gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
<corners android:radius="19dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
<item android:state_pressed="true">
<layer-list>
<item>
<shape>
<solid android:color="#102746" />
<corners android:radius="19dp" />
</shape>
</item>
<item android:bottom="5px">
<shape>
<padding android:bottom="5dp" />
<gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
<corners android:radius="19dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Now your button construction is simple.
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="32dp"
android:background="#drawable/button_state_list_animator"
android:text="Save Changes"
android:textColor="#color/button_text_color" />
Here is the screenshot from my code.
You can have the push-down animation using the library as well, as mentioned in an answer here.
Hope that helps!
Use the animation effect (as the code below) on the custom button when clicking on the button.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1"
android:toXScale="0.8"
android:fromYScale="1"
android:toYScale="0.8"
android:duration="500"
android:pivotX="50%"
android:pivotY="50%" >
</scale>
<alpha
android:fromAlpha="1"
android:toAlpha="0.8"
android:duration="500">
</alpha>
</set>
set Animation on Button Click using.
btn_custom.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R
.anim.animation_btn);
btn_custom.startAnimation(animation);
}
});
try changing alpha values as your need and see the effect.
You can use this library : pushdown-anim-click
How to install:
compile( 'com.github.thekhaeng:pushdown-anim-click:1.1.1' ){
exclude group: 'com.android.support'
}
How to use:
Button button = findViewById( R.id.button );
PushDownAnim.setPushDownAnimTo( button, ... )
.setOnClickListener( new View.OnClickListener(){
#Override
public void onClick( View view ){
Toast.makeText( MainActivity.this, "PUSH DOWN !!", Toast.LENGTH_SHORT ).show();
}
});
For Shadow:
As I saw library files, There are only three java files. He just used class to animate button. You can give shadow in your button by this way. Even though I have created issue You can keep watch on this.
For more functionality, you can visit github link.
Thank you.
Add a layout with the background as the shadow below the button. In the button.setOnTouchListener hide the layout when button is pressed and make it visible when released.
However it will only work if the shadow is below.

radio button make radio button outer circle a different colour to the colour when the radio button is selected

I need help customizing a radio button in android. Basically what I want to do is have the radio button set to be white and when the user clicks or selects the radio button i want the inner circle to be blue and the outer ring to remain white.
I know I can use buttonTint but this sets both the outer circle and inner circle when the user selects the radio button to the same colour.
Is what I am looking to do even possible?
Thanks
Use buttonTint property of RadioButton:
<RadioButton
android:id="#+id/radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:buttonTint="OUTER_CIRCLE_COLOR_CODE"/>
You can use button attribute of radioButton and set the desired drawable like for checked only inner circle colored while unchecked with white circle like below
android:button="#drawable/rb_bg"
rb_bg.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/button_selected"/>
<item android:state_checked="false" android:drawable="#drawable/button_unselected"/>
</selector>
button_selected.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/divider_color" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="oval">
<solid android:color="#android:color/white" />
</shape>
</item>
<item
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp">
<shape android:shape="oval">
<size
android:width="16dp"
android:height="16dp" />
<solid android:color="#color/blue" />
</shape>
</item>
button_unselected.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/divider_color"/>
</shape>
</item>
<item
android:bottom="1dp">
<shape android:shape="oval">
<size android:height="24dp" android:width="24dp"/>
<solid android:color="#android:color/white"/>
</shape>
</item>

Adding a background image, to a background xml layout

I'm using an xml file in drawable to make my buttons in my app 'pretty'.
^ Like that.
It works fine, however I want to add a tick or cross to the buttons (to mark completed or not) - I'm not too sure if it's possible.
Here is my xml for the buttons:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#449def" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="3dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#449def"
android:endColor="#2f6699"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="4dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
</shape>
</item>
</selector>
I'm setting the Background element on the button to use the above like #drawable/bluebuttons
Any help will be really appreciated
If you are using button then you can use Button's property in XML file.
android:drawableRight="#drawable/ANY_DRAWABLE_IMAGE"
In my case it was like this:
<Button android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
...
android:drawableRight="#drawable/ic_tick" />
Or in your code, you can put like this:
// PUT ZERO FOR NO DRAWABLE
textView1.setCompoundDrawablesWithIntrinsicBounds(LEFT_DRAWABLE, TOP_DRAWABLE,RIGHT_DRAWABLE, BOTTOM_DRAWABLE);
Hope this will help you.
If you are interested in setting image on button dynamically from Activity then you can use this :
Drawable iconTick= getApplicationContext().getResources().getDrawable(R.drawable.icon_tick);
mBtnTaks1.setCompoundDrawablesWithIntrinsicBounds(iconTick, null, null, null); // left,top,right,bottom
Thanks.

Categories

Resources