I updated my project exoplayer dependency, and i was updating my code with StylePlayerView (customized layout from exoplayer) reference, but when i executed my code the overrating about this 2 buttons PLAY and PAUSE, are not working, y use PLAY_PAUSE and works, but i want to customize this icons.. so if someone can help me, i really apreace it.
psdt.- And sorry about mi english because i speak spanish.
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.exoplayer2.ui.AspectRatioFrameLayout 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/customized_controller"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:background="#color/transparentBackground">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageButton
android:id="#+id/exo_rew"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/replay"
android:layout_gravity="center"
style="#style/ExoMediaButton.Rewind"
android:src="#drawable/ic_replay_10" />
<ImageButton
android:id="#+id/exo_play_pause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/play"
android:visibility="gone"
android:layout_gravity="center"
style="#style/ExoMediaButton.Play"
android:src="#drawable/ic_play"/>
<ImageButton
android:id="#+id/exo_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/play"
android:layout_gravity="center"
android:visibility="visible"
style="#style/ExoMediaButton.Play"
android:src="#drawable/ic_play"/>
<ImageButton
android:id="#+id/exo_pause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/pause"
android:layout_gravity="center"
android:visibility="visible"
style="#style/ExoMediaButton.Pause"
android:src="#drawable/ic_pause" />
<ImageButton
android:id="#+id/exo_ffwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/fast_forward"
android:layout_gravity="center"
style="#style/ExoMediaButton.FastForward"
android:src="#drawable/ic_forward_30" />
</LinearLayout>
<TextView
android:id="#+id/exo_duration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="1"
android:textColor="#color/whitePrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<com.google.android.exoplayer2.ui.DefaultTimeBar
android:id="#+id/exo_progress"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:buffered_color="#color/grey_accent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/exo_duration"
app:layout_constraintStart_toEndOf="#+id/exo_position"
app:played_color="#color/blueLight"
app:unplayed_color="#color/whiteSecondary"
tools:ignore="SpeakableTextPresentCheck" />
<ImageView
android:id="#+id/bt_fullscreen"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:contentDescription="#string/full_screen"
android:src="#drawable/ic_fullscreen_24"
app:layout_constraintBottom_toTopOf="#+id/exo_progress"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/exo_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:textColor="#color/whitePrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/bt_close_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:contentDescription="#string/close"
android:paddingHorizontal="8dp"
android:src="#drawable/ic_chevron_left"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txvChapterTitle"
android:layout_width="0dp"
android:layout_height="0dp"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
android:paddingHorizontal="8dp"
android:text="#string/title"
android:textColor="#color/whitePrimary"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/bt_close_player"
app:layout_constraintEnd_toStartOf="#+id/lnSettings"
app:layout_constraintStart_toEndOf="#+id/bt_close_player"
app:layout_constraintTop_toTopOf="#+id/bt_close_player" />
<LinearLayout
android:id="#+id/lnSettings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="#+id/bt_close_player"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/bt_close_player">
<ImageView
android:id="#+id/bt_settings"
android:layout_width="18dp"
android:layout_height="18dp"
android:contentDescription="#string/title_settings"
app:srcCompat="#drawable/ic_settings_24" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.exoplayer2.ui.AspectRatioFrameLayout>
I solved this issue for me by overriding the style and drawables. I created a new style on my values file like below:
<style name="ExoStyledControls.Button.Center.PlayPause">
<item name="android:src">#drawable/exo_styled_controls_pause</item>
<item name="android:contentDescription">#string/exo_controls_play_description</item>
<item name="android:padding">#dimen/exo_icon_padding</item>
</style>
<drawable name="exo_styled_controls_pause">#drawable/exo_styled_control_pause</drawable>
<drawable name="exo_styled_controls_play">#drawable/exo_styled_control_play</drawable>
The drawables exo_styled_control_play and exo_styled_control_pause should contain your own drawable code.
Do not forget to invalidate cache and restart if it doesn't work right away.
You can modify the values.xml file in the library.
Go to Project -> Gradle: com.~~.Exoplayer-ui:2.18.0#aar -> res -> values.xml
See values.xml in project view
Search for exo_styled_controls_play or exo_styled_controls_pause
and edit here ----> #drawable/"your image"
This is where you can find the line of code
Related
I'm trying to create a card like this in Android Studio, but I'm still new to Frontend Development. Do you have any suggestions for Layouts I could use to realize this?
Thank you for any suggestions!
You should use constraint layout with CardView.
I started it for you. You can continue it. There is the simpliest way.
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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="#color/primary">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardBackgroundColor="#7AFFFFFF"
app:cardCornerRadius="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:text="Expenses"
android:textColor="#color/white"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#id/rightDecorView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/titleDivider"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#FFFFFF"
app:layout_constraintEnd_toEndOf="#id/title"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/title" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/durationTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Duration"
android:textColor="#color/white"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="#id/titleDivider"
app:layout_constraintStart_toStartOf="#id/titleDivider"
app:layout_constraintTop_toBottomOf="#id/titleDivider" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/durationView"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_car_placeholder"
app:layout_constraintStart_toStartOf="#id/durationTitle"
app:layout_constraintTop_toBottomOf="#id/durationTitle" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/durationDiff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:src="#drawable/ic_car_placeholder"
android:text="+ 10 min"
android:textColor="#color/white"
app:layout_constraintStart_toEndOf="#id/durationView"
app:layout_constraintTop_toBottomOf="#id/durationTitle" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/durationTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_car_placeholder"
android:text="= 2h 15 km"
android:textColor="#color/white"
app:layout_constraintStart_toStartOf="#id/durationDiff"
app:layout_constraintTop_toBottomOf="#id/durationDiff" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/rightDecorView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:src="#drawable/ic_car_placeholder"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
To simplify layout, you can separate a repeating view to another custom view. And just reuse it in your code.
Look how to do it here https://blogs.oregonstate.edu/workla/2021/11/04/creating-a-custom-view-in-android/
I have such XML file for custom Dialog:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp">
<TextView
style="#style/tv_big"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/cl_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Filter"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="#id/cl_header"
android:text="RESET FILTERS"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_distance"
app:layout_constraintTop_toBottomOf="#id/cl_header"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_distance_title"
style="#style/tv_medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"/>
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="#id/tv_distance_title"
app:layout_constraintLeft_toRightOf="#id/tv_distance_title"
app:layout_constraintRight_toRightOf="parent"
android:background="#ddd"
android:padding="3dp"
android:textColor="#333"
android:text="0 km - 500km"/>
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
app:layout_constraintTop_toBottomOf="#id/tv_distance_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelBehavior="gone"
android:stepSize="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_distance"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/tv_location_title"
style="#style/tv_medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"/>
<EditText
android:id="#+id/et_location"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/tv_location_title"
android:hint="#string/filter_location_et_hint" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_location"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/bt_cancel"
android:backgroundTint="#ccc"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="CANCEL"/>
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:layout_marginHorizontal="20dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Android Studio renders it in this way:
And this is what I want to have in my Dialog.
BUT:
On physical device and on emulator it looks different than in Android Studio:
My question is: how to place "Filter" title on the left, and make the location EditText matching the parent (in the working app)?
What everybody else said is correct, keeping your layout flat is good for both performance and for these situations where you want to quickly figure out why isn't the layout being laid out the way you wanted it ;)
Try this :
<androidx.constraintlayout.widget.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"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Filter"
app:layout_constraintBottom_toBottomOf="#id/bt_reset"
app:layout_constraintEnd_toStartOf="#id/bt_reset"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/bt_reset" />
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RESET FILTERS"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_distance_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"
app:layout_constraintBottom_toBottomOf="#id/tv_distance_result"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_distance_result" />
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:background="#ddd"
android:gravity="center"
android:paddingHorizontal="18dp"
android:paddingVertical="3dp"
android:text="0 km - 500km"
android:textColor="#333"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/bt_reset" />
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stepSize="1.0"
app:labelBehavior="gone"
app:layout_constraintTop_toBottomOf="#id/tv_distance_result" />
<TextView
android:id="#+id/tv_location_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Location"
app:layout_constraintTop_toBottomOf="#id/slider_distance" />
<EditText
android:id="#+id/et_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="test"
app:layout_constraintTop_toBottomOf="#id/tv_location_title" />
<Button
android:id="#+id/bt_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:backgroundTint="#ccc"
android:text="CANCEL"
android:textColor="#color/colorBlack"
app:layout_constraintEnd_toStartOf="#id/bt_save"
app:layout_constraintTop_toBottomOf="#id/et_location" />
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:text="save"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_location" />
</androidx.constraintlayout.widget.ConstraintLayout>
I changed inner ConstraintLayouts into LinearLayouts and used weights. I also used this trick to fill space between e.g. "Filter" title and "reset filters" button.
There was also an issue with ll_location LinearLayout - it didn't match the parent.
I replaced:
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<!-- content -->
</LinearLayout>
into:
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<!-- content -->
</LinearLayout>
And then it worked.
The reason why I don't want to use flat layout (why I use nested layouts) is that IMHO the flat layout makes the code more difficult to maintain.
When you have Views splited into groups you can easily replace them, no matter how many View there are in a group.
My solution:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<LinearLayout
android:id="#+id/ll_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp">
<TextView
style="#style/tv_big"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Filter"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:text="reset filters"/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_distance_ext"
app:layout_constraintTop_toBottomOf="#id/ll_header"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_distance_title"
style="#style/tv_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:background="#ddd"
android:padding="3dp"
android:textColor="#333"
android:text="0 km - 500km"/>
</LinearLayout>
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelBehavior="gone"
android:stepSize="1.0" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<TextView
android:id="#+id/tv_location_title"
style="#style/tv_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"/>
<EditText
android:id="#+id/et_location"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:hint="#string/filter_location_et_hint" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_location"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/bt_cancel"
android:backgroundTint="#ccc"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="cancel"/>
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:layout_marginHorizontal="20dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I've been pulling my hair out with this specific issue. Whenever I load the current activity (on top) of the previous activity, it causes the background of the loading activity (with transparent background) to turn black.
I can see the transparent setting when the transition is loading, but when its fully loaded it turns black.
Here is the code I use to make the background transparent:
window.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
The above code works elsewhere on another view just like this one. All settings are the same on both views, but this one doesn't want to work correctly.
This is the code for the activity:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:scaleType="fitCenter"
tools:context=".ui.activities.TourConnectActivity">
<ImageView
android:id="#+id/backgroundImage"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="24dp"
android:layout_marginTop="64dp"
android:layout_marginEnd="24dp"
android:background="#drawable/rounded_top"
android:contentDescription="background"
android:scaleType="centerCrop"
android:src="#drawable/launch_bg"
app:layout_constraintBottom_toTopOf="#+id/view7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText" />
<View
android:id="#+id/view7"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:background="#drawable/preview_green_border_top"
app:layout_constraintBottom_toTopOf="#+id/linearLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/backgroundImage" />
<ImageView
android:id="#+id/logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="128dp"
android:layout_marginEnd="128dp"
android:background="#drawable/org_logo_border"
android:contentDescription="background"
android:cropToPadding="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="#+id/view7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/dot"
tools:ignore="HardcodedText" />
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="315dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="64dp"
android:background="#drawable/rounded_bottom"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view7">
<TextView
android:id="#+id/connectTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="This tour is presented by"
android:textColor="#333"
android:textSize="12sp"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/connectSubtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/roboto"
android:text="Jackson Hole Land Trust"
android:textAlignment="center"
android:textColor="#color/colorTSGGreen"
android:textSize="20sp"
android:textStyle="bold"
tools:ignore="HardcodedText" />
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="175dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#color/transparent">
<TextView
android:id="#+id/connectMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto"
android:text="#string/lorem_ipsum_3"
android:textColor="#333"
android:textSize="16sp" />
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/learnMore"
style="#style/Widget.MaterialComponents.Button.Icon"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawableStart="#drawable/ic_none"
android:drawableEnd="#drawable/ic_exit_to_app"
android:onClick="buttonClick"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="#string/learn_more"
android:textColor="#color/loginTextColor"
android:textSize="18sp"
app:backgroundTint="#color/colorTSGGreen" />
</LinearLayout>
<ImageView
android:id="#+id/buttonBack"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="32dp"
android:contentDescription="close button"
android:onClick="iconClick"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_close" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'm inclined to think that it has something to do with the map view on the previous activity, but I'm not sure that could be it.
Any input would be appreciated. Thanks.
A better approach than setting a transparent background programmatically is to change its style. Especially when the background remains the same in other cases. Check out this question and its top rated answer.
I am using Constraintlayout and I want to place my Textview on my Imageview, it is supposed to look like this after I'm done: https://i.stack.imgur.com/mYAws.png but each time I add constraints to the texts(Vertically and horizontally), the texts disorganizes and goes totally from how I want it to be,
Sometimes even shifting my images. I have tried severally to adjust it well to no avail
My layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Current"
android:textColor="#FF3D19"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="358dp"
android:layout_height="337dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:srcCompat="#drawable/orange_panel" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="146dp"
android:layout_height="151dp"
android:layout_marginStart="45dp"
android:layout_marginTop="7dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/green_panel" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="146dp"
android:layout_height="151dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="44dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/pink_panel" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tonight"
android:textColor="#FFFFFF"
android:textSize="18sp"
tools:layout_editor_absoluteX="89dp"
tools:layout_editor_absoluteY="415dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomorrow"
android:textColor="#FFFFFF"
android:textSize="18sp"
tools:layout_editor_absoluteX="254dp"
tools:layout_editor_absoluteY="415dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
The answer is pretty straightforward. First you should delete this lines from both text views.
tools:layout_editor_absoluteX="254dp"
tools:layout_editor_absoluteY="415dp"
Then all you need to do is add constraints like this. Below are constraints for your image
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
And the constraints for your text view would be like this.
app:layout_constraintEnd_toEndOf="#+id/image_view"
app:layout_constraintStart_toStartOf="#+id/image_view"
app:layout_constraintTop_toTopOf="#+id/image_view"
Of course you can add different constraints for the image because i do not know how do you want to position the image view in the app. But if you want a text view to be inside the image like in the link you sent then the constraints for the text view will be always like this.
It's all about tools:layout_editor_absoluteX and tools:layout_editor_absoluteY for yours textView3 and textView4. Also i think you do not know for what namespace tools exist.
Check the example below; it shows you what constraints can be used to get in the direction of your layout goals.
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Current"
android:textColor="#FF3D19"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_marginTop="16dp"
android:background="#00FF00"
android:textColor="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="16dp"
android:background="#0000FF"
app:layout_constraintStart_toStartOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="16dp"
android:background="#FF0000"
app:layout_constraintEnd_toEndOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tonight"
android:textColor="#FFFFFF"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomorrow"
android:textColor="#FFFFFF"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="#+id/imageView3"
app:layout_constraintStart_toStartOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
See how this example looks: screenshot.
In this i tried numerous way to bring pay and recieve in vertical line with hello world , but every thing failed
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:gravity="center"
tools:context="com.ubschallenge.drawable.MainActivity"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/pay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pay"
android:layout_marginBottom="110dp"
android:layout_centerHorizontal="true"
android:layout_above="#id/button"
/>
<TextView
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/pay"
android:layout_alignStart="#+id/pay"
android:layout_centerVertical="true"
android:background="#drawable/circle"
android:gravity="center"
android:text="Hello World!" />
<TextView
android:layout_centerHorizontal="true"
android:id="#+id/recieve"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recieve"
android:layout_marginTop="110dp"
android:layout_below="#id/button"
/>
</RelativeLayout>
This above is the code . I want to make it look like TEZ Payment app home screen
EDIT : After clicking hello world
Expected output :
Khalal Output :
enter image description here
Khaled Updated answers output: enter image description here
Using ConstraintLayout.
<?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">
<android.support.constraint.Guideline
android:id="#+id/guideline_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.25" />
<TextView
android:id="#+id/pay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/button"
android:text="Pay"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/guideline_top" />
<TextView
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:layout_centerVertical="true"
android:layout_marginBottom="8dp"
android:background="#drawable/circle"
android:gravity="center"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/recieve"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/button"
android:layout_centerHorizontal="true"
android:text="Recieve"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/guideline_bottom"
app:layout_constraintStart_toStartOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.50"/>
</android.support.constraint.ConstraintLayout>
Update 1
Make use of Guideline with ConstraintLayout
Update 2
<TextView
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_centerVertical="true"
android:background="#drawable/circle"
android:gravity="center"
android:text="Hello World!"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.75"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
And try to update layout_constraintHeight_percent and layout_constraintGuide_percent of top and bottom Guidline to achieve your Goal.