How to make discrete progress/seek bar like stepper in android. Like we see in whatsapp status stories.
Although it is implemented by so many libraries out there, but i need to implement it without using libraries.
I use views in horizontal linear layout and divide it dynamically based on number of sections or number of status stories need to be shown.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/layout_views"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:orientation="horizontal"
android:padding="4dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="Click" />
</LinearLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
String TAG = "MainActivity";
Button mButton;
int x=0,height,width,numberOfSections;
LinearLayout layoutViews;
ArrayList<View> viewsList =new ArrayList<>();
#SuppressLint("ClickableViewAccessibility")
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//findviews
layoutViews = findViewById(R.id.layout_views);
mButton = (Button) findViewById(R.id.button);
//for getting dimensions of screen
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
height = displayMetrics.heightPixels;
width = displayMetrics.widthPixels;
//suppose we have to cut section into 4 parts
numberOfSections = 10;
width -= (16 + 16*numberOfSections); //reducing length of layout by 16dp from left and right and in between 16dp {in between*number of sections)
width /= numberOfSections;
for(int i=0;i<numberOfSections;i++){
View v = new View(this);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(width, 10);
params.setMargins(16,0,0,0); //giving 16dp internal margin between two views
v.setLayoutParams(params);
viewsList.add(v); //adding views in array list for changing color on click of button
v.setBackgroundColor(getResources().getColor(colorAccent));
layoutViews.addView(v);
}
//button onclick function
mButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
buttonClick();
}
});
}
public void buttonClick(){
viewsList.get(x).setBackgroundColor(getResources().getColor(colorPrimaryDark));
x++;
}
}
Voyella! You have made this dynamic story progress bar, although you can add transition animation in views.
Related
i am developing a roulette game for learning while my friend ask me to make spinning wheel shape from circle to oval. after changing shape of ImageView to an oval and trying to rotate ,it's height and width are swapping according to each 90-degree rotation. while height and width should not change as i need, following are codes i am using and screenshot attached
thanks for your time .
layout_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/iframe"
android:layout_centerInParent="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="150dp"
android:src="#drawable/wheel2min_300x300"
android:scaleType="fitXY"
android:id="#+id/wheel_image"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="25dp"/>
<ImageView
android:layout_width="50dp"
android:layout_height="40dp"
android:src="#drawable/target_147x300"
android:scaleType="fitXY"
android:id="#+id/wheel_pointer"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal"/>
</FrameLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="press to spin"
android:id="#+id/spin_button"
android:layout_below="#id/iframe"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private ImageView imageView;
private Button button;
int h,w;
CountDownTimer countDownTimer;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = findViewById(R.id.wheel_image);
button = findViewById(R.id.spin_button);
h=imageView.getHeight();
w = imageView.getWidth();
Random random = new Random();
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
button.setEnabled(false);
// reading random value between 10 to 30
int spin = random.nextInt(20)+10;
// since the wheel has 10 divisions, the
// rotation should be a multiple of
// 360/10 = 36 degrees
spin = spin * 36;
// timer for each degree movement
countDownTimer = new CountDownTimer(spin*20,1) {
#Override
public void onTick(long l) {
// rotate the wheel
float rotation = imageView.getRotation() + 2;
imageView.setRotation(rotation);
}
#Override
public void onFinish() {
// enabling the button again
button.setEnabled(true);
}
}.start();
}
});
}
UI i want even when rotation
Im trying to dynamicaly add buttons to a fragment, but they do not show.
This is the listCharacter.java:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_list_character, container, false);
context = view.getContext();
for (int i = 1; i <= 20; i++) {
LinearLayout layout = new LinearLayout(context);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
Button firstBtn = new Button(this.context);
firstBtn.setId(i);
final int id_ = firstBtn.getId();
/**
* The text is not updated(?)
*/
firstBtn.setText("button " + id_);
/**
* it does not add 20 button, might be on top of each other
*/
layout.addView(firstBtn, params);
firstBtn = view.findViewById(R.id.characterNameBtn);
firstBtn.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Toast.makeText(view.getContext(),
"Button clicked index = " + id_, Toast.LENGTH_SHORT)
.show();
Navigation.findNavController(view).navigate(R.id.action_listCharacter_to_loadCharacter);
}
});
}
return view;
}
And this is the fragment_list_character.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/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
tools:context=".listCharacter"
android:orientation="vertical">
<LinearLayout
android:id="#+id/list_character_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp">
<Button
android:id="#+id/characterNameBtn"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#66000000"
android:fontFamily="#font/main"
android:gravity="center"
android:padding="5dp"
android:text=""
android:textColor="#fff"
android:textSize="40sp"
/>
</LinearLayout>
</LinearLayout>
I dont get any error messages atm, but i cant see the buttons when i run the program.
The on click works and it says it has id 20.
You're adding the buttons to a LinearLayout that you are recreating each time through your loop.
for (int i = 1; i <= 20; i++) {
LinearLayout layout = new LinearLayout(context);
...
layout.addView(firstBtn, params)
....
}
layout is never added to the view that is returned. You will need to add the buttons to the view or to a child of the view that you return to see them on the screen. I think that there are a few other issues, but this would be the first one to address.
I'm doing an android application where I have to dynamically put a button inside the table row. The problem is that the button that I create is stretched as in the image below:
I also put some of the application code here below so you can understand better.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_punteggio);
showAlertDialog_modality(R.layout.dialog_change_modality);
final TableLayout tableLayout = findViewById(R.id.tableLayout);
final RelativeLayout relativeLayout = findViewById(R.id.relativeLayout);
final Button btn_settings = findViewById(R.id.btn_settings);
Bundle datipassati = getIntent().getExtras();
String player = datipassati.getString("players");
giocatore = player.split("%");
Log.d("TAG", "array: " + giocatore[0]);
for (int i = 0; i < giocatore.length; i++) {
punti[i] = 0;
TableRow tbrow = new TableRow(this);
final TextView t3v = new TextView(this);
txPunti[i] = t3v;
//------------------------- Textview Player
final TextView t1v = new TextView(this);
t1v.setText(giocatore[i].toUpperCase());
t1v.setTextColor(Color.BLACK);
t1v.setGravity(Gravity.CENTER);
t1v.setTextSize(20);
t1v.setWidth(400);
tbrow.addView(t1v);
//-------------------- BTN MENO
Button btnMeno = new Button(this);
btnMeno.setText("-");
btnMeno.setTextColor(Color.BLACK);
btnMeno.setGravity(Gravity.CENTER);
tbrow.addView(btnMeno);
btnMeno.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
removepoint(t3v);
}
});
// --------------------- TEXT VIEW PUNTI
t3v.setText(punti[i]+"");
t3v.setTextSize(25);
t3v.setMaxWidth(150);
t3v.setPadding(20,0,20,0);
t3v.setTypeface(t3v.getTypeface(), Typeface.BOLD);
t3v.setTextColor(Color.RED);
t3v.setGravity(Gravity.CENTER);
tbrow.addView(t3v);
//----------------------------- BTN PIU
Button btnPiu = new Button(this);
btnPiu.setBackground(ContextCompat.getDrawable(Activity_punteggio.this, R.drawable.ic_add_circle_black_24dp));
btnPiu.setTextColor(Color.BLACK);
btnPiu.setGravity(Gravity.CENTER);
tbrow.addView(btnPiu);
btnPiu.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
addPoint(t3v, t1v);
}
});
tableLayout.addView(tbrow);
}
btn_settings.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
showAlertDialog_modality(R.layout.dialog_change_modality);
}
});
}
Here's also the xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Activity_punteggio">
<Button
android:id="#+id/btn_settings"
android:layout_width="55dp"
android:layout_height="32dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:layout_marginRight="1dp"
android:background="#android:color/transparent"
android:drawableBottom="#drawable/ic_settings_black_24dp" />
<TextView
android:id="#+id/title_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="Chip-Chop"
android:textSize="25dp"
android:textStyle="bold|italic" />
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="80dp">
</TableLayout>
</RelativeLayout>
I hope you could help me.
Please check this solution. setImageResource is the method assign
image resource. Set background method is recommended for the
background of the button.
ImageButton btnPiu = new ImageButton(this);
btnPiu.setImageDrawable(ContextCompat.getDrawable(Activity_punteggio.this, R.drawable.ic_add_circle_black_24dp));
btnPiu.setTextColor(Color.BLACK);
btnPiu.setGravity(Gravity.CENTER);
tbrow.addView(btnPiu);
btnPiu.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
addPoint(t3v, t1v);
}
});
tableLayout.addView(tbrow);
I used ImageButton other than Button.
setImageDrawable
try to edit android:layout_height="32dp" to android:layout_height="55dp"
android:id="#+id/btn_settings"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:layout_marginRight="1dp"
android:background="#android:color/transparent"
android:drawableBottom="#drawable/ic_settings_black_24dp" />
I hope it will work with you .
THIS is make very complex coding, Make it simpler.Don't create whole row dynamically in FOR loop. Instead of that
First Create Separate XML for that row.
Write Below code and your row append into tablelayout.
for (int i = 0; i < giocatore.length; i++) {
View trView = LayoutInflater.from(getActivity()).inflate(R.layout.xmlID,null);
TextView lblGuestName;
lblGuestName = trView.findViewById(R.id.lbl);
lblGuestName.setText("Guest 1");
tableLayout.addView(trView);
}
This Way you easily configure any complex row in tablelayout. No need to make it dynamically.
Feel free to reply.
I am displaying image in the dialog box which contains the zoom view as well. Here image is placed and zoom is working fine without any issue but problem is image is always placed in the top of the dialog and if i scroll down it comes to middle then zoom happens. I dont want like this instead image should display in the middle and i need to do the zoom.
I am using dynamic imageview and for zoom using chrisbanes photoview library. If i remove the library the image is placed in the center.
#Override
public void onClick(View v) {
Dialog builder = new Dialog(listdisplay, android.R.style.Theme_Black_NoTitleBar_Fullscreen);
builder.requestWindowFeature(Window.FEATURE_NO_TITLE);
builder.getWindow().setBackgroundDrawable(
new ColorDrawable(Color.BLACK));
builder.setCanceledOnTouchOutside(false);
builder.setOnDismissListener(new DialogInterface.OnDismissListener() {
#Override
public void onDismiss(DialogInterface dialogInterface) {
//nothing;
}
});
ImageView imageView = new ImageView(listdisplay);
Glide.with(finalConvertView.getContext()).load(Limage).fitCenter()
.diskCacheStrategy(DiskCacheStrategy.ALL).into(imageView);
DisplayMetrics metrics = new DisplayMetrics();
listdisplay.getWindowManager().getDefaultDisplay().getMetrics(metrics);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(metrics.widthPixels,
metrics.heightPixels);
imageView.setLayoutParams(lp);
//imageView.setScaleType(ImageView.ScaleType.CENTER);
p = new PhotoViewAttacher(imageView);
builder.addContentView(imageView, lp);
builder.show();
}
});
i tried with scaletype for imageview as center but image is placed in top of the dialog.
Use Custom dialog for you own dialog design
final Dialog dialog = new Dialog(context);
dialog.setContentView(R.layout.custom);
dialog.setTitle("Title...");
// set the custom dialog components - text, image and button
TextView text = (TextView) dialog.findViewById(R.id.text);
text.setText("Android custom dialog example!");
ImageView image = (ImageView) dialog.findViewById(R.id.image);
image.setImageResource(R.drawable.ic_launcher);
Button dialogButton = (Button) dialog.findViewById(R.id.dialogButtonOK);
// if button is clicked, close the custom dialog
dialogButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
Layout:
<?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="fill_parent" >
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp" />
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#FFF"
android:layout_toRightOf="#+id/image"/>/>
<Button
android:id="#+id/dialogButtonOK"
android:layout_width="100px"
android:layout_height="wrap_content"
android:text=" Ok "
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_below="#+id/image"
/>
</RelativeLayout>
I'm trying to add this button
Button dalsi_akce = new Button(this);
dalsi_akce.setGravity(Gravity.CENTER);
RelativeLayout.LayoutParams p = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
dalsi_akce.setLayoutParams(p);
setContentView(dalsi_akce);
dalsi_akce.setText("test");
button appears but is full match parent. I have this button over whole display. How to set width and height of button?
You are setting the activity's content to be a button. That's why it spans over the whole activity and is simply wrong.
Instead create your activity's layout (an xml file) and set it with setContentView. Then you can programatically add a button to the content.
Example:
your activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ViewGroup viewGroup = (ViewGroup) findViewById(R.id.myLayout);
Button dalsi_akce = new Button(this);
dalsi_akce.setGravity(Gravity.CENTER);
RelativeLayout.LayoutParams p = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
dalsi_akce.setLayoutParams(p);
dalsi_akce.setText("test");
viewGroup.addView(dalsi_akce);
}
main.xml:
<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"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:id="#+id/myLayout"
tools:context=".MyActivity">
</RelativeLayout>
First of all you should define your content view as a RelativeLayout or LinearLayout, then add your button to this layout. Also You can another constructor of RelativeLayout.LayoutParams class:
RelativeLayout.LayoutParams p = new RelativeLayout.LayoutParams(200, 70);
actually you use this constructor :
public LayoutParams(int w, int h) {
super(w, h);
}
It would be easier if you just created your layout in layout.xml, and then customize your buttons as you wish in code. For example you could do the following:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id"#+id/left_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:text="Left"/>
</RelativeLayout>
This would give you one button that is only as big as its contents in the top right corner.