Develop Reference

How do I create a bottom cut half oval shaped button in Android?

I'm trying to create a half oval shaped button, which was easy in the mockup but I found it to be quite difficult doing in the XML file. Also I would like the ripple effect to be constrained only to the oval.
There may be a way to cut an oval in the shape XML file that I am not aware of.
What I'm trying to achieve:
But the closest I got is:
Using the following code:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#8C9AEE"/>
<size
android:width="120dp"
android:height="60dp"/>
<corners
android:topLeftRadius="140dp"
android:topRightRadius="140dp"/>
</shape>
Any advice would be appreciated. Non of the options I saw achieved the desired result.

Try the following code
custom_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#8C9AEE" />
<size
android:width="120dp"
android:height="60dp" />
</shape>
activity_main.xml
<?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">
<View
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#8C9AEE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/custom_shape"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Output
Hope you helpful!

Custom UI for button and edittext

I have been trying to design a button and a edittext in native android but unable to create the exact UI as shown in the picture. If anyone has any idea how can I create such UI please share your thoughts. In the image the first field should act as an input box and the second field should act as button.

The following given xmls will create the same UI you asked for. :)
create roundedbutton.xml resource file in drawable folder, given below
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#eeC4C6C7" />
<corners android:bottomRightRadius="30dp"
android:bottomLeftRadius="30dp"
android:topRightRadius="30dp"
android:topLeftRadius="30dp"/>
</shape>
create roundededittext.xml resource file in drawable folder, given below
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#eeCD3E22" />
<corners android:bottomRightRadius="30dp"
android:bottomLeftRadius="30dp"
android:topRightRadius="30dp"
android:topLeftRadius="30dp"/>
</shape>
Create your main xml layout file. I created with your custom edit text, shown here:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp">
<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/roundedbutton"
android:elevation="10dp"
android:layout_gravity="center_vertical"
android:text="t"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginLeft="-30dp"
android:elevation="2dp"
android:layout_gravity="center_vertical"
android:background="#drawable/roundededittext"/>
</LinearLayout>
Hope it helps! Ask for any doubt.

Android: How to add a line to TextView?

I'm trying to achieve this:
I know that using a vertical LinearLayout that constains a TextView and just below a View that works as a line is a possible a solution, but I'd not like to use 3 widgets to achieve that. What I want is to use only a TextView and draw the line using a drawable. I have done an implementation but it does not work (I do not see the line). Find below the code I wrote:
<TextView
android:layout_width="100dp"
android:layout_height="150dp"
android:gravity="center"
android:text="Text"
android:drawableBottom="#drawable/line"/>
line.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="10dp" android:color="#3b50ec"/>
</shape>
If is possible to achieve what I want using my approach, does anyone know what's wrong in my code?

The problem is in your line.xml file, replace its content for this implementation:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<size
android:height="1dp"
android:width="100dp" />
<solid android:color="#3b50ec" />
</shape>

I think to do this requires a 9 patch. Here's one from the sdk (ab_transparent_dark_holo.9.png):
And then change it to a background attribute:
<TextView
android:layout_width="100dp"
android:layout_height="150dp"
android:gravity="center"
android:text="Text"
android:background="#drawable/line"/>

Android creating Circular layout

I am trying to create a circular layout that always stay's on the screen.
To do so, I have created a System overlay and added a button.
But, now I want to make it round.
Either I can use 4 different ImageView and and textView and add both to FrameLayout.
I read somewhere that simple things like this can be made by XML.
How do I do it?
I want to achieve something like this :
EDIT
After following your guide I was able to achieve this :
But I am not satisfied by the way I used.
What I did was created 2 shaped (background, forground) and added them to a layerlist.
BACKGROUND
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#50000000" />
</shape>
FORGROUND
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#99009900" />
</shape>
LIST
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/circleback">
</item>
<item
android:bottom="5dp"
android:drawable="#drawable/circlefront"
android:left="5dp"
android:right="5dp"
android:top="5dp">
</item>
</layer-list>
Then, I used a framelayout and added 2 textview.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#drawable/circle" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="33dp"
android:text="#string/data_left"
android:layout_marginTop="8dp"
android:textColor="#fff"
android:textSize="30sp"
android:typeface="sans"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:text="#string/band"
android:layout_marginTop="40dp"
android:textColor="#fff"
android:textSize="20sp"/>
</FrameLayout>
And then inflated them by service. But I am not happy with the textposition and the fact that I have to random hit and trial to find center of circle.
I'll later add pinch to zoom to view so, I really want to find a way that text align itself to centre of circle.

You need to create a shape drawable (in the res/drawable folder) like:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"
<solid android:color="#ff00ff00 />
</shape>
See docs: https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

Background properties on ImageView ignored when placed over ViewFlipper

I have an Activity that contains a FrameLayout and two views. The first is a ViewFlipper and the second is an ImageView. If I comment out the ViewFlipper, the activity renders the ImageView and its background correctly, but when the ViewFlipper is visible, the ImageView's background is completely ignored.
Is this a "feature" of ViewFlipper? Is there a way I can work around this?
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/background_light"
>
<ViewFlipper android:id="#+id/flipper"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:flipInterval="5000"
>
<include layout="#layout/cell_1" android:id="#+id/cell_1"/>
<include layout="#layout/cell_2" android:id="#+id/cell_2"/>
<include layout="#layout/cell_3" android:id="#+id/cell_3"/>
</ViewFlipper>
<ImageView
android:background="#drawable/alpha_gradient_background"
android:id="#+id/statusIcon"
android:src="#drawable/status_icon"
android:padding="5dp"
android:layout_gravity="right"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:top="10dp"
android:right="10dp"
/>
</FrameLayout>
And my background drawable looks like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="3dp" android:color="#ffff0000" />
<gradient
android:startColor="#66660000"
android:centerColor="#66006600"
android:endColor="#66000066"
android:angle="270"
/>
</shape>

It appears that Buttons are able to render their background when placed over a ViewFlipper.
I have therefore got around this by creating a partially transparent PNG and setting that as the background image on the button.