I am using edittext and it's showing a line where I can enter text but I have seen examples of the line having upturned edges (see below). Can't figure out how to do it.
Edit text looks like this:
_____________.
but I want it to look more like this:
|__________________|
Thanks for help.
you need to use layer-list and add custom background to your edit text.
here's a sample.
create a xml file in your drawable folder-> custombg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Border -->
<item>
<shape>
<solid android:color="#f000"></solid>
</shape>
</item>
<!-- Body -->
<item android:left="2dip"
android:bottom="2dp"
android:right="2dp">
<shape>
<solid android:color="#ffafafaf"></solid>
</shape>
</item>
</layer-list>
in you're edit text do this.
<EditText
android:id="#+id/edit_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/border_line_withradius"
/>
Related
I would like to create a shape to use as a background for an element, since the app has red and orange as main colors I would like to make a cool border, however I have only managed to find how to put a single color and don't really know how to do a sort of a design.
I would like to do something like this (I made this quickly in paint just a demonstration of my idea):
Shape with cool alternated border
Ok I worked on it a bit and came to a solution that isn't exactly what I was trying to do but it will be good enough I guess. This is the code to put in the xml file in the drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle"
android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
<stroke
android:width="10dp"
android:color="#color/colorAccent"/>
</shape>
</item>
<item>
<shape
android:shape="rectangle"
android:padding="10dp">
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
<stroke
android:width="8dp"
android:color="#color/colorPrimary"
android:dashGap="10dp"
android:dashWidth="8dp" />
</shape>
</item>
</layer-list>
this code will produce this result:
shape with bicolor border
Hope this helps anybody
I am trying to add spaces between the tabs.
I would like to add gaps between the tabs, I have tried using padding but that changes the entire tab layout padding and not individual tabs. I have also tried other methods e.g. minWidth, while searching for an idea but couldn't figure it out, so i am here. Most of the project is default from when i created the tabbed layout activity, Here is the code i added/changed:
Thanks in Advance.
tab_background
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="18dp"/>
<!-- TabLayout background color -->
<solid
android:color="#color/colorPrimaryDark"/>
</shape>
tab_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- radius should be half of the desired TabLayout height -->
<corners
android:radius="18dp"/>
<!-- color of the selected tab -->
<solid
android:color="#color/colorWhite"/>
</shape>
tab_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- drawable for selected tab -->
<item
android:drawable="#drawable/tab_selected"
android:top="-2dp" android:left="-5dp" android:right="-5dp" android:bottom="2dp"
android:state_selected="true"/>
<!-- drawable for unselected tab -->
<item
android:drawable="#drawable/tab_background"
android:top="-2dp" android:left="-5dp" android:right="-5dp" android:bottom="2dp"
android:state_selected="false"/>
</selector>
activity_main
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
>
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="70dp"
android:gravity="top|center_horizontal"
android:minHeight="?actionBarSize"
android:padding="#dimen/appbar_padding"
android:text="#string/app_name"
android:fontFamily="#font/sofiabold"
android:background="#color/colorPrimary"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="56dp"
app:tabTextColor="#color/colorWhite"
app:tabMode="auto"
app:tabGravity="center"
android:layout_gravity="center"
android:background="#color/colorPrimary"
app:tabBackground="#drawable/tab_selector"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabPaddingStart="16dp"
app:tabPaddingEnd="16dp"
android:paddingBottom="20dp"
app:tabIndicatorHeight="0dp"
app:tabRippleColor="#null"
app:tabTextAppearance="#style/TabTextAppearance"/>
</com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You should use xml drawable, specially designed for this purposes - Inset Drawable: http://developer.android.com/guide/topics/resources/drawable-resource.html#Inset
For example:
res/drawable/tab_selector_inset.xml:
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/tab_selector"
android:insetRight="10dp"
android:insetLeft="10dp" />
And use it in your TabLayout:
app:tabBackground="#drawable/tab_selector_inset"
(Inspired by Vasily Sochinsky)
It is late but it may be useful for other people .if you have custom background for tabs(selector), you just need add layer list to tabs background and set margin for them
selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_selected_tab" android:state_selected="true"/>
<item android:drawable="#drawable/bg_unselected_tab"/>
</selector>
selected tab:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="8dp" android:left="8dp">
<shape>
<stroke android:width="1dp" android:color="#color/Green"/>
<corners android:radius="#dimen/cardCornerRedius"/>
</shape>
</item>
</layer-list>
unselected tab:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="8dp" android:left="8dp">
<shape>
<stroke android:width="1dp" android:color="#color/Gray"/>
<corners android:radius="#dimen/cardCornerRedius"/>
</shape>
</item>
</layer-list>
I want to set BackgroundColor of the selected TAB by code in ViewPager.
For far what I have done is:-
tabs.setSelectedTabIndicatorColor(Color.parseColor("#92278F"));
tabs.setSelectedTabIndicatorHeight(50);
tabs.setTabTextColors(Color.parseColor("#FFFFFF"), Color.parseColor("#FFFFFF"));
But I cannot achieve it.
If the selected Color is RED then the TAB should reflect as RED in COLOR for the selected TAB and white as selected TEXT COLOR.
I can do it by XML code but I am not getting any idea how to achieve it by CODE(dynamically)
Please help me.
This is how it will look like-
Image1
Image2
Here is the code:
Make 3 drawable files for background, selected and unselected states-
tab_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/tab_background_selected" android:state_selected="true" />
<item android:drawable="#drawable/tab_background_unselected" android:state_selected="false" android:state_focused="false" android:state_pressed="false" />
</selector>
tab_background_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#87CEFA" />
</shape>
tab_background_unselected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#3F51B5" />
</shape>
Then finally add tablayout styles in styles.xml
<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
<item name="tabBackground">#drawable/tab_background</item>
<item name="tabIndicatorColor">#ff00ff</item>
<item name="tabIndicatorHeight">2dp</item>
</style>
I have the following button defined in an activity layout:
<Button
android:id="#+id/button_Collect"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginBottom="16dp"
android:layout_gravity="center_horizontal"
android:background="#drawable/selector_CollectButton" />
With it I have this selector applied to the button:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<!-- PRESSED STATE (Opacity change to 75) -->
<!-- ==================================== -->
<layer-list>
<!-- Shape for the outer circle -->
<item opacity="75">
<shape android:shape="oval">
<solid android:color="#FFBDC3C7" />
</shape>
</item>
<!-- Shape for the circle -->
<item android:top="18dp" android:left="18dp" android:right="18dp" android:bottom="18dp">
<shape android:shape="oval">
<!--<solid android:color="#FF3498DB" />-->
<solid android:color="#FF22DD44" />
</shape>
</item>
</layer-list>
</item>
<item>
<!-- NORMAL STATE -->
<!-- ============ -->
<layer-list>
<!-- Shape for the outer circle -->
<item>
<shape android:shape="oval">
<solid android:color="#FFBDC3C7" />
</shape>
</item>
<!-- Shape for the circle -->
<item android:top="18dp" android:left="18dp" android:right="18dp" android:bottom="18dp">
<shape android:shape="oval">
<solid android:color="#FF3498DB" />
</shape>
</item>
</layer-list>
</item>
</selector>
Why is it that the pressed state never tiggers whenever I touch the button in my app?
I also tried splitting my "states" into separate xml drawable files, but the problem still remained.
As for the event, I have the following in my activity:
Button btnCollect = FindViewById<Button>(Resource.Id.button_Collect);
btnCollect.Touch += btnCollect_Touch;
This is C# code since I'm working with Xamarin. This code executes without a problem, so I know the touch event is executing.
UPDATE:
I figured something out, it works ONLY if I remove the above event handler:
I have the following code:
private void btnCollect_Touch(object sender, View.TouchEventArgs e)
{
if (e.Event.Action == MotionEventActions.Up)
ScoreManager.Instance.CalculatePoints();
}
If I don't add a handler to this method the selector works fine, anyone know why ???
Fixed!!
I changed the event from Touch to Click for the button and everything works fine now.
Also to note, many people have said (in other posts) that a Selector with Layer-Lists should be split into separate files. This crowds the project with a lot of xml files. IT IS NOT NECESSARY, you can have the states within the same selector file and it works perfectly fine.
Try this tutorial, this work for me
http://www.stealthcopter.com/blog/2010/08/making-prettier-buttons-in-android-xml-rolloverselection-focus-effects-9patch-images-and-transparency/
I want to design a spinner as displayed in the image below:
I am not getting the arrow symbol pointing downside in spinner. How can I do this?
If I make a button design like shown above then I have to write extra code to get similar functionality as for a spinner, as Spinner doesn't have android:drawableRight="#drawable/arraodown", but in the button we have this method.
Do not mess around with right/left/... drawables.
Just set one 9-patch drawable as background that limits the inner content.
<Spinner
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/you_spinner_drawable" />
Regarding the 9-patch drawable have a look at the android resources or at this example picture taken from this blog post (which shows in little more detail on how to make a custom spinner):
For information about 9-patch drawables see the android documentation:
http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
http://developer.android.com/tools/help/draw9patch.html
Of course you can also specify a State list xml file as drawable, eg.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When disabled -->
<item android:state_enabled="false"
android:drawable="#drawable/your_disabled_spinner_drawable" />
<!-- When selected -->
<item android:state_pressed="true"
android:drawable="#drawable/your_selected_spinner_drawable" />
<!-- When not selected-->
<item
android:drawable="#drawable/your_default_spinner_drawable" />
</selector>
http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList
<Spinner
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/you_spinner_drawable" />
**You can use the below mentioned Drawable to set as background for this spinner**.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When disabled -->
<item android:state_enabled="false"
android:drawable="#drawable/your_disabled_spinner_drawable" />
<!-- When selected -->
<item android:state_pressed="true"
android:drawable="#drawable/your_selected_spinner_drawable" />
<!-- When not selected-->
<item
android:drawable="#drawable/your_default_spinner_drawable" />
</selector>
You will have to create a custom layout for the spinner. I think the following XML might give you an idea.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="3dip">
<TextView
android:id="#+id/number"
android:padding="3dip"
android:layout_marginTop="2dip"
android:layout_marginLeft="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Just use GIMP as your image editor and change background color and border with a color you like.
For example, I did this image by editing an existing one I found on the Internet: http://sdrv.ms/1lRkTbG