How to create the view in android? - java

Can someone tell me how should i create the above view here via xml or java coding in android?
This is what i have tried so far... But the view just seems to look too plain without any pictures by the side of each string as shown in the above link? What should i do to get the sort of more professional view?
final String [] items = new String []{"Details", "Delete File"};
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("File Options");
builder.setItems(items, new OnClickListener() {
#Override
public void onClick(DialogInterface arg0, int arg1) {
// TODO Auto-generated method stub
if(arg1 == 0)
{
startActivity(new Intent(getApplicationContext(), DialogBox.class));
}
else
{
deleteFile();
}
}
});
builder.create().show();

You can check this code
This to show the dialog and code for each button,as we do in onCreate.
private void showRules() {
final Dialog ruleDialog = new Dialog(this);
ruleDialog.setContentView(R.layout.ruledialog);
Button cancelbtn = (Button)ruleDialog.findViewById(R.id.cancelbtn);
//cancelbtn.setOnClickListener(this);
cancelbtn.setOnClickListener(new OnClickListener() {
public void onClick(View arg0) {
ruleDialog.dismiss();
}
});
ruleDialog.setCancelable(true);
ruleDialog.show();
//dialog.setTitle("How");
}
This the xml that I have use for it,
<?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">
<TextView
android:id="#+id/dialogHead"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="#string/dialogHead"
android:paddingBottom="20px"
android:layout_alignParentTop="true"
/>
<Button
android:id="#+id/cancelbtn"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/ic_cancel"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:paddingRight="3px"
android:paddingTop="3px"
/>
<ScrollView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_below="#id/dialogHead"
>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/dialogBody"
/>
</ScrollView>
</RelativeLayout>
I hope this will help you.

see here: http://developer.android.com/guide/topics/ui/dialogs.html#CustomDialog you can create your own layout and define what ever you'd like. as for professionalism - thats in the eye of the beholder.
Edit:
so don't use your string array to set your text.
create a layout that has a TextView ImageView TextView. use the layout inflator to inflate the view. find the 1st textview and setText("Details") (if you didn't do it statically in the xml)
find the second textview and setText("Delete") (if you didn't do it statically in the xml)
find the image and setImageResource (if you didn't do it statically in the xml)
set the builders view to your layout.
oh and maybe add some buttons with onclick listeners to do your stuff. or use an alertdialogbuilder.

Related

How do I make a Dialog Fragment's background invisible?

I used youtuber Coding in Flow's method to create a custom dialog. I've been trying all day to make the dialog's background transparent. I've used every single method I've found online. Non worked.
Here's how it goes:
First here's the Dialog layout layout_dialog.xml :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:background="#drawable/dialog_background">
<!-- The contents of the Dialog go here -->
</RelativeLayout>
<ImageView
android:id="#+id/iconImageView2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="0dp"
android:background="?attr/actionBarItemBackground"
android:scaleType="fitCenter"
app:srcCompat="#android:mipmap/sym_def_app_icon" />
</RelativeLayout>
Here's the Dialog class:
public class DialogBrightness extends AppCompatDialogFragment {
//declare whatever variables here
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
LayoutInflater inflater = getActivity().getLayoutInflater();
View view = inflater.inflate(R.layout.layout_dialog, null);
builder.setView(view)
.setTitle("Login")
.setNegativeButton("cancel", new DialogInterface.OnClickListener() {
#Override
public void onClick(DialogInterface dialogInterface, int i) {
}
})
.setPositiveButton("ok", new DialogInterface.OnClickListener() {
#Override
public void onClick(DialogInterface dialogInterface, int i) {
//get whatever values
listener.apply(//values);
}
});
//findViewById for your dialog contents here
return builder.create();
}
public interface DialogBrightnessListener {
void apply(//values);
}
}
And here's the Dialog being called from the Main activity:
DialogBrightness dialogBrightness = new DialogBrightness();
dialogBrightness.show(getSupportFragmentManager(), "Brightness Dialog");
This is how the Dialog appears:
I'm trying to make the top white part invisible. Nothing works!
Try this:
put the code below in the onCreateDialog:
// set the dialog background to transparent
getDialog().getWindow().setBackgroundDrawable(newColorDrawable(Color.TRANSPARENT));
// remove background dim
getDialog().getWindow().setDimAmount(0);
You can design the layout like following. There is an extra layout, but in case of dialogs, it will help
Try this:
set the background color of the parent layout to:
android:background="#android:color/transparent"
like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:background="#drawable/dialog_background">
<!-- The contents of the Dialog go here -->
</RelativeLayout>
<ImageView
android:id="#+id/iconImageView2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="0dp"
android:background="?attr/actionBarItemBackground"
android:scaleType="fitCenter"
app:srcCompat="#android:mipmap/sym_def_app_icon" />
</RelativeLayout>

Views are not reflecting any changes whatsoever, when done programmatically

The basic view hierarchy is this:
secondActivity
linearLayout(LinearLayout)
constLayout(ConstraintLayout)
textbox(TextView)
image(ImageView)
image2
image3
...
The textbox TextView has visibility GONE, and goal is to make it VISIBLE on clicking other visible siblings, change some colors and text, and when clicked again it must be invisible again and reverse all changes.
Cant understand whatever it is that am missing. I have checked many older projects in which I did the same thing and cant find any visible differences as to why this code is not working now.
secondActivity.java
public class secondActivity extends Activity {
public boolean isTextBoxHidden;
public ConstraintLayout constLayout;
public TextView textbox;
#Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
constLayout = findViewById(R.id.constLayout);
textbox = findViewById(R.id.textbox);
isTextBoxHidden = false;
// SETTING UP LISTENER
View.OnClickListener clickListener = new View.OnClickListener() {
#Override
public void onClick(View v) {
if(!isTextBoxHidden) {
constLayout.setBackgroundColor(Color.BLACK); //setting color on previously
v.setBackgroundColor(Color.BLACK); //setting color on visible view
textbox.setText("whatever");
textbox.setVisibility(View.VISIBLE); //was gone
isTextBoxHidden = true;
}
else {
textbox.setVisibility(View.GONE); //hide again
constLayout.setBackgroundColor(Color.WHITE);
v.setBackgroundColor(Color.WHITE);
isTextBoxHidden = false;
}
}
};
// INSERTING LISTENERS into all children
for(int i=0; i<constLayout.getChildCount(); i++) {
constLayout.getChildAt(i).setOnClickListener(clickListener);
}
}
}
activity_second.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".secondActivity">
<android.support.constraint.ConstraintLayout
android:id="#+id/constLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<TextView
android:id="#+id/textbox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="example"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageButton
android:id="#+id/image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/example"
android:clickable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<!--few more clones of the first imageButton-->
</android.support.constraint.ConstraintLayout>
</LinearLayout>
I can't see where you're setting textbox reference, so maybe that's a clue.
Edit:
Did compiled that example you have provided and everything works correctly, but i assume that [...] gone again for good meant you probably want this to be one shot action so instead of boolean just use Boolean and compare it to null.
Edit:
On the second thought you can just remove isTextBoxHidden = false; in else branch

findViewById is returning null inside run method (android)

for some reason the run method here has no trouble setting the content view, but when i try to retrieve the button from the xml it returns null and does not allow me to set the onclick listener. my code is listed here below.
v.post(new Runnable() {
#Override
public void run() {
setContentView(R.layout.win);
Button submit = (Button) findViewById(R.id.submit);
submit.setOnClickListener(new View.OnClickListener(){
#Override
public void onClick(View v){
HighScoresHelper scores = new HighScoresHelper("HighScoreV2.txt", GameActivity.this);
scores.addScore("Test", Math.round((frame/FPS) *100)/100.0);
startActivity(new Intent(GameActivity.this, HighScores.class));
finish();
}
});
}
});
and yes, the spelling and everything is all correct and matches up with the xml, here is the xml code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="YOU WON!!!, enter in your name and click submit"
android:id="#+id/textView3" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/name" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:id="#+id/submit"
android:layout_gravity="center_horizontal" />
</LinearLayout>
Thank you
So, the problem was that I was calling this inside the inner-class to the activity. What I needed to do was inflate the view and save it as a global variable. I did all of this inside the onCreate method.
LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
winView = inflater.inflate(R.layout.win, null);
submit = (Button) winView.findViewById(R.id.submitScore);
submit.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
and then inside my inner class I called
v.post(new Runnable() {
#Override
public void run() {
setContentView(winView);
}
});
to change the view when necessary, v was the inner-class instance variable of the main class.
Just to clarify, main class - "GameActivity" and the inner-class was labeled "OurView". v was a global varible of type OurView inside the class GameActivity. I would post the entire class, but its 300+ lines long.

How can I create a popup menu to be shown when I click on an item in listview(android studio)?

I'm new to android developing...
I've created a listview using Strings and Array Adapter in setting.java:
public class setting extends Activity {
ListView listView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.setting_layout);
String[] settingOptions = new String[]{getString(R.string.settingInterface), getString(R.string.settingLanguages), getString(R.string.settingInfo)};
ArrayAdapter<String> adapter = new ArrayAdapter<String>
(this, android.R.layout.simple_list_item_1, android.R.id.text1, settingOptions);
listView = (ListView) findViewById(R.id.listView);
listView.setAdapter(adapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
}
});
}
}
and this is my setting_layout.xml:
<?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">
<ListView
android:id="#+id/listView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
setting_layout Activity(listView)
I want to create a popup menu for Languages item that when I click on it,shows some other languages translations.
I've created a string.xml in other languages but I don't know how to use it in popup menu.
1:How can I make a popup menu shown when I click on Languages item?
2:How to put other languages in popup menu?
Thanks in advance
for pop up you can create a dialog using dialog builder, it can be a custom one(xml layout), or can be created dynamically (programmatically using java)
check out this code for a pop up view :)
for example I have this function that I call inside the onClick:
private void showFlavorDialog(){
AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(context);
View promptView;
LayoutInflater layoutInflater = LayoutInflater.from(myActivity.this); //this gets the custom layout inflater
promptView = layoutInflater.inflate(R.layout.dialog_flavors_ar, null); // here you put the custom xml leyout name
final EditText editText = (EditText) promptView.findViewById(R.id.editText_note); //my layout has an edit text and button in it and I want to use it, so call the findviewbyid
Button add_note = (Button) promptView.findViewById(R.id.button_note);
editText.setImeOptions(EditorInfo.IME_FLAG_NO_EXTRACT_UI); //this removes full screen keyboard, so the keyboard doesnt take the whole screen.
add_note.setOnClickListener(new View.OnClickListener() { //onClick for the button
#Override
public void onClick(View v) {
otherNote_b = true;
flavor = editText.getText().toString();
new httpSetFlavor().execute();
alertDialogFL.cancel();
}
});
if (selectedflavorNameEn.size() > 1) {
flavorsGrid = (GridView) promptView.findViewById(R.id.gridView_flavors); // I also have a gridview in the layout
flavorsGridAdapter adapter = new flavorsGridAdapter(OrderActivityAr.this,
selectedflavorNameEn);
flavorsGrid.setAdapter(adapter); // this is a custom adapter for the grid which you wont need
}
alertDialogBuilder.setTitle(R.string.flavor_ar); //title of the popup window
alertDialogBuilder.setView(promptView); //set view of the popup to your custom view
alertDialogBuilder.setCancelable(true); //this makes the popup cancelable on back button pressed
alertDialogBuilder.setPositiveButton(R.string.delete_flavor_ar, new DialogInterface.OnClickListener() { //this is a button for the popup if you want one
public void onClick(DialogInterface dialog, int id) {
deleteFlavor = true;
new httpSetFlavor().execute();
}
});
alertDialogBuilder.setNegativeButton(R.string.back_ar, new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
dialog.cancel();
}
});
AlertDialog alertDialogFL = alertDialogBuilder.create(); //here you create the dialog using its builder
alertDialogFL.show(); // show it on screen
}
and this is my custom layout xml file, so you can just put any layout you want in it and use it later :)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<GridView
android:layout_width="wrap_content"
android:layout_height="150dp"
android:id="#+id/gridView_flavors"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:numColumns="3"
android:horizontalSpacing="2dp"
android:verticalSpacing="2dp" />
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/gridView_flavors"
android:layout_marginTop="5dp">
<Button
style="?android:attr/buttonStyleSmall"
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:layout_width="wrap_content"
android:singleLine="true"
android:layout_height="wrap_content"
android:text="#string/add_note_ar"
android:id="#+id/button_note"
android:layout_below="#+id/gridView_flavors"
android:textSize="20dp"
android:background="#drawable/button_plain_green"
android:textColor="#000"
android:layout_weight="0" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editText_note"
android:layout_below="#+id/gridView_flavors"
android:layout_toRightOf="#+id/other_text"
android:layout_marginTop="2dp"
android:layout_toLeftOf="#+id/button_note"
android:layout_toStartOf="#+id/button_note"
android:layout_weight="1"
android:gravity="right" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/other_note_ar"
android:id="#+id/other_text"
android:layout_below="#+id/gridView_flavors"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignBottom="#+id/editText_note"
android:gravity="center"
android:textSize="20dp"
android:layout_weight="0"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp" />
<com.andexert.library.RippleView
android:layout_width="wrap_content"
android:id="#+id/ripple_button"
android:layout_weight="0"
android:layout_height="wrap_content"></com.andexert.library.RippleView>
</TableRow>
</RelativeLayout>
this is the look of the layout:
and in your case you can use listview in the custom layout as well :) but with custom list item for example a radio button.
as for displaying other languages saved in xml
well you should have them saved in res/strings.xml
you can use the strings in an array of strings like this:
String strArray[]={
getResources().getString(R.string.string1),
getResources().getString(R.string.string2),
getResources().getString(R.string.string3),
getResources().getString(R.string.string4)
};

Android adding simple animations while setvisibility(view.Gone)

I have designed a simple layout.I have finished the design without animation, but now I want to add animations when textview click event and I don't know how to use it.
Did my xml design looks good or not?
Any suggestions would be appreciated.
My XML
<?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="fill_parent"
android:longClickable="false"
android:orientation="vertical"
android:weightSum="16" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#00DDA0"
android:layout_weight="3" >
</LinearLayout>
<TextView
android:id="#+id/Information1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:text="Child Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="#+id/layout1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="8.5"
android:background="#BBBBBB"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="#+id/Information2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Parent Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="#+id/layout2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="#+id/Information3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Siblings"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="#+id/layout3"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="#+id/Information4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Teacher Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="#+id/layout4"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="#+id/textView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="#+id/Information5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Grade Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="#+id/layout5"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="#+id/textView5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView" />
</LinearLayout>
<TextView
android:id="#+id/Information6"
android:layout_width="match_parent"
android:layout_height="0dp"
android:text="Health Information"
android:background="#0390BE"
android:layout_weight="0.75"
android:textColor="#FFFFFF"
android:layout_gravity="center|fill_horizontal"/>
<LinearLayout
android:id="#+id/layout6"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#BBBBBB"
android:layout_weight="8.5" >
<TextView
android:id="#+id/textView5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="TextView"
android:layout_weight="8.5" />
</LinearLayout>
</LinearLayout>
My java
public class Certify_Info extends Activity {
private static TextView tv2,tv3,tv5,tv6,tv4,tv1;
private static LinearLayout l1,l2,l3,l4,l5,l6;
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_certify__info);
tv1=(TextView) findViewById(R.id.Information1);
tv2=(TextView) findViewById(R.id.Information2);
tv3=(TextView) findViewById(R.id.Information3);
tv4=(TextView) findViewById(R.id.Information4);
tv5=(TextView) findViewById(R.id.Information5);
tv6=(TextView) findViewById(R.id.Information6);
l1=(LinearLayout) findViewById(R.id.layout1);
l2=(LinearLayout) findViewById(R.id.layout2);
l3=(LinearLayout) findViewById(R.id.layout3);
l4=(LinearLayout) findViewById(R.id.layout4);
l5=(LinearLayout) findViewById(R.id.layout5);
l6=(LinearLayout) findViewById(R.id.layout6);
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
tv1.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l1.setVisibility(View.VISIBLE);
}
});
tv2.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l2.setVisibility(View.VISIBLE);
}
});
tv3.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l2.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l3.setVisibility(View.VISIBLE);
}
});
tv4.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l4.setVisibility(View.VISIBLE);
}
});
tv5.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l6.setVisibility(View.GONE);
l5.setVisibility(View.VISIBLE);
}
});
tv6.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
l1.setVisibility(View.GONE);
l2.setVisibility(View.GONE);
l3.setVisibility(View.GONE);
l4.setVisibility(View.GONE);
l5.setVisibility(View.GONE);
l6.setVisibility(View.VISIBLE);
}
});
}
}
You can do two things to add animations, first you can let android animate layout changes for you. That way every time you change something in the layout like changing view visibility or view positions android will automatically create fade/transition animations. To use that set
android:animateLayoutChanges="true"
on the root node in your layout.
Your second option would be to manually add animations. For this I suggest you use the new animation API introduced in Android 3.0 (Honeycomb). I can give you a few examples:
This fades out a View:
view.animate().alpha(0.0f);
This fades it back in:
view.animate().alpha(1.0f);
This moves a View down by its height:
view.animate().translationY(view.getHeight());
This returns the View to its starting position after it has been moved somewhere else:
view.animate().translationY(0);
You can also use setDuration() to set the duration of the animation. For example this fades out a View over a period of 2 seconds:
view.animate().alpha(0.0f).setDuration(2000);
And you can combine as many animations as you like, for example this fades out a View and moves it down at the same time over a period of 0.3 seconds:
view.animate()
.translationY(view.getHeight())
.alpha(0.0f)
.setDuration(300);
And you can also assign a listener to the animation and react to all kinds of events. Like when the animation starts, when it ends or repeats etc. By using the abstract class AnimatorListenerAdapter you don't have to implement all callbacks of AnimatorListener at once but only those you need. This makes the code more readable. For example the following code fades out a View moves it down by its height over a period of 0.3 seconds (300 milliseconds) and when the animation is done its visibility is set to View.GONE.
view.animate()
.translationY(view.getHeight())
.alpha(0.0f)
.setDuration(300)
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
view.setVisibility(View.GONE);
}
});
The easiest way to animate Visibility changes is use Transition API which available in support (androidx) package. Just call TransitionManager.beginDelayedTransition method then change visibility of the view. There are several default transitions like Fade, Slide.
import androidx.transition.TransitionManager;
import androidx.transition.Transition;
import androidx.transition.Fade;
private void toggle() {
Transition transition = new Fade();
transition.setDuration(600);
transition.addTarget(R.id.image);
TransitionManager.beginDelayedTransition(parent, transition);
image.setVisibility(show ? View.VISIBLE : View.GONE);
}
Where parent is parent ViewGroup of animated view. Result:
Here is result with Slide transition:
import androidx.transition.Slide;
Transition transition = new Slide(Gravity.BOTTOM);
It is easy to write custom transition if you need something different. Here is example with CircularRevealTransition which I wrote in another answer. It shows and hide view with CircularReveal animation.
Transition transition = new CircularRevealTransition();
android:animateLayoutChanges="true" option does same thing, it just uses AutoTransition as transition.
Try adding this line to the xml parent layout
android:animateLayoutChanges="true"
Your layout will look like this
<?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="match_parent"
android:animateLayoutChanges="true"
android:longClickable="false"
android:orientation="vertical"
android:weightSum="16">
.......other code here
</LinearLayout>
Please check this link. Which will allow animations like L2R, R2L, T2B, B2T animations.
This code shows animation from left to right
TranslateAnimation animate = new TranslateAnimation(0,view.getWidth(),0,0);
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
view.setVisibility(View.GONE);
if you want to do it from R2L then use
TranslateAnimation animate = new TranslateAnimation(0,-view.getWidth(),0,0);
for top to bottom as
TranslateAnimation animate = new TranslateAnimation(0,0,0,view.getHeight());
and vice a versa..
Base on #ashakirov answer, here is my extension to show/hide view with fade animation
fun View.fadeVisibility(visibility: Int, duration: Long = 400) {
val transition: Transition = Fade()
transition.duration = duration
transition.addTarget(this)
TransitionManager.beginDelayedTransition(this.parent as ViewGroup, transition)
this.visibility = visibility
}
Example using
view.fadeVisibility(View.VISIBLE)
view.fadeVisibility(View.GONE, 2000)
I was able to show/hide a menu this way:
MenuView.java (extends FrameLayout)
private final int ANIMATION_DURATION = 500;
public void showMenu()
{
setVisibility(View.VISIBLE);
animate()
.alpha(1f)
.setDuration(ANIMATION_DURATION)
.setListener(null);
}
private void hideMenu()
{
animate()
.alpha(0f)
.setDuration(ANIMATION_DURATION)
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
setVisibility(View.GONE);
}
});
}
Source
Based on the answer of #Xaver Kapeller I figured out a way to create scroll animation when new views appear on the screen (and also animation to hide them).
It goes from this state:
Button
Last Button
to
Button
Button 1
Button 2
Button 3
Button 4
Last Button
and viceversa.
So, when the user clicks on the first button, the elements "Button 1", "Button 2", "Button 3" and "Button 4" will appear using fade animation and the element "Last Button" will move down till end. The height of the layout will change as well, allowing using scroll view properly.
This is the code to show elements with animation:
private void showElements() {
// Precondition
if (areElementsVisible()) {
Log.w(TAG, "The view is already visible. Nothing to do here");
return;
}
// Animate the hidden linear layout as visible and set
// the alpha as 0.0. Otherwise the animation won't be shown
mHiddenLinearLayout.setVisibility(View.VISIBLE);
mHiddenLinearLayout.setAlpha(0.0f);
mHiddenLinearLayout
.animate()
.setDuration(ANIMATION_TRANSITION_TIME)
.alpha(1.0f)
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
updateShowElementsButton();
mHiddenLinearLayout.animate().setListener(null);
}
})
;
mLastButton
.animate()
.setDuration(ANIMATION_TRANSITION_TIME)
.translationY(mHiddenLinearLayoutHeight);
// Update the high of all the elements relativeLayout
LayoutParams layoutParams = mAllElementsRelativeLayout.getLayoutParams();
// TODO: Add vertical margins
layoutParams.height = mLastButton.getHeight() + mHiddenLinearLayoutHeight;
}
and this is the code to hide elements of the animation:
private void hideElements() {
// Precondition
if (!areElementsVisible()) {
Log.w(TAG, "The view is already non-visible. Nothing to do here");
return;
}
// Animate the hidden linear layout as visible and set
mHiddenLinearLayout
.animate()
.setDuration(ANIMATION_TRANSITION_TIME)
.alpha(0.0f)
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
Log.v(TAG, "Animation ended. Set the view as gone");
super.onAnimationEnd(animation);
mHiddenLinearLayout.setVisibility(View.GONE);
// Hack: Remove the listener. So it won't be executed when
// any other animation on this view is executed
mHiddenLinearLayout.animate().setListener(null);
updateShowElementsButton();
}
})
;
mLastButton
.animate()
.setDuration(ANIMATION_TRANSITION_TIME)
.translationY(0);
// Update the high of all the elements relativeLayout
LayoutParams layoutParams = mAllElementsRelativeLayout.getLayoutParams();
// TODO: Add vertical margins
layoutParams.height = mLastButton.getHeight();
}
Note there is a simple hack on the method to hide the animation. On the animation listener mHiddenLinearLayout, I had to remove the listener itself by using:
mHiddenLinearLayout.animate().setListener(null);
This is because once an animation listener is attached to an view, the next time when any animation is executed in this view, the listener will be executed as well. This might be a bug in the animation listener.
The source code of the project is on GitHub:
https://github.com/jiahaoliuliu/ViewsAnimated
Happy coding!
Update: For any listener attached to the views, it should be removed after the animation ends. This is done by using
view.animate().setListener(null);
My solution extension
fun View.slideVisibility(visibility: Boolean, durationTime: Long = 300) {
val transition = Slide(Gravity.BOTTOM)
transition.apply {
duration = durationTime
addTarget(this#slideVisibility)
}
TransitionManager.beginDelayedTransition(this.parent as ViewGroup, transition)
this.isVisible = visibility
}
Use:
textView.slideVisibility(true)
Find the below code to make visible the view in Circuler reveal, if you send true, it'll get Invisible/Gone. If you send false, it'll get visible. anyView is the view you're going to visible/hide, it could be any view (Layouts, Buttons etc)
private fun toggle(flag: Boolean, anyView: View) {
if (flag) {
val cx = anyView.width / 2
val cy = anyView.height / 2
val initialRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()
val anim = ViewAnimationUtils.createCircularReveal(anyView, cx, cy, initialRadius, 0f)
anim.addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator) {
super.onAnimationEnd(animation)
anyView.visibility = View.INVISIBLE
}
})
anim.start()
} else {
val cx = anyView.width / 2
val cy = anyView.height / 2
val finalRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()
val anim = ViewAnimationUtils.createCircularReveal(anyView, cx, cy, 0f, finalRadius)
anyView.visibility = View.VISIBLE
anim.start()
}
}

Categories

Resources