I used one LinearLayout in my activity for changing two views. Here, i used two textviews. When user clicks on linear layout i change views as per my requirnments. xml file is here,
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/customswitchselector"
android:textStyle="bold"
android:layout_below="#+id/linearTab"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:showText="true"
android:id="#+id/switch1"
android:checked="false"
android:weightSum="2">
<TextView
android:id="#+id/tv_switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:textStyle="bold"
android:textColor="#272351"
style="bold" />
<TextView
android:id="#+id/tv_switch_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:textStyle="bold"
android:layout_gravity="center_vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:textColor="#ffffff"
style="bold"
/>
</LinearLayout>
These two images show my two conditions. I have done enough to change this. Now i want to do animation while i am changing background for textviews on layout clicks. I have checked transitiondrawable example but it not helpful to me.
customswitchselector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<gradient android:angle="270" android:endColor="#ffffff" android:startColor="#ffffff" />
<corners android:radius="30dp" />
</shape>
</item>
<item android:state_checked="false">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<gradient android:angle="270" android:endColor="#ffffff" android:startColor="#ffffff" />
<corners android:radius="30dp" />
</shape>
</item>
</selector>
custom_track.xml This is used for textview with blue background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="rectangle"
android:useLevel="false"
android:visible="true">
<gradient
android:angle="270"
android:endColor="#292850"
android:startColor="#292850" />
<corners android:radius="30dp" />
<size
android:width="100dp"
android:height="30dp" />
</shape>
A possibility would be to set the white drawable as background of a FrameLayout and add a View for the blue oval and two TextViews for the titles to it.
To still acchieve that the views takes exactly the half of the container you could use PercenFrameLayout (read more about it in the official docu). To use it you need to add this dependency to your build.gradle: compile 'com.android.support:percent:25.2.0'
After creating the layout you just animate the gravity of the blue oval from left to right or the other way round.
So your layout would look like this:
<PercentFrameLayout
android:id="#+id/container"
android:animateLayoutChanges="true"
android:background="#drawable/white_oval"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- blue oval -->
<View
android:id="#+id/blue_oval"
android:gravity="start"
android:background="#drawable/blue_oval"
app:layout_widthPercent="50%"
android:layout_height="wrap_content"
android:transformPivotX="0dp" />
<!--2 textviews-->
<TextView
app:layout_widthPercent="50%"
android:layout_height="wrap_content"
android:text="left"
android:gravity="start"/>
<TextView
app:layout_widthPercent="50%"
android:layout_height="wrap_content"
android:text="right"
android:gravity="end"/>
</FrameLayout>
Then in your code animate the gravity change of the blue oval like this:
private void animateGravity(int toGravity) {
LayoutTransition layoutTransition = container.getLayoutTransition();
layoutTransition.enableTransitionType(LayoutTransition.CHANGING);
layoutTransition.setDuration(YOUR_ANIMATION_DURATION);
layoutTransition.setInterpolator(LayoutTransition.CHANGING, new AccelerateDecelerateInterpolator());
FrameLayout.LayoutParams layoutParams = (LayoutParams) blueOvalView.getLayoutParams();
layoutParams.gravity = toGravity;
blueOvalView.setLayoutParams(layoutParams);
}
Related
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/white" />
<corners
android:bottomLeftRadius="30dp"
android:topLeftRadius="30dp" />
</shape>
<Button
android:id="#+id/btn_list"
android:layout_width="#dimen/width_100dp"
android:layout_height="wrap_content"
android:background="#drawable/my_background"/>
Tried the above code but it does not work for me. do i need to make a custom class extending button class.
Very Easy!, Take CardView as root element. CardView rounds child elements edges according to itself.
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_margin="20dp"
app:cardCornerRadius="25dp"
app:cardElevation="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="#string/app_name" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ecb8ff"
android:gravity="center"
android:text="#string/app_name" />
</LinearLayout>
</androidx.cardview.widget.CardView>
Output:
Also if you need TabLayout. You can see this answer
Try this it's a little tricky but it works
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FFF" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="500dp"
android:topLeftRadius="0dp"
android:topRightRadius="500dp" />
</shape>
</item>
</layer-list>
Is there a way to create these two boxes with XML only (beside the icon of course)
The tob box has rounded bordered around it and shadow but inside it divided to two parts which one is pink background and one is white background (without stroke between them)
Create 2 XML drawables
rect_colored.xml
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorAccent"/>
<corners android:bottomRightRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
rect_white.xml
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:color="#color/colorPrimaryDark"
android:width="2dp"/>
<corners android:radius="5dp"/>
</shape>
Position the drawables appropriately
This will work differently with different root views. I'm using ConstraintLayout for simplicity
<android.support.constraint.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">
<FrameLayout
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
android:background="#drawable/rect_white"
android:id="#+id/frameLayout"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp">
<!--Content here-->
</FrameLayout>
<FrameLayout
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginBottom="0dp"
android:layout_marginRight="2dp"
android:layout_marginTop="0dp"
android:background="#drawable/rect_colored"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintRight_toRightOf="#+id/frameLayout"
app:layout_constraintTop_toTopOf="#+id/frameLayout">
<!--Content here-->
</FrameLayout>
</android.support.constraint.ConstraintLayout>
The output
Just use a LayerList with the shapes you need nested. May take a little tweaking, but it is simple enough. You can even add in your bitmaps for the left icon if you like. Just make your layers, and adjust from the sides and handle your corners.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="50dp">
<shape
android:shape="rectangle" >
<solid android:color="#0000FF" />
<corners android:bottomRightRadius="20dp" android:topRightRadius="20dp" />
</shape>
</item>
<item android:right="50dp">
<shape
android:shape="rectangle" >
<solid android:color="#ffffff" />
<corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" />
</shape>
</item>
</layer-list>
Here simply you create a one xml file & drawable file to create shape & border.
MyActivity.Xml
<LinearLayout
android:id="#+id/ll_mobile_img"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<RelativeLayout
android:id="#+id/rr_verification_code"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_weight="0.3">
<EditText
android:id="#+id/et_verification_code"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/ractangle_mobile_white_border"
android:ems="10"
android:hint="Enter Code"
android:drawableLeft="#mipmap/ic_launcher"
android:imeOptions="actionGo"
android:inputType="number|textAutoComplete"
android:maxLength="6"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingTop="16dp"
android:singleLine="true"
android:textColor="#android:color/white"
android:textColorHint="#android:color/white"
android:textSize="18sp" />
</RelativeLayout>
<LinearLayout
android:id="#+id/ll_country_img"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#android:color/white"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/tv_verification_code_img"
android:layout_width="38dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/globe"
android:textColor="#color/blue_font_color"
android:textSize="20dp" />
</LinearLayout>
</LinearLayout>
Drawable:- ractangle_mobile_white_border.xml
[![<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="360" android:endColor="#android:color/transparent" android:startColor="#android:color/transparent" />
<stroke android:width="1dp" android:color="#android:color/white" />
<corners android:bottomRightRadius="1dp" android:topRightRadius="1dp"/>
<padding android:bottom="3dp" android:left="0dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Hope this helps you.
I have a dialog and in this i have 2 button "Yes" and "No". If i slide right then it will treat as pressed "No" and if i slide left it will treated as pressed "Yes" same as like some phone calling screes do for accept and reject calls. I tired this link. Initially my slider is positioned at mid position (android:progress ="50"), and if current progress returns 5 i am considering it pressed "yes" and if it returns 90 i consider pressed "No" and when i try to slide left or right it should produce a sliding effect for better UI as thumb moves. I tired this way but its not a good effect when right/left movement of thumb..
Means i want exactly same as slide to unlock button like this but want to keep the slider in middle so that i can move both side for Yes and No.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<shape>
<gradient
android:angle="0"
android:startColor="#ff2c10"
android:endColor="#ff2c10" />
<corners android:radius="35dip" />
<size android:height="55dp"
android:width="250dp"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip >
<shape>
<gradient
android:angle="0"
android:centerY="0.5"
android:startColor="#295d0b"
android:endColor="#295d0b" />
<corners android:radius="35dip" />
<size android:height="55dp"
android:width="250dp"/>
</shape>
</clip>
</item>
</layer-list>
And my seekbar.xml looks like....
<SeekBar
android:id="#+id/sb"
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:progress="50"
android:progressDrawable="#drawable/seek_bar"
android:thumb="#drawable/slide_thumb"
android:splitTrack="false"
android:background="#null"
android:thumbOffset="2dp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Yes"
android:textSize="25sp"
android:textColor="#android:color/white"
android:layout_marginTop="22dp"
android:layout_marginLeft="10dp"
android:textStyle="bold"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="No"
android:textSize="25sp"
android:textColor="#android:color/white"
android:layout_alignParentRight="true"
android:layout_marginTop="22dp"
android:layout_marginRight="10dp"
android:textStyle="bold"
/>
but its not giving me the right effect as i wanted, i want same as these below pictures are.. But with "yes" and "No" text.
Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_gravity="center"
android:layout_marginTop="121dp"
android:max="100"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:progress="50"
android:progressDrawable="#drawable/seekbar_progressbar"
android:thumbTintMode="multiply" />
<TextView
android:layout_width="wrap_content"
android:layout_height="24dp"
android:background="#drawable/circle_background_no"
android:textColor="#dedede"
android:text="No"
android:padding="5dp"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:layout_alignTop="#+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="24dp"
android:textColor="#dedede"
android:background="#drawable/circle_background_yes"
android:padding="5dp"
android:paddingRight="7dp"
android:paddingLeft="7dp"
android:gravity="center"
android:text="Yes"
android:id="#+id/textView"
android:layout_marginRight="13dp"
android:layout_marginEnd="13dp"
android:layout_alignTop="#+id/seekBar"
android:layout_alignRight="#+id/seekBar"
android:layout_alignEnd="#+id/seekBar"
android:layout_marginTop="4dp" />
In drawable
circle_background_yes.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="10dip"/>
<stroke android:color="#14ba92" android:width="0dip"/>
<solid android:color="#14ba92"/>
</shape>
circle_background_no.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="10dip"/>
<stroke android:color="#990800" android:width="0dip"/>
<solid android:color="#990800"/>
</shape>
seekbar_progressbar.xml
<?xml version="1.0" encoding="utf-8"?>
<item>
<shape android:shape="rectangle" >
<corners android:radius="5dp"/>
<gradient
android:angle="180"
android:endColor="#14ba92"
android:startColor="#14ba92" />
</shape>
</item>
<item>
<clip>
<shape android:shape="rectangle" >
<corners android:radius="5dp" />
<gradient
android:angle="180"
android:endColor="#990800"
android:startColor="#d14900" />
</shape>
</clip>
</item>
<item>
<clip>
<shape android:shape="rectangle" >
<corners android:radius="5dp" />
<gradient
android:angle="180"
android:endColor="#990800"
android:startColor="#d14900" />
</shape>
</clip>
</item>
If you don't like the default thumb, you will have to create your own Drawable, which you can then set the thumb in code with something like:
Drawable thumb = getResources().getDrawable( R.drawable.myThumb );
SeekBar mSeekBar = (SeekBar) findViewById(R.id.mySeekBar);
mSeekbar.setThumb(thumb);
Or you can set the thumb in XML with:
<SeekBar
...
android:thumb="#drawable/seek_thumb" />
The actual Drawable can be an image, shape, or any other kind of Drawable you could possibly desire. If you want the thumb to change appearance when it is pressed, you will want to create a State List Drawable.
My issue is simple I have a basic layout with two views with two custom drawables as background, here is the code :
<RelativeLayout
android:id="#+id/relaunch_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:visibility="invisible"
android:clipChildren="false"
android:layout_above="#+id/playLayout">
<Button
android:id="#+id/relaunch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Relancer"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:textColor="#FFF0951C"
android:background="#drawable/rounded_button"
android:gravity="center_horizontal|center_vertical"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/nbspins_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:layout_marginRight="-10dp"
android:layout_marginTop="-10dp"
android:background="#drawable/circular_shape"
android:textColor="#color/white"
android:layout_alignRight="#+id/relaunch" />
</RelativeLayout>
And the shape for my Views :
Button shape :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<corners android:radius="15dp" />
<stroke android:width="2dp" android:color="#FFF0951C" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
</selector>
TextView shape :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FF0000" />
<corners
android:topLeftRadius="15dp"
android:topRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
/>
</shape>
I can't figure out why, my TextView is not displayed above my Button, here is the result I get :
The result I want :
Can you see why ?
I think I know what you mean.
The button uses the following:
android:layout_alignParentTop="true"
so is aligning with the top of the RelativeLayout.
Remove that and change it to
android:layout_below="#id=nbspins_view"
and make the TextView align with the parent top.
I want to create a button with image inside it as shown at the bottom of this pic https://trianglewiki.org/RGreenway_App/_files/android.jpg/_info/. I am trying using layer-list and shape drawables and able to create buttons very similar. My problem is that my image is not scaling inside the button as I would like. The ring shape is coming on the top of the image but image is not inside it.
I want the image to be completely inside the ring. I think there is something wrong with the parameters values I am giving. But it could be I am not doing it the proper way.
Can somebody check my xml files and see what is the problem or provide me with any information how to do it so that I get the same effect in the button as in the link above. Thanks
custom_button.xml (in res/drawable)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/map"/>
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="20dp"
android:innerRadiusRatio="1.75"
android:shape="ring"
android:thicknessRatio="25"
android:useLevel="false"
>
<gradient
android:angle="90"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF" />
<size
android:width="50dp"
android:height="40dp" />
<solid android:color="#008000" />
</shape>
</item>
</layer-list>
custom_layout (in res/drawable for linearlayout's background)
<?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:startColor="#FF000000"
android:endColor="#FFFFFFFF"
android:type= "linear" />
<stroke
android:width="1dp"
android:color="#FF000000" />
<padding
android:left="5dp"
android:right="5dp"
/>
<size
android:height="50dp"
/>
<solid
android:color="#00FF00"
/>
</shape>
header.xml (in res/layout)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/custom_layout"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/home"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:contentDescription="Button"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:background="#drawable/custom_button"
android:scaleType="fitXY"
android:color="#ff0000"
/>
<ImageButton
android:id="#+id/map"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="Map"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
<ImageButton
android:id="#+id/weather"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="Weather"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
<ImageButton
android:id="#+id/citilink"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:background="#drawable/custom_button"
android:contentDescription="CitiLink"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:scaleType="fitXY"
/>
</LinearLayout>
You are overcomplicating this is if I understand your question. Look to here for an answer. It's the trick I have used in the past.