The official Twitter client for Android has a nice toolbar when you click on a message that lets you retweet, reply, etc. How can I re-create a toolbar like that?
For the LinearLayout approach, the code is simple, just add some weights and play around with what your looking for. This gives you a rough idea of the approach:
<EditText android:text="Example Layout"
android:layout_width="match_parent"
android:id="#+id/editText"
android:layout_height="wrap_content"
android:layout_weight="0.95"></EditText>
<LinearLayout
android:layout_width="fill_parent"
android:orientation="horizontal"
android:weightSum="1.0"
android:padding="1px"
android:layout_height="wrap_content"
android:layout_weight="0.05">
<ImageButton android:id="#+id/testButton1"
android:layout_weight="0.2"
android:background="#drawable/btn"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
<ImageButton android:id="#+id/testButton2"
android:layout_weight="0.2"
android:background="#drawable/btn"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<ImageButton android:id="#+id/testButton3"
android:layout_weight="0.2"
android:background="#drawable/btn"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<ImageButton android:id="#+id/testButton4"
android:layout_weight="0.2"
android:background="#drawable/btn"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<ImageButton android:id="#+id/testButton5"
android:layout_weight="0.2"
android:background="#drawable/btn"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
And results in something like this: http://i.stack.imgur.com/bShgb.png
You may also be happy with ActionBar as well, just watch the API requirements: http://developer.android.com/guide/topics/ui/actionbar.html
We call it QuickAction:
Find more about how to implement it here: http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/
Related
It has been 2 months since I was trying to implement this design and the animation but non of the Android development group or Anyone can't able to help me. I badly need help.
I have seen this but won't understandAnimated swap position of two buttons
This is what I actually want to do.
This is what I did:
Here XML code:
<?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:layout_width="match_parent"
android:layout_height="250dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:backgroundTint="#color/white"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:backgroundTint="#color/white"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:layout_marginTop="200dp"
android:background="#color/black"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
</LinearLayout>
What I did:
I tried using an MPAndroidChart for bar which will be handled. Shortly, I'm trying to create an algorithm visualizer project but I didn't find any good resource so that bar could be created and handled efficiently and easily. Badly I didn't even find any resource except customview on how he implemented It's completely hard to understand.
What I expect:
I want to know how to design that bar and how I can swap those bar or bars when the button clicks.
Thank you in advance.
I'm working with a class that extends Dialog. It should display a progressbar element. Sometimes there will be a message, sometimes there isn't.
The progressbar shows when there is no message but does not show when there is a message and I do not understand why.
Here is the layout code:
<TextView
android:id="#+id/dialog_message"
style="#style/arial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:layout_marginBottom="20dp"
android:text=""
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="18sp"
/>
<ProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:layout_marginTop="10dp"
android:visibility="gone" />
Here is the java:
public void progressDialog () {
if(this.message.getText().length() > 0){
message.setVisibility(View.VISIBLE);
}else{
message.setVisibility(View.GONE);
}
progress.setVisibility(View.VISIBLE);
leftButton.setVisibility(View.GONE);
rightButton.setVisibility(View.GONE);
}
When message is set GONE the progressbar shows, when message is set VISIBLE the progressbar does not show. I assume it is getting hidden by the message somehow.
I've tried moving it around in the layout as this question might suggest was needed ProgressBar not displaying, but to no avail.
How do I get the progressbar to always show when calling progressDialog()?
Edit***** Added full layout xml
<?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="wrap_content"
android:background="#drawable/dialog_background"
android:orientation="vertical">
<TextView
android:id="#+id/dialog_title"
style="#style/arialBold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:layout_marginTop="35dp"
android:ellipsize="end"
android:maxLines="1"
android:text="#string/waiting"
android:textColor="#android:color/white"
android:textSize="21sp" />
<TextView
android:id="#+id/dialog_message"
style="#style/arial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="30dp"
android:text=" "
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="20sp" />
<ProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:layout_marginTop="30dp"
android:visibility="gone" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/dialog_button_one"
style="#android:style/Widget.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/purple"
android:orientation="horizontal">
<TextView
android:id="#+id/dialog_button_one_text"
style="#style/arialBold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="#dimen/alert_dialog_button_margin_left_right"
android:layout_marginRight="#dimen/alert_dialog_button_margin_left_right"
android:layout_marginTop="10dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/white"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/dialog_button_two"
style="#android:style/Widget.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="20dp"
android:background="#color/purple"
android:orientation="horizontal">
<TextView
android:id="#+id/dialog_button_two_text"
style="#style/arialBold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="#dimen/alert_dialog_button_margin_left_right"
android:layout_marginRight="#dimen/alert_dialog_button_margin_left_right"
android:layout_marginTop="10dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/white"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I think you are using linear layout. So use Relative Layout instead of linear layout.
Add a parent constraint layout to your linear layout and move progress bar out of linear layout.
<constraint>
<linear/>
<progress/>
</constraint>
Some thing like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/dialog_background"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
>
<!-- Your complete layout -->
</LinearLayout>
<ProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:visibility="gone" />
</android.support.constraint.ConstraintLayout>
Ok, it looks like you use some wrong property for what you want, look:
android:layout_gravity="center" will put your TextView in center of the layout, but you also set it in your ProgressBar this mean that only one of then will be shown, it is only useful when you want to show one view at time, if you want to show both, try to remove one of this property.
Another thing, you set android:layout_margin="30dp" on TextView, so your progressBar will be far removed from TextView, which may also cause the invisibility of the ProgressBar, try 16dp.
<TextView
android:id="#+id/dialog_message"
style="#style/arial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" // remove here or in ProgressBar
android:layout_margin="16dp" // I just replace 30dp to 16dp
android:text=" "
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="20sp" />
EDIT - Another Answer
I edit your full XML code, replacing some margin with padding, and show the progressBar always. You can now hide/show the textView or progressbar, it should work.
I also replace some property, since I have not it here, make sure to add again. Hope it help you.
I recommend to use RelativeLayout to improve your UI. Below I show the current XML behavior.
When ProgressBar is showed
The full source code on link below, I am unable to paste the code here.
https://gist.github.com/pedromassango/a6dc213823b297931f1ef2e6b6954466
My problem is that I have four Buttons on the screen, I used a PercentageRelativeLayout to place them where I want them and everything was working great.
They even resize!
However, when they do resize, the Buttons start touching each other, and when I make it so they do not touch each other on a tablet, when I go back to a phone the space is too far apart.
Does anyone have any idea on how I could create a spacing that could work on all devices?
Because I thought that PercentageRelativeLayouts were the perfect solution to get things to resize, without using any LinearLayout and it is not working out the way I thought.
Below is my code
<android.support.percent.PercentRelativeLayout 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="#696969">
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="9%"
app:layout_marginTopPercent="21%"
android:background="#00ff0000"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/opt1"
android:scaleType="fitCenter"
android:id="#+id/purpleButton"
android:layout_align="#+id/option1"
android:longClickable="false" />
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="9%"
app:layout_marginTopPercent="58%"
android:background="#00ff0000"
android:layout_height="fill_parent"
android:src="#drawable/opt2"
android:scaleType="fitStart"
android:id="#+id/option2"
android:layout_width="fill_parent"
android:longClickable="false" />
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="50%"
app:layout_marginTopPercent="58%"
android:background="#00ff0000"
android:layout_height="fill_parent"
android:src="#drawable/opt3"
android:scaleType="fitStart"
android:id="#+id/option3"
android:layout_width="fill_parent"
android:longClickable="false" />
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="50%"
app:layout_marginTopPercent="21%"
android:background="#00ff0000"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/option4"
android:scaleType="fitCenter"
android:id="#+id/opt4"
android:longClickable="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Pick an Answer"
android:id="#+id/pickLabel"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="28dp"
app:layout_widthPercent="100%"
app:layout_heightPercent="7%"
app:layout_marginTopPercent="15%"
android:textColor="#ffffff"
android:textAlignment="center"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_widthPercent="100%"
app:layout_heightPercent="12%"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="00"
android:id="#+id/timeLabel"
android:textAlignment="gravity"
android:textSize="72sp"
android:gravity="center|center_vertical|center_horizontal" />
You can set android:weightSum="1" on the outside layout and android:layout_weight="0.25" for the inside layouts.
I have a "problem" with my application and I don't know what has happened.
I have this interface:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:orientation="vertical" >
<Button
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#color/white"
android:gravity="center"
android:textColor="#color/black" />
<TextView
android:id="#+id/detailServiceTxtPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="-35dp"
android:ellipsize="end"
android:gravity="center"
android:maxLength="50"
android:singleLine="true"
android:textColor="#color/black" />
</LinearLayout>
I get the field value from a web service and set text in java code:
m_txtPhone.setText(m_currentService.PassengerPhone);
In all the devices where I check it this is the result:
But I have a problem in with Samsung J5 (5.1.1). When I try to set text in that TextView (and similars) I have this result:
It seems that I have some problem setting the text or I don't know. Any idea?
NOTE:
I implement the interface in this way because in other cases I do something like this:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:orientation="vertical" >
<Button
android:id="#+id/detailServiceBtnClient"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#color/white"
android:drawableRight="#drawable/icon_detail"
android:gravity="left|center_vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="#string/detailServiceBtnClient"
android:textColor="#color/black" />
<TextView
android:id="#+id/detailServiceTxtClient"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="25dp"
android:layout_marginTop="-35dp"
android:ellipsize="end"
android:gravity="center"
android:maxLength="50"
android:singleLine="true"
android:textColor="#color/black" />
</LinearLayout>
You are using LinearLayout. In this layout items are added after each element. Your orientation is vertical, hence, it is below the button. Use RelativeLayout and then use alignTop and alignBottom properties of TextView.
android:alignTop="#+id/button"
android:alignBottom="#+id/button"
android:gravity="center"
I am currently testing a recently finished app for Android and am struggling quite a bit with the layout for different screens. Basically I just can't figure out a "one size fits all" for each layout.
The normal layouts are being specially awful. On the Eclipse editor I see one thing, on the emulator I get another and on certain devices I get another. I really have no idea how to fix these screens specially because they don't appear to be wrong on the editor. Here are some examples of what I get:
What the editor looks like:
What the emulator looks like (mind you, it's the same phone on the editor):
What the screen looks like on a Motorola D3 device (the language is different, but it's the same layout!):
I don't know if it's relevant, but here is my xml code for that particular screen:
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".EnterActivityActivity" >
<TextView
android:id="#+id/recommendationTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="29dp"
android:text="#string/recommendation_enter"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/timeTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/recommendationTextView"
android:layout_marginTop="48dp"
android:layout_toLeftOf="#+id/recommendationTextView"
android:text="#string/time_recommendation_enter" />
<EditText
android:id="#+id/changeRecommendationEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/changeRecommendationtextView"
android:layout_alignBottom="#+id/changeRecommendationtextView"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/activityEnterButton"
android:ems="5"
android:inputType="number"
android:maxLength="5"
android:focusable="false"/>
<Button
android:id="#+id/activityEnterButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/pedometerButton"
android:layout_centerHorizontal="true"
android:text="#string/enter_button_recommendation_enter" />
<Button
android:id="#+id/pedometerButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/open_pedometer_button_recommendation_enter" />
<TextView
android:id="#+id/changeRecommendationtextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/changeRecommendationButton"
android:layout_alignParentLeft="true"
android:layout_marginBottom="28dp"
android:text="#string/change_recommendation_enter" />
<Button
android:id="#+id/changeRecommendationButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/activityEnterButton"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:text="#string/change_button_recommendation_enter" />
<EditText
android:id="#+id/timeEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/recommendationTextView"
android:layout_alignTop="#+id/timeTextView"
android:ems="3"
android:focusable="false"
android:inputType="number"
android:maxLength="3"/>
<TextView
android:id="#+id/distanceTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/timeTextView"
android:layout_marginTop="18dp"
android:layout_toLeftOf="#+id/changeRecommendationButton"
android:text="#string/distance_recommendation_enter" />
<EditText
android:id="#+id/distanceEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/changeRecommendationButton"
android:layout_below="#+id/timeTextView"
android:ems="5"
android:focusable="false"
android:inputType="number"
android:maxLength="5"/>
</RelativeLayout>
How exactly could I fix this so that is actually looks good and consistent with all the varieties of screens and devices?