Add indicator to button background - java

I am trying to add an indicator to my button.
similar to this: Image
How can I do so? I am able to make a solid background but I don't know how to add the small blue block part. Any help is appreciated.
Thanks

Add this radiobutton in your xml file
<RadioButton
android:id="#+id/home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/home_selector"
android:button="#android:color/transparent"
android:checked="true" />
<RadioButton
android:id="#+id/favourite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/fav_selector"
android:button="#android:color/transparent"
android:checked="true" />
....
and now you can create a selector for every different radio button as you wish
home_selector.xml
<item
android:drawable="#drawable/home_selected"
android:state_checked="true" />
<item
android:drawable="#drawable/home_normal" />
fav_selector.xml
<item
android:drawable="#drawable/fav_selected"
android:state_checked="true" />
<item
android:drawable="#drawable/fav_normal" />
Like this you can create selectors for which ever radio button you may want

You can do it like this
By adding a view with your color above the button
<LinearLayout
android:layout_width="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:layout_height="wrap_content">
<View
android:layout_width="match_parent"
android:layout_height="3dp"
android:visibility="visible"
android:background="#000000" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher" />
</LinearLayout>
Set its visibility on its click

Related

MaterialButton does not get rounded when changing radius

I can't tell if this is an issue with the material library or from my end.
I'm trying to show two buttons aligned horizontally. However, the first one is showing as it's supposed to show but the other one is not showing as expected.
Here's how the buttons look in Android Studio's layout editor: (expected behavior)
And this is how it shows on a mobile device: (wrong behavior)
My XML is like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="17dp">
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_share"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginStart="12dp"
android:layout_marginEnd="7dp"
android:layout_marginBottom="10dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:text="#string/share_btn_txt"
android:textColor="#FFFFFF"
android:textSize="14sp"
app:backgroundTint="#424242"
app:cornerRadius="#dimen/buttons_corners_radius"
app:elevation="5dp"
app:fontFamily="#font/whitney"
app:icon="#drawable/round_share_white_48dp"
app:iconGravity="textStart"
app:rippleColor="#2D2D2D" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_download"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginStart="7dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="10dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:text="#string/download_btn_txt"
android:textColor="#FFFFFF"
android:textSize="14sp"
app:backgroundTint="#color/colorPrimary"
app:cornerRadius="#dimen/buttons_corners_radius"
app:elevation="5dp"
app:fontFamily="#font/whitney"
app:icon="#drawable/round_get_app_white_48dp"
app:iconGravity="textStart"
app:rippleColor="#color/colorPrimaryDark" />
</RelativeLayout>
I'm avoiding using the weight attribute. (tested it as well but still getting the same behavior).
If you guys have any idea how to solve this issue is appreciated.
You can create an xml drawable file for MaterialButton.
btn_drawble.xml =>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#2D2D2D">
<item android:id="#android:id/background">
<shape android:shape="rectangle" >
<corners android:radius="12dp" />
<gradient
android:startColor="#color/color_blue"
android:endColor="#color/color_blue"
android:angle="0"/>
</shape>
</item>
</ripple>
And Set background of button created xml file =>
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_download"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginStart="7dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="10dp"
android:text="#string/download_btn_txt"
android:textColor="#FFFFFF"
android:textSize="14sp"
app:elevation="5dp"
app:fontFamily="#font/whitney"
android:background="#drawable/btn_drawble"
app:icon="#drawable/round_share_white_48dp"
app:iconGravity="textStart"/>
You'll need to use a material theme.
Set the parent of your app of your AppTheme to a material theme ex: Theme.MaterialComponents.Light.NoActionBar.
Material components require a material theme as parent to work correctly
It seems like it was my fault, I didn't notice that I was changing the button shape dynamically.
Unfortunately, I can't delete this question because Stackoverflow doesn't allow me.
:(

How to create custom Table Layout with headers and grid lines

I spent almost the whole weekend to figure out how to create a table structure with headers for columns and rows and include ImageButtons in the cells of the table. The grid lines should be visible.
I tried lot of different layouts... Grid, Linear, Structured, CoordinatorLayout .... view nested GridViews and so on. But couldn't figure out how to accomplish something like this?
Some kind of nested layout magic?
Create a drawable cell_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle" >
<stroke android:width="0.5dp" android:color="#4E4E4E"/>
</shape>
In your styles.xml define your custom cell style
<style name="Cell">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_weight">1</item>
<item name="android:background">#drawable/cell_shape</item>
<item name="android:gravity">center</item>
<item name="android:paddingTop">8dp</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:textSize">12sp</item>
</style>
table_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<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">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow>
<TextView
style="#style/Cell"
android:text="\"
android:textStyle="bold" />
<TextView
style="#style/Cell"
android:text="My Title 1"
android:textStyle="bold" />
<TextView
style="#style/Cell"
android:text="My Title 2"
android:textStyle="bold" />
<TextView
style="#style/Cell"
android:text="My Title 3"
android:textStyle="bold" />
</TableRow>
<TableRow>
<TextView
style="#style/Cell"
android:text="Arg 1"
android:textStyle="bold" />
<ImageButton
style="#style/Cell"
android:src="#mipmap/ic_launcher" />
<ImageButton
style="#style/Cell"
android:src="#mipmap/ic_launcher" />
<ImageButton
style="#style/Cell"
android:src="#mipmap/ic_launcher" />
</TableRow>
<!--Next Rows...-->
</TableLayout>
<!--//..-->
</RelativeLayout>

Custom Dialogue with Keyboard Android

I am trying to use custom dialogue in one of my android application for edit text. I want show dialogue above the keyboard. I am getting half dialogue hidden below keyboard. I am unable to find solution for it. Let me know if someone expert here can help for solve this puzzle.
My java code for dialogue is like below
final Dialog dialog = new Dialog(NameArt.this,R.style.Theme_Dialog);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.lyt_dialog_updatename);
//dialog.getWindow().setLayout(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
dialog.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);
and XML is like below
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/edstikertext"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_above="#+id/btncancel"
android:hint="Enter text hear" />
<Button
android:id="#+id/btncancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginRight="5dp"
android:layout_alignParentBottom="true"
android:layout_marginEnd="5dp"
android:background="#drawable/boder"
android:layout_marginTop="5dp"
android:text=" Cancel " />
<Button
android:background="#drawable/boder"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:id="#+id/btnok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:layout_marginTop="5dp"
android:text=" OK " />
</RelativeLayout>
and my style is like below
<style name="Theme_Dialog" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowMinWidthMajor">100%</item>
<item name="android:windowMinWidthMinor">100%</item>
</style>
I want dialogue above keyboard, but its getting full height. Thanks
I have just solved it by add this line before show dialogue
dialog.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
Thanks

Background image does not seem to fill entire screen

The below picture shows that there are vertical "lines" running down the sides of each side of the screen. The background image seems to fill most of the screen but then there are these lines and the picture does not line up. See where I marked these lines with the black arrows. There seems to be no horizontal lines at the top and bottom of the screen. I cannot find any reason for this.
Below is some relevant code that might be where the problem is residing.
AndroidManifest.xml
<activity
android:label="#string/app_name"
android:name=".MainMenu"
android:screenOrientation="portrait"
android:theme="#android:style/Theme.Translucent.NoTitleBar" />
Here is a section of my styles.xml that is referenced in my AndroidManifest.xml.
<style name="Theme.Transparent" parent="android:Theme">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
EDIT
Just to clarify, this problem occurs on all the layouts, not just the one below.
mainmenu.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/relativelayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingBottom="5dp"
android:paddingTop="5dp" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:paddingTop="75dp"
android:textSize="60sp" />
<LinearLayout
android:id="#+id/linearlayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical"
android:fillViewport="true"
android:paddingTop="175dp" >
<TextView
android:id="#+id/playBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="12dp"
android:textSize="30sp"
android:background="#color/transparent"
android:textColor="#color/onclicktextviewhighlight" />
<TextView
android:id="#+id/highscoresBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="12dp"
android:textSize="30sp"
android:background="#color/transparent"
android:textColor="#color/onclicktextviewhighlight" />
<TextView
android:id="#+id/optionsBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="30sp"
android:background="#color/transparent"
android:textColor="#color/onclicktextviewhighlight" />
</LinearLayout>
</RelativeLayout>
because you have padding in your layout
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingBottom="5dp"
android:paddingTop="5dp"
The padding. Like tyczj said. Also there IS a horizontal line

how to change highlight color on editText field

Below is a screen shot of a custom edit text field i have in my android app. While you are type a given word, the text for the word you are currently typing highlights in grey and shows the text as black, until you hit the space bar at which time the text turns white as expected. Is there a way to change the color of the highlight and the text that is highlighted?
my edit text xml looks like this
<EditText
android:id="#+id/searchField"
android:layout_width="160dp"
android:layout_height="44dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="60dp"
android:background="#null"
android:cursorVisible="true"
android:ems="10"
android:textColor="#color/white"
android:textColorHighlight ="#ff0000"
android:textCursorDrawable="#null" >
</EditText>
the whole layout
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!--
As the main content view, the view below consumes the entire
space available using match_parent in both dimensions.
-->
<RelativeLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff" >
<fragment
android:id="#+id/map"
android:name="com.sapientnitro.inhouse.drop.components.DRPCustomMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageButton
android:id="#+id/btn_center_local"
android:layout_width="44dp"
android:layout_height="44dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="50dp"
android:layout_marginRight="15dp"
android:background="#drawable/btn_center_on_local_up" />
<RelativeLayout
android:id="#+id/top_bar"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#ddffffff" >
<ImageButton
android:id="#+id/btn_menu"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="12dp"
android:layout_toLeftOf="#+id/btn_search"
android:background="#drawable/btn_menu_up" />
<ImageButton
android:id="#+id/btn_create"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_marginLeft="12dp"
android:layout_toRightOf="#+id/btn_search"
android:background="#drawable/btn_create_up" />
<ImageButton
android:id="#+id/btn_search"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:background="#drawable/btn_search_up" />
</RelativeLayout>
<LinearLayout
android:id="#+id/search"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ddffffff"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/search_bar"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#dd00cccb" >
<ImageView
android:id="#+id/searchBox"
android:layout_width="238dp"
android:layout_height="44dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:src="#drawable/search_field" />
<ImageView
android:id="#+id/clear"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="220dp"
android:src="#drawable/btn_clear_field" />
<EditText
android:id="#+id/searchField"
android:layout_width="160dp"
android:layout_height="44dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="60dp"
android:background="#null"
android:cursorVisible="true"
android:ems="10"
android:textColor="#color/white"
android:textColorHighlight ="#color/white"
android:textCursorDrawable="#null" >
</EditText>
<TextView
android:id="#+id/cancelBTN"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:textColor="#color/white"
android:textSize="22dp"
android:text="#string/cancel" />
</RelativeLayout>
<ScrollView
android:id="#+id/search_results_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:paddingTop="2dp"
android:scrollbars="none" >
<LinearLayout
android:id="#+id/search_results_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/header_artists"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#dd00cccb" />
<HorizontalScrollView
android:id="#+id/results_artists"
android:layout_width="match_parent"
android:layout_height="150dp" />
<RelativeLayout
android:id="#+id/header_followers"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#dd00cccb" />
<HorizontalScrollView
android:id="#+id/results_followers"
android:layout_width="match_parent"
android:layout_height="150dp" />
<RelativeLayout
android:id="#+id/header_places"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#dd00cccb" />
<HorizontalScrollView
android:id="#+id/results_places"
android:layout_width="match_parent"
android:layout_height="150dp" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</RelativeLayout>
<ListView
android:id="#+id/left_drawer"
android:layout_width="255dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#dd00cccb"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:listSelector="#drawable/selector_transparent" />
<ListView
android:id="#+id/right_drawer"
android:layout_width="255dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#dd00cccb"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:listSelector="#drawable/selector_transparent" />
</android.support.v4.widget.DrawerLayout>
I was able to change the highlight of my edit text by adding this line to my themes.xml file:
<item name="android:textColorHighlight">#color/m_highlight_blue</item>
Simple, just use TextHightLight Property in XML Mode
android:textColorHighlight="#ff0000"
or add this in your theme
<item name="android:textColorHighlight">"#ff0000"</item>
[Image attached here is because for a comment below]
and when i do, this is how it looks
And if you have to change the Marker handle then you should change
<item name="colorAccent">#color/edittext_handle_selection</item>
<item name="android:textColorHighlight">#color/edittext_selection</item>
In code:
et.setHighlightColor(ContextCompat.getColor(getContext(), R.color.highlight));
You should use android:textColorHighlight in the EditText element in you layout xml file
In material design you will get the default ascent color in style so the all text selection and other theme would be according to that color. You can change this ascent color in following way -
Go to the style.xml and change the following color -
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorAccent">#color/colorAccent</item> // Replace this color with your own choice
</style>
you should use a selector to change text colors`:
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Pressed State -->
<item android:state_pressed="true"
android:color="#FF0000" />
<!-- Focused State -->
<item android:state_focused="true"
android:color="#FF0000" />
<!-- Default State -->
<item android:color="#FFFFFF" />
And then set your textColor property to #drawable/selector_name
use this code,might be its help you
android:textColorHighlight="your color code"
well there's a simpler way to do it...I was here to look for an answer, but im answering my own answer.
If you go to the attractions place go all the way down to the letter T and there should be an TextColorHighlight but if you don't see it the there should be ones
that aren't fully shown so go hover over them and then the full word will show
the showed be little color icons beside them you should press them and select your color. And then go to your code and enter TextColorHighlight Press Tab and then enter the name of the color, then run it!
Hope that this worked out for you, sorry I couldn't add any pictures of how'd it would of looked. Oh and maybe you're wondering why didn't it automatically do that then have me do it? Now im wondering that too, ill try to see what i can do

Categories