We Keep Coding

How do I add animation / styling to a button? Android Studio

I have a button
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="45dp"
android:onClick="loginIsClicked"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="8dp"
android:background="#drawable/button"
android:text="#string/Auth"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="16sp"
android:enabled="false" />
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/red"/>
<corners android:radius="10dp"/>
</shape>
How can I add animation to the button used in the default buttons?
Example:
enter image description here

If I understood correctly, what you are looking for is a ripple. Wrap your shape in a ripple as follows and provide your ripple color:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/rippleColor">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/red"/>
<corners android:radius="10dp"/>
</shape>
</item>
</ripple>

Add MaterialButton.
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Button" />
Also do not forget to change theme Theme.AppCompat.Light.DarkActionBar to Theme.MaterialComponents.Light.DarkActionBar in styles.xml file.

Giving shadow effect to a custom view

Hi i am developing an app where i have a custom curve shape which i'm using in an imageview now this shpae is in white color and i have created another similar custom shape in black color so now what i'm trying to do is make the black shape as shadow of white shape as a thin black line acting as a outline to white shape.
Now my problem is when i run the app the black shape is getting completely overlapped by white shape.
So please f anyone can help me out here
My xml code
<android.support.v4.widget.NestedScrollView android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:id="#+id/profile_scroll"
xmlns:android="http://schemas.android.com/apk/res/android" >
<RelativeLayout 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:orientation="vertical">
<RelativeLayout
android:id="#+id/background_image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#drawable/curved_toolbar"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:src="#drawable/curved_toolbar"
android:visibility="gone" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:layout_marginBottom="20dp"
android:src="#drawable/profile_black_shadow"/>
<ImageView
android:id="#+id/second_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:layout_marginBottom="20dp"
android:src="#drawable/profile_second_image" />
<ImageView
android:id="#+id/pencil_image"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignParentRight="true"
android:layout_marginRight="30dp"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:layout_marginTop="25dp"
android:src="#drawable/pencil" />
</RelativeLayout>
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/circle_image"
android:layout_width="116dp"
android:layout_height="120dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="125dp"
android:layout_marginRight="125dp"
android:layout_marginTop="113dp"
android:src="#drawable/heath_ledger"
/>
<LinearLayout
android:id="#+id/person_name_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="10dp"
android:layout_below="#+id/circle_image"
android:layout_centerInParent="true"
>
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Jhon Doe"
android:id="#+id/person_name_text"
android:textColor="#color/White"
android:textSize="16sp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/points_layout"
android:layout_marginBottom="8dp"
android:layout_below="#+id/person_name_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="20dp">
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/first_follow_count"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="200"
android:textColor="#color/White"
android:layout_marginLeft="13dp"
android:textSize="15sp"/>
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/first_follow_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="13sp"
android:text="Followers"
android:textColor="#color/White"
android:layout_marginTop="5dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="51dp">
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/second_follow_count"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="200"
android:layout_marginLeft="40dp"
android:textColor="#color/White"
android:textSize="15sp"/>
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/second_follow_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="13sp"
android:text="Following"
android:textColor="#color/White"
android:layout_marginLeft="25dp"
android:layout_marginTop="5dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="100dp">
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/third_follow_count"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="1.5K"
android:textColor="#color/White"
android:textSize="15sp"/>
<com.ct.listrtrial.Custom.CustomTextViewMedium
android:id="#+id/third_follow_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="13sp"
android:text="Points"
android:textColor="#color/White"
android:layout_marginTop="5dp"/>
</LinearLayout>
</LinearLayout>
<View
android:id="#+id/divider_view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/black"
android:layout_above="#+id/leaderboard_recycler"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/leaderboard_recycler"
android:layout_below="#+id/points_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</android.support.v7.widget.RecyclerView>
<View
android:id="#+id/divider_view1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/black"
android:layout_below="#+id/leaderboard_recycler"
/>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
and my custom white shape
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<size
android:width="30dp"
android:height="15dp"/>
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"/>
</shape>
and my black shape
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#000000"/>
<size
android:width="18dp"
android:height="9.1dp"/>
<corners
android:bottomLeftRadius="55dp"
android:bottomRightRadius="55dp"
/>
</shape>

Try with this drawable (You can adjust shadow thickness by change padding in shapes),
like:-
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="0px">
<layer-list>
<item android:top="4dp">
<shape android:shape="rectangle">
<solid android:color="#08000000"/>
<corners
android:bottomLeftRadius="180dp"
android:bottomRightRadius="180dp" />
<size
android:width="80dp"
android:height="40dp"/>
<padding
android:bottom="3px" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#09000000"/>
<corners
android:bottomLeftRadius="180dp"
android:bottomRightRadius="180dp" />
<size
android:width="80dp"
android:height="40dp"/>
<padding
android:bottom="2px"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#10000000"/>
<corners
android:bottomLeftRadius="180dp"
android:bottomRightRadius="180dp" />
<size
android:width="80dp"
android:height="40dp"/>
<padding
android:bottom="2px" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#11000000"/>
<corners
android:bottomLeftRadius="180dp"
android:bottomRightRadius="180dp" />
<size
android:width="80dp"
android:height="40dp"/>
<padding
android:bottom="1px" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#12000000"/>
<corners
android:bottomLeftRadius="180dp"
android:bottomRightRadius="180dp" />
<size
android:width="80dp"
android:height="40dp"/>
<padding
android:bottom="1px" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#13000000"/>
<corners
android:bottomLeftRadius="180dp"
android:bottomRightRadius="180dp" />
<size
android:width="80dp"
android:height="40dp"/>
<padding
android:bottom="1px" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#14000000"/>
<corners
android:bottomLeftRadius="180dp"
android:bottomRightRadius="180dp" />
<size
android:width="80dp"
android:height="40dp"/>
<padding
android:bottom="1px" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#15000000"/>
<corners
android:bottomLeftRadius="180dp"
android:bottomRightRadius="180dp" />
<size
android:width="80dp"
android:height="40dp"/>
<padding
android:bottom="1px" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#16000000"/>
<corners
android:bottomLeftRadius="180dp"
android:bottomRightRadius="180dp" />
<size
android:width="80dp"
android:height="40dp"/>
<padding
android:bottom="1px" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#17000000"/>
<corners
android:bottomLeftRadius="180dp"
android:bottomRightRadius="180dp" />
<size
android:width="80dp"
android:height="40dp"/>
<padding
android:bottom="1px" />
</shape>
</item>
</layer-list>
</item>
<item >
<shape android:shape="rectangle">
<solid android:color="#ffffff"/>
<corners
android:bottomLeftRadius="180dp"
android:bottomRightRadius="180dp" />
<size
android:width="80dp"
android:height="40dp"/>
</shape>
</item>
</layer-list>
Set on ImageView like:-
<ImageView
android:background="#drawable/shape"
android:layout_width="match_parent"
android:layout_height="200dp" />
Result:-

How to make textview background like instagram direct message

I wanna make my text view is like this
i wanna take just background (rounded on edge only)

Try this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="5dp"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_delete" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/button_background"
android:orientation="horizontal"
android:padding="5dp">
<EditText
android:id="#+id/myEDT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="2dp"
android:background="#null"
android:hint="Enter Text" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_delete" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_delete" />
</LinearLayout>
</LinearLayout>
button_background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="50dp" />
<stroke android:width="2dp" android:color="#color/colorPrimary" />
<solid android:color="#ffffff" />
</shape>
OUTPUT

Buttons design like in Jeepsing

I'm trying to create buttons in Android the same way as in Jeepsing application for iPhone using linear layout but without success. Maximum that I get is three separated buttons the same size.
I need three buttons without background, separated only by their borders when two of them have one rounded corner like on the following screenshot:
This is my last try:
<LinearLayout android:id="#+id/LinearLayout02" android:layout_height="wrap_content" android:layout_width="match_parent">
<Button android:id="#+id/Button04" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
<Button android:id="#+id/Button05" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
<Button android:id="#+id/Button06" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
</LinearLayout>
I also tried GridLayout but without success.

just create shapes with corners radius for both pressed/released effects..
<solid android:color="#77000000" />
<corners android:radius="10dip" />
<gradient
android:angle="-90"
android:endColor="#44FF0000"
android:startColor="#CCFF0000" />
<padding
android:bottom="10dip"
android:left="10dip"
android:right="10dip"
android:top="10dip" />
<stroke
android:width="1dip"
android:color="#000000" >
</stroke>
for more info about shapes refer this
After creating shapes for pressed/released effects create a XML file for button selector like following example
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/prs_arrival_fb_btn" /> <!-- pressed -->
<item
android:state_focused="true"
android:drawable="#drawable/prs_arrival_fb_btn" /> <!-- focused -->
<item
android:drawable="#drawable/arrival_fb_content_btn" /> <!-- default -->
</selector>
then set this selector to your button as background.. like the following example..
<Button android:text="Play" android:id="#+id/playBtn"
android:background="#drawable/button_selector"
android:textColor="#ffffff" />

This is how I achieved it:
up_left_button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/up_left_button_shape_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/up_left_button_shape_pressed"
android:state_selected="true" />
<item android:drawable="#drawable/up_left_button_shape_released" />
</selector>
up_left_button_shape_pressed.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#ff0000ff"
android:endColor="#ff0000ff"
android:angle="45"/>
<padding android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
<corners android:radius="8dp"
android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp"
android:topLeftRadius="8dp" android:topRightRadius="0dp"/>
<stroke android:width="2dp" android:color="#ff444444"/>
</shape>
up_center_button_shape_released.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#00000000"
android:endColor="#00000000"
android:angle="45"/>
<padding android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
<corners android:radius="8dp"
android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp"
android:topLeftRadius="8dp" android:topRightRadius="0dp"/>
<stroke android:width="2dp" android:color="#ff444444"/>
</shape>
Center and right button shapes are the same, just need to play with which corners to round.
And finally the view layout:
<TableRow android:id="#+id/buttonsRow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp">
<RelativeLayout android:id="#+id/buttonsRowRelativeLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<Button
android:id="#+id/leftButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/save"
android:textColor="#ffffffff"
android:background="#drawable/up_left_button_selector"
android:layout_toLeftOf="#+id/centerButton" />
<Button
android:id="#+id/centerButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/change"
android:textColor="#ffffffff"
android:background="#drawable/up_center_button_selector"
android:layout_centerHorizontal="true"/>
<Button
android:id="#+id/rightButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/send"
android:textColor="#ffffffff"
android:background="#drawable/up_right_button_selector"
android:layout_toRightOf="#+id/centerButton" />
</RelativeLayout >
</TableRow>
And it looks pretty good.

android get tab strip on top for bottom tabHost

I have a layout for bottom tabs. However, I am not able to set the strip on top of tabHost. How to do it? Thank you.
here my main layout:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
/>
</LinearLayout>
</TabHost>
and also a selector for tab style:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#aa3434"
android:endColor="#432233"
android:angle="270"
/>
</shape>
</item>
<item android:state_selected="true" >
<shape>
<gradient
android:startColor="#aa3434"
android:endColor="#432233"
android:angle="270" />
</shape>
</item>

Try this code
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" />
</LinearLayout>
</TabHost>