Set Buttons over ImageView - Android - android

I have a FlowLayout where a user can add tastes, like, music, games, sport, etc. After user informs what he wants to add, he clicks a button to display it in a flow layout, so, this process must be done programmatically. Create an image, set drawable and size. I did some of it. But now I need to display an imageview along with a button so a user can remove added taste. I think creating this process in xml will not help, because user may not add any tastes.
What I've already done:
What I must do:
Method I'm using:
ImageView iconLike = new ImageView(Register30.this);
iconLike.setImageResource(getIconLike(like));
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(getSizeIconLike());
lp.setMargins(5,5,5,5);
iconLike.setLayoutParams(lp);
Like newLike = new Like();
newLike.setIcon(iconLike);
newLike.setGenderFather(null);
newLike.setGenderChild(null);
newLike.setName(like);
likes.add(newLike);
likesContainer.addView(iconLike);

Add in the xml 2 texts view with background of a circle
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/taste"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/remove"
android:layout_width="width you want"
android:layout_height="height you want"
android:gravity="center"
android:layout_gravity="end"
android:background="#drawable/circle_background_with
_your_color"
android:visibility="gone"/>
<TextView
android:id="#+id/add"
android:layout_width="width you want"
android:layout_height="height you want"
android:gravity="center"
android:layout_gravity="start"
android:background="#drawable/circle_background_with
_your_color"
android:visibility="gone"/>
</FrameLayout>
when the user long clicks on a taste just change the visibility of the texts views. You need to set in the tastes adapter to every taste a longclick function. In this function you toggle between the states.

Related

Android: i want to change color of my Image View

i want to change color of my imageView.
pasted the code below:-
firstly i pasted the footer.xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#f1eeee"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fHome"
android:background="#drawable/colorchanged"
android:src="#drawable/home" /> <!-- your image here -->
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fAttendence"
android:src="#drawable/att" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fTarget"
android:src="#drawable/target" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fReport"
android:src="#drawable/report" />
</LinearLayout>
pasted .png which i used in this file
pasted .png which i used in this file
when i clicked on the imageView i want to set Blue color on it.
can anyone help me for this?
You can use a ColorFilter like below to be triggered on view click:
yourImageView.setColorFilter(getResources().getColor(R.color.your_color), PorterDuff.Mode.MULTIPLY);
Note that this will actually change the state of yourImageView instance so, you'll need a variable to keep track of that.
A way to do this is to edit through photoshop those two .png.
The currently "grey" versions could have for example the name
home_button_unselected.png
Edit this image and change from grey to blue or the color you want, save it as
home_button_selected.png
Import them to your project, so now you have those two files. (for each image)
1) Set the default state, i guess that could be "home_button_unselected.png" through xml like this :
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/fHome"
android:src="#drawable/home_button_unselected" />
Also in an image view you shouldn't have android:background and android:src working together. If you want to know the difference between those two you could google it.
2) Then in your .java file let's say MainActivity.java you have to put an on click listener to that button, that means make it do something when the user clicks.
Declare your button(ImageView) as global variable ( before onCreate() )
private ImageView mHomeButton;
Find the View (in your onCreate() )
mHomeButton = (ImageView) findViewById(R.id.fHome);
fHome is the id of the imageView if you look at the xml above -> "android:id="#+id/fHome"
Set the OnClickListener so when user presses the button the image it changes from "home_button_unselected" to "home_button_selected". (inside onCreate() )
.
mHomeButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
mHomeButton.setImageResource(R.Drawable.home_button_selected); // setting the image to the selected one ( which is blue/selected)
}
});
If you have other buttons you should check first which is selected and if another button is selected, then all other buttons should change to the unselected png

Android how to create textview one over another

I am developing an Android application with a textview updated by one event and at the same place where the textview is present, I want 1 more textview so that other event can update this new textview. How do i achieve in having 1 textview on other
I'm assuming that you're asking how you could have two TextView components overlaying each other. There are a few way you could do this.
Frame Layout
Use a Frame Layout to determine the area in which the TextViews will occupy. Like this...
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/tv1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/tv2"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</FrameLayout>
Credit goes to https://stackoverflow.com/a/2634059/3769032
Create a Compound View
This is fairly in-depth for the type of question you are asking. CompoundViews are a collection of typical views, such as a TextView, that you can create if you plan on re-using the view frequently.
If you plan on overlaying the TextViews often, I recommend this. So check out this tutorial.
Use only one TextView
Having two overlayed textviews can become messy really quickly. If you have two pieces of text overlayed is becomes impossible to read. So since the content of your textview is based on an event. Use the same event listener in your java code to determine the content of your TextViews.
For example, in your on click listener you might have...
TextView tv1 = (TextView) findViewByID(R.id.tv1);
public void onClick(View view){
if (first_event_happened){
tv1.setText("One event happened");
} else if(second_event_happened){
tv1.setText("A different event happened");
}
}
These conditions might mean checking the type of view that was clicked, or checking its id (what I usually do). Please comment if things aren't clear. Some clarification on your question would be helpful too.
use relative layout and also you can set text on exiting textView like when event one triggered textView.setText(your text) and same when event two triggered textView.setText(your text)
There is no trick to this. Just put two TextViews in a RelativeLayout at the same position and they will draw overtop of one another. Like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first textview"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second textview"/>
</RelativeLayout>
You can make each one visible or invisible by using TextView.setVisibility(...) or you can set their text with TextView.setText(...).

Text over button on Android like in the Apollo Music Player

I'm a novice on the Android platform when it cames to development. However I'm going further from basic Views and I'd like to create something like the following buttons:
This is what I want to achieve. I first tought that a Button with a custom background would have sufficed. However I don't know any way to make that small darker line with the text inside. All of the image reacts like a button and gets highlighted when you touch it.
Can you help me?
If you look at the source code for Apollo you can see ArtistsFragment is not made up of Buttons but rather an inflated RelativeLayout created by a subclass of the SimpleCursorAdapter class.
Since any view can have an OnClickListener you can make any create a layout to look however you want and still have it act like a button:
// Or load it as an item from an existing layout.
View myView = this.getLayoutInflater().inflate(R.layout.anything);
myView.setOnClickListener(new OnClickListener(){
public void onClick(View arg0) {
// Do stuff.
}
});
Every segment with an image could be a Layout with the background set to the appropriate image. Then, you just put the button inside of the layout.
You have to use Framelayout or RelativeLayout. For example:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="#drawable/your_drawabele" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_gravity="center_horizontal|bottom"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:text="your_text" />
</FrameLayout>

How to use layout weight when you want to toggle one of 2 visible views

I have a LinearLayout that will have a cancel button and a progress bar, where the progress bar is 70% and the cancel button is 30%, like so:
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ProgressBar
android:id="#+id/uploadProgressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_weight=".7"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
/>
<Button
android:id="#+id/uploadCancelButton"
style="#style/TitleBarButton"
android:layout_width="0dp"
android:layout_weight=".3"
android:layout_height="wrap_content"
android:text="#string/cancel_btn"
android:layout_gravity="center_vertical"
/>
</LinearLayout>
This works fine, however I realized that actually I either want to show the progress bar or a text view, where the text view could be a small status message (if say the upload failed).
I tried putting a TextView in the the above LinearLayout and having its visibility set to "gone" by default and with the weight set the same as the progress bar. In the code I would only set either the progress bar to visible or the text view, and the other I would set to gone. However the android system appeared to contribute the invisible items weight to the total. I even tried using android:weightSum="1.0" in the LinearLayout xml attributes but that then my button was no longer visible as even though the text was gone, it took space.
ViewFlipper is what you are looking for.
It is very simple to use. You put the views you want to toggle inside the ViewFlipper exactly the same way like you would place them within a Layout inside XML. Then from code you call setDisplayedChild() on the ViewFlipper object containing your views. The parameter of this method is the index of the view that you want to be shown.

Laying out subviews in a layout programmatically

I'm trying to layout views in a relative layout on a tablet, much like a bookshelf. There will be so many across, then a new row is created.
My initial state looks like this:
<ScrollView
android:layout_marginTop="150sp"
android:layout_marginLeft="50sp"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id="#+id/user_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!-- Add User Avatar -->
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/user_frame" />
<ImageView
android:id="#+id/demo_image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/add_user"
android:layout_marginLeft="10px" />
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/user_name_background"
android:layout_marginLeft="10px" />
<TextView
android:id="#+id/user_name"
android:layout_width="180px"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:gravity="center_horizontal"
android:text="Add New User" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
I'm fetching records from a database, and for each record I need to place a version of the "add user avatar" section as seen above. I'd like to do 5, then wrap to a new row.
My initial idea was to use a layout inflater and add the views programmatically, using RelativeLayout.LayoutParams to set the layout_toRightOf values.
There must be an easier way though. I've seen lots of applications using the "bookshelf" metaphor.
There are a few options I can think of.
Instead of using a relative layout, why not use LinearLayouts with the horizontal attribute?
Using a TableLayout, much like the LinearLayout
Use a ListView with a custom adapter to fill five 'Add User Avatar's' per ListRow
Laying out views programmatically is fairly simple. I do this for all of my activities / views. I love Android's XML layout concept but find that as soon as the views become at all dynamic based on external data (such as your database) then it gets too complex.
I choose what my outermost layout will be and then only instantiate that layout in the XML. Then in my activity I find the outer layout using the normal find by id call and then use a sequence of add(View) method calls to add my dynamically created views or layouts as needed.
You will need to take into account different screen orientations, pixel densities and sizes. Device Independent Pixels will become your friend. For example, to create an image view, you would load the bitmap, figure out how much to resize it (if needed) and then set it as the drawable for a new ImageView instance, that you then add to the layout.
Sounds like your outer layout will be a scroll view with a vertical linear layout inside, that then has a horizontal layout for each "shelf" that then have up to five image views for each "book"

Categories

Resources