Is it possible to add multiple TextView inside one ImageButton with colour background ?
The core need is to have a button with the action text on it, and a subtext nearby explaining the action or giving other information related to the action. This subtext can vary from time to time.
Considering this requirement, one solution is to have a normal button and a subtext below, not clickable. But I find it messy. A better approach which I like is, on iOS for instance, to have a clickable UIView containing the action as bold text and the explanation as light text. See the image bellow containing 4 buttons :
How to achieve the same on Android with Java ? The closest I can have is to have an ImageButton bellow a TextView, and it does not sound right.
Is possible to nest TextViews inside an ImageButton ? If not, what is the best alternative ?
I hope this may be useful it explains how to position a textView within and in front of a imageView in the XML.
TextView inside of ImageButton/ImageView XML - Android Dev
Obviously make sure each view has a unique id/name which you can assign as shown here on this link
Sorry I cannot explain specifically myself but it has been a while since developing in Java for Android.
I dont know why you want this behaviour but you can make a container for your views and add a click listener to the whole view. you can also use it anywhere.
an example of this would be.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:background="#drawable/container_background"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="0.33"
/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="0.33"
/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="0.33"
/>
add a selector background
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#color/text_pressed" />
<item android:color="#color/normal" />
</selector>
and the listener
findViewById(R.id.container).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
}
});
Related
i am trying to achieve a behavior where user click an arrow that can reveal more content such as more description abort something. It can a recycler view as well where more things can be added dynamically and the list will expand.Right now i do not have any idea how it can be achieved. I tried searching on the internet for solutions and saw a widget called spinner but i do not think it can help me achieve my desired behavior. YouTube does apply similar behavior as well
Below are the pictures which will make my question clear. Any help would be appreciated Thank You
Before clicking the arrow pic 1
After clicking the arrow pic 2
In your layout.xml include a nested layout that includes a Textview that holds the additional information and set android:visibility="gone". Use an OnClickListener to the button that is meant to expand the view. In the onClick method check if the view is visible or not. If it's not you make it visible, otherwise you set it to gone again.
layout:
...
<ImageView
android:id="#+id/chevron"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/chevron"
/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="your additional info here"
android:visibility="gone"/>
...
In your Activity:
ImageView yourView = findViewById(R.id.chevron);
..
yourView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (view.getVisibility() == View.Gone) {
view.setVisibility(View.Visible);
} else {
view.setVisibility(View.Gone);
}
}
});
I used for this purpose ExpandbleLayout from this github library
ExpandableLayout. In readMe of the github repo you can find example of using it, you can get similar experience with as in your example, without need to manually create View for arrow and handling the animation.
You can use it like this :
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.github.aakira.expandablelayout.ExpandableRelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:ael_expanded="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text goes here"
android:textSize="28sp" />
</com.github.aakira.expandablelayout.ExpandableRelativeLayout>
And in your java/kotlin code : do additional logic to expand/collapse call : expandableLayout.toggle();.
All the credit goes to the author of the library.
https://github.com/AAkira/ExpandableLayout
I'm working on an Android App which has a few (Next, Back, ... etc) Buttons which are all round and transparent and I use ImageButton for those Buttons, however the problem is there is always a white border around the Button (I use black background so it is very ugly) and the button never appears to be round is appears as some sort of a square-ish shape.
Here is what I tried so far :
Setting the background of the ImageButton in the activity_mypage.xml file to
android:background="#android:color/transparent"
and to
android:background="?android:selectableItemBackground"
and to
android:background="?android:selectableItemBackgroundBorderless"
even to
android:background="#null"
but nothing seems to work on the .xml side.
and I tried the following on the MyPage.java file :
myBtn.setBackgroundResource(0);
and also
myBtn.setBackground(null);
Nothing seems to work anything I do keeps resulting the same (although it removes a gray border from around the Button but none of them makes the Button completely transparent)
This is a screenshot of the button before applying any of above :
And this is a screenshot of the same Button after applying any of those attributes (doesn't really matter if I applied it only to the xml or only to the java file or to both because all results are the same):
This is my xml code for one of my Buttons in xml :
<ImageButton
android:id="#+id/my_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="26dp"
android:layout_marginEnd="37dp"
android:layout_marginRight="37dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#mipmap/my_btn"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintRight_creator="1"
android:background="#android:color/transparent"
/>
And here is the code for it in the .java file :
ImageButton myBtn= (ImageButton) findViewById(R.id.my_btn);
myBtn.setBackground(null);
myBtn.setBackgroundResource(0);
I'm really lost at this every result I found for this query has suggested one of the above methods but none of these seems to work for me..
Just change
android:background="#android:color/transparent"
to
android:background="#null"
Try with this
android:src="#mipmap/yourimage"
instead of
app:srcCompat="#mipmap/my_btn"
add this to your button
android:background="#drawable/template"
and create a file name it template in your drawable folder
and add this code to it
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:drawable="#drawable/btn2imagePressed"></item>
<item android:drawable="#drawable/btn1imageNotPressed"></item> </selector>
You can use ImageView instead of ImageButton, so background issue will not occur
<ImageView
android:id="#+id/my_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="26dp"
android:layout_marginEnd="37dp"
android:layout_marginRight="37dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:src="#mipmap/my_btn"
/>
So after reading some of the posted answers and playing around with the suggestions in my code I noticed that the icon was incorrectly loaded into my mipmap directory instead of drawables and that is because when I imported the icons I selected New -> Image Asset instead of Vector Asset which caused my 'icon' to lose its transparency ...
Thanks to everyone for their replies and answers.
I need to create a custom looking SearchView that opens when an ImageButton, that I already have in my MainActivity.xml, is pressed.
I would really appreciate if you could explain me how to do it, because all I could find on SO was either people not having a custom looking SearchView or having it permanently on their TitleBar which I do not have since I'm using the light.NoTitleBar theme.
This is what I would need it to look like, this is a design I made with photoshop:
You have mutliple ways to obtain what you are looking for in term of design.
A solution i use (wich may not be the best) is to put my EditText (your search field) in a FrameLayout, this way i can have a search button and delete text button overlapping my textView:
XML Example :
<FrameLayout
android:id="#+id/SearchTextInputLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:minWidth="100.0dp">
<EditText
android:id="#+id/SearchTextInput"
android:textColorHint="#layout/inputselector"
android:hint="Search terms here..."
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<Button
android:id="#+id/ClearSearchButton"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_gravity="end|center_vertical"
android:background="#android:drawable/ic_delete" />
</FrameLayout>
Ok so I finally figured out the source of my problem. After a bunch of tests and trying out different things I noticed that after I put the codes
button1.setEnabled(false);
button2.setEnabled(false);
button3.setEnabled(false);
button4.setEnabled(false);
in onCreateView, it would crash upon startup. This is in my menu1_Fragment.java and is my first fragment. In my class I start off by defining my buttons.
Button button1;
Button button2;
Button button3;
Button button4;
Then the first thing I do in onCreateView is run the function setButton();
public void setButton() {
button1 = (Button) rootview.findViewById(R.id.upgbutton);
button2 = (Button) rootview.findViewById(R.id.upgbutton1);
button3 = (Button) rootview.findViewById(R.id.upgbutton2);
button4 = (Button) rootview.findViewById(R.id.upgbutton3);
}
What happens here is that these buttons are actually in my menu2_layout.xml which is my second fragment but my rootview allows me to find it. Then after I defined my buttons right below I set all my buttons to false as seen in the first bit of code because I don't want the user to be clicking the buttons yet. This is where I found that it crashes upon start. Here is the code for my buttons.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="4">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/selector_state2_xml"
android:id="#+id/upgbutton"
android:layout_gravity="center_horizontal" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/selector_state3_xml"
android:id="#+id/upgbutton1"
android:layout_gravity="center_horizontal" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/selector_state4_xml"
android:id="#+id/upgbutton2"
android:layout_gravity="center_horizontal" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/selector_state5_xml"
android:id="#+id/upgbutton3"
android:layout_gravity="center_horizontal" />
</LinearLayout>
I gave all my buttons their own selector_state because that is what initially I thought the problem was. Here is the code for my selector.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button"></item>
<item android:drawable="#drawable/buttonclick" android:state_pressed="true"></item>
<item android:drawable="#drawable/buttongray" android:state_enabled="false"></item>
</selector>
If you can please help I have been stuck on this issue for a really long time and made more posts then I need to, but I just can't seem to solve it. Also I cannot access my logs as I am having technical issues which basically freeze my android studio when I try to click android monitor and my app is running.
If all this isn't enough I also posted on github
https://github.com/BeniReydman/Slide_Menu-Slide_Menu
I will try to solve as much questions as you may have, but I am new and this is my first App. I haven't even been doing this for over a week so please bear with it.
What happens here is that these buttons are actually in my
menu2_layout.xml which is my second fragment but my rootview allows me
to find it.
I would usually say post the error but this has thrown me,
rootview is menu1_layou.xml, the buttons are in menu2_layout.xml.
So you need to call findViewById() on the View that contains the ID's you are looking for.
Yes the code will compile and your IDE will not throw any errors but that doesn't mean it will work.
If you are still having problems after you resolve this then please post the crash logs.
I currently have a ListView which contains a Radiobutton and a TextView on each row. The ListView uses a custom adapter, and I've given the ListView the android:choiceMode="singleChoice" directive, to insure only a single element could be chosen from the list. However, I can't seem to highlight the selected item.
Here is the XML declaration of the ListView:
<ListView android:id="#+id/employees_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="2dp"
android:paddingRight="1dp"
android:background="#drawable/borderlist"
android:choiceMode="singleChoice"
android:listSelector="#48ad82"
android:layout_below="#id/employees_header">
</ListView>
Here is the XML declaration of the ListView's rows:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/row_employee"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="13dp"
android:paddingBottom="13dp"
android:descendantFocusability="blocksDescendants">
<RadioButton android:id="#+id/radio_employee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:focusable="false"/>
<TextView
android:id="#+id/text_employeename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_toRightOf="#id/radio_employee"
android:layout_marginTop="3dp"
android:layout_marginLeft="5dp"
android:focusable="false" />
</RelativeLayout>
Since I want to alternate the row's colors, I set a selector on each row by programming, I have this bit of code in the custom adapter's getView:
// Alternate row colors.
if (position % 2 == 0) {
v.setBackgroundResource(R.drawable.selector_list1);
} else {
v.setBackgroundResource(R.drawable.selector_list2);
}
Here is the XML declaration for selector_list1, selector_list2 is identical except for the for the first drawable:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false" android:state_pressed="false" android:drawable="#color/white" />
<item android:state_pressed="true" android:drawable="#color/lightgreen_listpressed" />
<item android:state_selected="true" android:state_pressed="false" android:drawable="#color/lightgreen_listpressed" />
</selector>
State_pressed works, but I tried using state_activated, state_selected, state_enabled, state_checked and nothing works out to change the color of the selected list item. Am I doing something wrong?
EDIT 1: If I simply throw my selectors out of the window (IE not use them), selection coloring works with only the android:listSelector="#48ad82" directive I have in the ListView declaration. Why doesn't this work with the selectors?
EDIT 2: Tried all the different states again, including state_focused when removing the listSelector directive entirely. Still no results.
EDIT 3: I suppose the issue is that the ListView itself allows the selection, the RelativeLayout view never really gets "selected" persay, thus setting the selector on it is useless. If that's the case, where and how am I supposed to set the selectors to have them do what I want them to do?
EDIT 4: I tried setting colors on the adapter based on this tutorial: http://eureka.ykyuen.info/2010/03/15/android-%E2%80%93-applying-alternate-row-color-in-listview-with-simpleadapter/ No results, I still don't get any selection color unless I call android:drawSelectorOnTop="true" which hides all the elements in the ListView element.
EDIT 5: I'm going to drop this for now and just remove the alternating colors altogether. None of the explanations I have found on StackOverflow or Google talk about this issue. The only way to make this "work" is to call android:drawSelectorOnTop="true", which does change the color of the element currently selected in the ListView, however, it hides everything in that one row.