Develop Reference

Create a clickable item like button with a particuliar view inside

I'm starting in android but I'm working on a project that asks me to do the same thing as the pictures below. However I don't know how to analyze this view to be able to produce something similar.
From what I see in the activity I have a "button" and when I click on it, the elements present in the "button" change. Could someone explain to me how to cut out the view and the elements to do the same thing? Thank you in advance for your answer.
Pictures :
based view
view after click on "button"

I gonna give you a rough idea..
its not a button its a layout containing 2 textviews, 2 imageviews and one seekbar and i will suggest you to use a linearlayout.add a clicklistner on it.
to change the elements after clicking on layout you have to get the references of its elements textview etc as mentioned and change them by yourself. ex- seekbar.setprogress(30) approximately as your picture after click.
xml..
Linearlayout
textview
imageview and textview
imageview
seekbar
\Linearlayout

#Miina Neko Use card view inside cardview use a linear layout (or anyother layout you like) inside cardview use below code i made a layout for you
<androidx.cardview.widget.CardView
app:cardCornerRadius="#dimen/_5sdp"
app:cardElevation="#dimen/_5sdp"
app:cardBackgroundColor="#color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:padding="#dimen/_5sdp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:src="#drawable/refresh_btn"
android:layout_width="#dimen/_10sdp"
android:layout_height="match_parent" />
<TextView
android:layout_marginLeft="#dimen/_5sdp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="arrrarrr-raaar"/>
</LinearLayout>
<LinearLayout
android:layout_marginTop="#dimen/_3sdp"
android:layout_marginBottom="#dimen/_3sdp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_marginRight="#dimen/_5sdp"
android:src="#drawable/refresh_btn"
android:layout_width="#dimen/_10sdp"
android:layout_height="#dimen/_10sdp" />
<ImageView
android:layout_marginLeft="#dimen/_5sdp"
android:src="#drawable/refresh_btn"
android:layout_width="#dimen/_10sdp"
android:layout_height="#dimen/_10sdp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ProgressBar
android:layout_marginRight="#dimen/_5sdp"
android:layout_marginLeft="#dimen/_5sdp"
style="?android:attr/progressBarStyleHorizontal"
android:indeterminateDrawable="#android:drawable/progress_indeterminate_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
NOTE: "#dimen/_sdp" is a library i am sharing link and chage your drawable accrouding to your choice and make ids and in java or kotlin change then programmatically when clicked or any action performed like in second picture hope answer your question..
SDP library link https://github.com/intuit/sdp

How to put ProgressBar inside of EditText and keep the bar right in it?

I want to have a ProgressBar inside of an EditText, but I want it to be right inside it and, preferably, in the center of the EditText. All the solutions I've come across so far do not really allow the bar to be inside of the borders. Also, I'm looking for as clean solution as possible, not just putting over 9000 constraints in ConstraintLayout.
It should look like this (picture is taken from android progressbar inside edittext):
But the actual result is either this:
or this (if I use smaller style for the bar):
My code is:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<EditText
android:id="#+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|center_vertical"/>
</FrameLayout>
Of course, I could just put some hardcoded values for height, but it's definitely a bad fix of the problem. Also, if I change the style of the bar to the smaller one, it's not a fix, since I want to have some control over it (and it doesn't look perfect, either). I'm planning to add something like error and success icons also, so the solution that fulfills this requirement is extremely welcome! So, if you have any clue about how to put it properly inside of the input field, I'll be grateful.
Thanks in advance, guys!

You can try:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<EditText
android:id="#+id/edit_text"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ProgressBar
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

You can achive like this, Whenever you want to position children inside a layout FrameLayout is not a good layout to use. consider using RelativeLayout or better ConstraintLayout
<?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="wrap_content"
android:padding="10dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#null"
android:hint="Phone number goes here" />
<ProgressBar
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:padding="5dp" />
</RelativeLayout>
Happy coding!!

Display many views efficiently in a FlexboxLayout

My goal is to efficiently display a lot of TextViews (with background) in a FlexboxLayout (or something similar).
I want to display information about actors and crew members from a movie in a kind of 'tag'-layout style
How the layout looks like (one of the FlexboxLayouts is marked)
I inflate the TextViews dynamically via LayoutInflater into a FlexboxLayout. The problem is of course that with a lot of data (which means a lot of views, sometimes 30 or more in over 20 Flexbox-Layouts) the creation time of my fragment/activity increases and the activtiy takes longer to open.
The TextView I inflate:
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tag_name"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_margin="5dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:gravity="center_vertical"
android:background="#drawable/bg_tag"
android:textColor="?android:textColorSecondary"
android:text="#string/placeholder" />
My container layout (TextViews get inflated into the FlexboxLayout #+id/fxl_names):
<?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="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txt_names"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="?attr/colorOnBackground"
android:padding="5dp"
android:textSize="16sp"
android:textStyle="bold"
android:text="test" />
//TextViews get inflated into this FlexboxLayout
<com.google.android.flexbox.FlexboxLayout
android:id="#+id/fxl_names"
app:flexWrap="wrap"
android:animateLayoutChanges="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/view_more"
android:visibility="gone"
android:layout_margin="0dp"
android:text="Show all"
style="#style/Widget.MaterialComponents.Button.TextButton.Dialog" />
</LinearLayout>
Thank you for any help/advice on optimizing this layout!

When you had to inflate a lot of views dynamically, you should use something called ViewHolder to ensure the optimization of the inflate view action.
For your problem may you had to use a RecyclerView instead a FlexBoxLayout, the best solution in my opinion. And a FlexBoxLayoutManager to organize your views.
There is a example in the Android FlexBoxLayout repository

UI too slow to be inflated, causing application to be slow

I have a constraint layout inside a ScrollView. This ConstraintLayout is supposed to be a parent for other Views that will be added into it, as shown:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/generated_main_constraint"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.constraint.ConstraintLayout>
When I try to add view to this ConstraintLayout, I inflate the view from XML, with the following code:
(ConstraintLayout) getLayoutInflater().inflate(R.layout.box_npcs, MAIN_CONSTRAINT, false);
This layout is defined in XML1 (end of the question).
Then I add TextViews with information to this Layout's LinearLayout, for that I use a programatically created TextView and add it into the layout
linearLayout.addView(new TextView("Foo"));
With that setup, I add this box to the main constraint layout.
The problem is: When I try to add more than 5 views, it takes a long time to proccess the UI, taking up to 5 seconds on the max amount of view to be added (50).
How can I add Complex Views to a ConstraintLayout in a way that it doesn't lag when trying to add the views?
XML1:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/box_npcs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/npcImage"
android:layout_width="88dp"
android:layout_height="88dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="#+id/layoutInformation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/layoutInformation"
app:srcCompat="#drawable/camera" />
<android.support.constraint.ConstraintLayout
android:id="#+id/layoutInformation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:maxWidth="280dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/npcImage"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/top_priority"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
android:ellipsize="start"
android:text="DummyTextIsDummy"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/common_google_signin_btn_text_light_default"
android:textSize="22sp"
android:textStyle="bold"
android:typeface="normal"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText" />
<LinearLayout
android:id="#+id/linearLayout_high_highest_normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintLeft_toLeftOf="#+id/top_priority"
app:layout_constraintTop_toBottomOf="#+id/top_priority" />
</android.support.constraint.ConstraintLayout>
Images for examples:
Each 'box' in this screen is a box in the Main Constraint Layout.
Each TextLine is a different TextView added to the LinearLayout

What is the android version in your test device?
A few days ago, I found a problem.
If I use two or more ConstraintLayouts in Android 5 or 6, it will be slow.
When I used the Android Studio CPU Profiler, I saw the com.android.internal.policy.impl.phonewindow$decorview.onmeasure spent much time.
So I tried to use LinearLayout, and the problem was solved.
I think ConstraintLayout in Support Library is not friendly for Android 5 or 6.

Android Linear Layout - How to Keep Element At Bottom Of View?

I have a TextView which I want to pin at the bottom of a landscape activity that is using LinearLayout with vertically arranged elements.
I have set android:gravity="bottom" on the text view, but it still likes to be just below the last element of the LinearLayout exactly what I do not want it to do.
Any suggestions?

You will have to expand one of your upper views to fill the remaining space by setting android:layout_weight="1" on it. This will push your last view down to the bottom.
Here is a brief sketch of what I mean:
<LinearLayout android:orientation="vertical">
<View/>
<View android:layout_weight="1"/>
<View/>
<View android:id="#+id/bottom"/>
</LinearLayout>
where each of the child view heights is "wrap_content" and everything else is "fill_parent".

Update: I still get upvotes on this question, which is still the accepted answer and which I think I answered poorly. In the spirit of making sure the best info is out there, I have decided to update this answer.
In modern Android I would use ConstraintLayout to do this. It is more performant and straightforward.
<ConstraintLayout>
<View
android:id="#+id/view1"
...other attributes elided... />
<View
android:id="#id/view2"
app:layout_constraintTop_toBottomOf="#id/view1" />
...other attributes elided... />
...etc for other views that should be aligned top to bottom...
<TextView
app:layout_constraintBottom_toBottomOf="parent" />
If you don't want to use a ConstraintLayout, using a LinearLayout with an expanding view is a straightforward and great way to handle taking up the extra space (see the answer by #Matthew Wills). If you don't want to expand the background of any of the Views above the bottom view, you can add an invisible View to take up the space.
The answer I originally gave works but is inefficient. Inefficiency may not be a big deal for a single top level layout, but it would be a terrible implementation in a ListView or RecyclerView, and there just isn't any reason to do it since there are better ways to do it that are roughly the same level of effort and complexity if not simpler.
Take the TextView out of the LinearLayout, then put the LinearLayout and the TextView inside a RelativeLayout. Add the attribute android:layout_alignParentBottom="true" to the TextView. With all the namespace and other attributes except for the above attribute elided:
<RelativeLayout>
<LinearLayout>
<!-- All your other elements in here -->
</LinearLayout>
<TextView
android:layout_alignParentBottom="true" />
</RelativeLayout>

I think it will be perfect solution:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Other views -->
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<!-- Target view below -->
<View
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>

Step 1 : Create two view inside a linear layout
Step 2 : First view must set to android:layout_weight="1"
Step 3 : Second view will automatically putted downwards
<LinearLayout
android:id="#+id/botton_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/btn_health_advice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>

You should put the parameter gravity to bottom not in the textview but in the Linear Layout. Like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="bottom|end">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Something"/>
</LinearLayout>

You can also use
android:layout_gravity="bottom"
for your textview

DO LIKE THIS
<LinearLayout
android:id="#+id/LinearLayouts02"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="bottom|end">
<TextView
android:id="#+id/texts1"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="2"
android:text="#string/forgotpass"
android:padding="7dp"
android:gravity="bottom|center_horizontal"
android:paddingLeft="10dp"
android:layout_marginBottom="30dp"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="50dp"
android:fontFamily="sans-serif-condensed"
android:textColor="#color/colorAccent"
android:textStyle="bold"
android:textSize="16sp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
/>
</LinearLayout>

try this
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical" >
<TextView
android:id="#+id/textViewProfileName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>