Develop Reference

Implement a squared, colored and round-edged button in Android?

I am trying to design an Android app with a button driven user interface. This means that there are a few buttons, with different colors and icons, and each one does its task.
I've tried to implement this using standard, and custom styled buttons, but they did not have a nice UI, and they do not support icons inside them.
I tried with fabs but fabs are not meant for this purpose, and I'm looking for something slightly rounded, more like that:
That would be perfect because the buttons are colored, squared with rounded edges, they contain an icon and they have a label underneath them.
Any advice / sample to replicate this same kind of view?
For the color, you just have to pick from the palette a light and dark variant.
Putting the text label under the button is pretty straightforward, but I have no idea about how to code in XML something like that.

If I were you, I would do it like this
Here is the button layout. ic_baseline_folder_24 is a vector asset generated using Android Studio
<LinearLayout
android:id="#+id/folder_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/bg_image_button"
android:padding="12dp"
android:src="#drawable/ic_baseline_folder_24" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Folders"
android:textColor="#CCC" />
</LinearLayout>
bg_image_button.xml is defined like this. It can be extended to support different states:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape >
<solid android:color="#7B0800"/>
<corners android:radius="8dp" />
</shape>
</item>
</selector>
Finally, set the click action handler:
val binding = ActivityMainBinding.inflate(layoutInflater)
binding.folderButton.setOnClickListener {
// do something
}
It results like this:

What I would do is this. I used CardView to create a button with rounded edges. CardView is great and easy to use and you can later easily change anything you want.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/btn_settings"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="100dp"
android:layout_height="100dp"
app:cardCornerRadius="20dp"
app:cardBackgroundColor="#android:color/holo_blue_bright">
<ImageView
android:layout_width="52dp"
android:layout_height="52dp"
android:src="#drawable/ic_settings"
android:layout_gravity="center"/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings" />
</LinearLayout>
With this code you get this:
Now just in your code type:
LinearLayout btn_settings = findViewById(R.id.btn_settings);
btn_settings.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//do something
}
});
Now just inside onClick enter your code to handle clicks on the button. Make more layouts like this and add them to whatever view you want. GridView, RecylcerView, etc to generate more buttons like in your photo and handle clicks for each of them.

Android - custom listview and highlight

I've tried a lot to get things working, but without any sort of success.
I have implemented a custom listview that displays 3 textviews, added the custom adapter of my hands and things work correctly, I've done the registerForContextMenu(View of listview) and when I press items displayed, it shows a perfect blue highlight around my item, and when I press it long the same happens and then it shows me the menu. Okay. Then I added a button inside my custom listview displaying one color if certain things happen, displaying another one viceversa. After I modified my custom adapter to include my button and setting the change-color logic, if I long press my items I have no more highlight around, but the context menu is preserved.
Why is this happening?
I tried a lot searching on Stack and Google, but every solution I found was not working with my app. I tried also to insert a custom selector, it works fine when I exclude the button from my listview design, I suppose the button is the culprit, but I can't find out a way to resolve this problem. I suppose is something related to the "background" - "drawable" of the button, but I am here to ask you some help.
Thanks in advance.
Some code if it can interest you:
listviewdesign.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_centerVertical="true"
android:gravity="center"
/>
<TextView
android:id="#+id/text2"
android:singleLine="false"
android:maxEms="8"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:layout_toLeftOf="#+id/text3"
android:layout_toRightOf="#+id/text1"
android:layout_centerVertical="true"
android:gravity="center"
/>
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:layout_marginRight="5dp"
android:layout_toLeftOf="#+id/btn1"
/>
<Button
android:id="#+id/btn1"
android:layout_width="10px"
android:layout_height="10px"
android:layout_alignParentRight="true"
android:layout_marginTop="20dp"
/>
</RelativeLayout>
mainactivitylayout.xml:
<LinearLayout ...>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#android:id/list"
(when I add selector: android:listSelector="#xml/myselector")
android:clickable="false"
/>
</LinearLayout>
And my selector for completeness:
<selector xmlns:android="http://schemas.android.com/apk/res/android"
class="class of project">
<item android:state_pressed="true"
android:drawable="#drawable/pressed"/>
<item android:state_focused="true"
android:drawable="#drawable/focused"/>
<item android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/normal"/>
<item android:drawable="#drawable/normal"/>
</selector>
Where those drawable items are correctly setup such as:
<resources>
<drawable name="pressed">#FF00A5FF</drawable>
<drawable name="focused">#FF0000FF</drawable>
<drawable name="normal">#00000000</drawable>
</resources>
Thanks!

You need to place "myselector.xml" in drawable folder.
android:listSelector="#xml/myselector"
this line should be
android:listSelector="#drawable/myselector"

Change Button Image on Button click

Selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_call_active_big" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="#drawable/btn_call_normal_big"/>
</selector>
And on button background
<ImageButton
android:id="#+id/btnPhone"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:background="#drawable/button_background"
android:src="#drawable/btn_call_normal_big" />
Please advice on above . where i am doing wrong

you have to use the selector in place of the png file. Change
android:src="#drawable/btn_call_normal_big"
with
android:src="#drawable/nome_of_selector"

boolean isPressed=false
button.setOnClickListener(buttonListener);
OnClickListener buttonListener= new OnClickListener() {
#Override
public void onClick(View v) {
if(isPressed){
button.setBackgroundResource(R.drawable.icon1);
}else{
button.setBackgroundResource(R.drawable.icon2);
}
isPressed=!isPressed;
}
};
Hope it will help you.
Also check below link
http://www.mkyong.com/android/android-imagebutton-selector-example/
this also might help you

Use this:
<ImageButton
android:id="#+id/btnPhone"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:src="#drawable/selector" />

Remove src attribute and change the background attribute value to your selector file name.
<ImageButton
android:id="#+id/btnPhone"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:background="#drawable/Selector"
/>

Making buttons that look like tabs in android

I want this kind of look. They don't seem like tabs so I believe they are buttons.
I am able to acheive the similar type with toggle button by keeping a selector in drawable.
<ToggleButton
android:id="#+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/custom_selector"
android:textOn=" Button1 Button2"
android:textOff=" Button1 Button2" />
But they have only two values and by clicking on the selected tab gets the other selected and the present one unselected. But I want exactly like tab. So can someone please help me achieve it? Thanks in advance.

You have to create selector for all button and use RadioGroup with selector background and null button..
Follow #Andru answer for create Selector..
Below is RadioGroup code.
<RadioGroup
android:id="#+id/rdogrp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:gravity="center"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#drawable/btn1Selector"
android:button="#null"
android:checked="true"
android:gravity="center" />
<RadioButton
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#drawable/btn2Selector"
android:button="#null"
android:gravity="center" />
<RadioButton
android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#drawable/btn3Selector"
android:button="#null"
android:gravity="center" />
<RadioButton
android:id="#+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#drawable/btn4Selector"
android:button="#null"
android:gravity="center" />
</RadioGroup>
here is sample code for btn1Selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn1_selected" android:state_checked="true" />
<item android:drawable="#drawable/btn1_normal" android:state_checked="false"/>
</selector>

you can do something like this, instead of toggle button use normal buttons.
if "Data" button clicked do like this
data(View v)
{
databtn.setBackgroundResource(R.drawable.image1);
w_chartbtn.setBackgroundResource(R.drawable.image2);
H_chartbtn.setBackgroundResource(R.drawable.image2);
}
if "H-chart" button clicked
H_chart(View v)
{
databtn.setBackgroundResource(R.drawable.image2);
w_chartbtn.setBackgroundResource(R.drawable.image2);
H_chartbtn.setBackgroundResource(R.drawable.image1);
}

Use simple button instead of toogle button. And set background like this:
I am giving example for 1 button:
android:background="#drawable/data_button_select_state"
And add a xml file in your 'drawable' folder named data_button_select_state:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/data_image_selected_state"
android:state_selected="true" />
<item android:drawable="#drawable/data_image_selected_state"
android:state_pressed="true" />
<item android:drawable="#drawable/data_image_without_selected" />
</selector>
Now add code in java file like this:
when data button clicked:
data_button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
data_button.setActivated(true);
H_chart_button.setActivated(false);
w_chart_button.setActivated(false);
hc_chart_button.setActivated(false);
}
});
change other button like this as well. This will might help you...

Setting imageView background issue with selector

I have a problem with setting the click event in a list view item.
This is how the list is shown in the default situation:
This is how it looks when I press the red image (the red turns to blue):
and this is when I press the list item:
As you can see, the red image turns to blue also, Even though I didn't pressed the button. What I want is that when I press the list item there is no change to the red image, and it remains the same.
I tried to add android:drawSelectorOnTop="true" to xml file in listview section, but it didn't work. I also tried to fix it with the selector parameters, still with no success.
I uploaded some code, the next sections are in different xml files, so don't get confused.
EDIT: I want to use the OS item list background color and not my own color with android:listSelector, because that one I've already do.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/blue" />
<item android:drawable="#color/red"/>
</selector>
-----------------------new file--------------------------------
<ListView android:id="#+id/list_theme"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#id/contbtn_themelist"
android:stackFromBottom="false"
android:transcriptMode="disabled"/>
-----------------------new file--------------------------------
<RelativeLayout android:id="#+id/edit_back"
android:layout_width="80dp"
android:layout_height="77dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:background="#drawable/edit_skin_selector2" >
<ImageView
android:id="#+id/skinEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitXY"
android:src="#android:drawable/ic_menu_edit"
android:layout_centerInParent="true" />
</RelativeLayout>
EDIT: row.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:paddingBottom="5dip"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:paddingTop="5dip" >
<ImageView
android:id="#+id/itemlist_checkedd"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:src="#drawable/ic_checkitem" />
<ImageView
android:id="#+id/skinpreview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/itemlist_checkedd"
android:scaleType="fitXY" />
<RelativeLayout android:id="#+id/edit_back"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/edit_skin_selector2"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/skinEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#android:drawable/ic_menu_edit"
android:layout_centerInParent="true" />
</RelativeLayout>
<ImageView
android:id="#+id/separator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="5dip"
android:layout_toLeftOf="#id/edit_back"
android:src="#drawable/separator" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="2dip"
android:layout_marginRight="15dip"
android:layout_toLeftOf="#id/separator"
android:layout_toRightOf="#id/skinpreview"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Any help will be great, Thanks.

I encountered this issue too, I solved it using the tecnique here:
http://android.cyrilmottier.com/?p=525
Look at the paragraph "Don't press everything!"

You should try using android:duplicateParentState="false" to indicate not to use the parent's drawable state for its child.
<ImageView
android:id="#+id/skinEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitXY"
android:src="#android:drawable/ic_menu_edit"
android:layout_centerInParent="true"
android:duplicateParentState="false"
/>
Update
Make your button's immediate parent non-clickable, i.e. add android:clickable="false" to it in row.xml and see if that fixes the problem. Now the click on item will not change the button state. But the click on button should still work I guess.
update
<ImageButton
android:id="#+id/skinEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#android:drawable/ic_menu_edit"
android:scaleType="center"
android:background="#android:drawable/state_redblue_drawable"
android:padding=10dp
android:clickable="true"/>

I found this solution before.. I dont have the link, but you has to do this. Create a custom class for the linearlayout that contains your botton, then override the setPressed state to dont do anything;
public class UnpresseableLinearLayout extends LinearLayout
{
public UnpresseableLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public void setPressed(boolean pressed)
{
// Do nothing here. Specifically, do not propagate this message along
// to our children so they do not incorrectly display a pressed state
// just because one of their ancestors got pressed.
}
}
this will solve the problem because the android:duplicateParentState="false" will not work in this case.
Replace then your linearlayout in your xml with this one, that cannot receive press actions
Edit:
Sorry, i just saw that you are using RelativeLayout.. but i supose that is the same.

try making imageView clickable...
<ImageView
android:id="#+id/skinEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitXY"
android:src="#android:drawable/ic_menu_edit"
android:layout_centerInParent="true"
android:focussable="false"
android:focussableInTouchMode="false"
android:clickable="true" />
or..
change selector state to
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#color/blue" />
<item android:drawable="#color/red"/>
</selector>

Ok. First of all Sorry for the Late reply.
Before going on solution let see what i get from your question.
You want is, when you click on List-items then that red image not convert in to Blue and if user click on the Red Image then it should be convert in to the Red. But not with whole list-Items right ???
If is it so, then there is nothing to do more.
Don't put selector. Selector is basically for, whenever you want to change the color of the background while you click on that particular view.
And yes if you want to change the color of the RedImage while user click on it then again don't use selector there. But Just change the Color of that Image during run time.
As like:
#Override
public void onClick(View view) {
YOUR_VIEW.setBackgroundColor(0xffff0000);
}
Hope it will help you. If its not work as what you want then let me know.
i will like to help you.
Enjoy.:)

What are you using to connect the list a simpleAdapter. To accomplish what you are saying to will need a new class that extends BaseAdapter and change the background image on the getView event on that class.
Then on you main activity you can set an onlistItemClick to handle the click events for the list items.