We Keep Coding

How to Overlay text over image at left top corner

I want to have textview over image at top left corner of the Imageview similar to this. how can I do this.
I have this code but It doesn't do what i want.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<ImageView
android:id="#+id/myImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/myImageSouce"
android:scaleType="centerCrop"/>
<TextView
android:id="#+id/myImageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/spacing_medium"
android:layout_gravity="center"
tools:text="Test"/>
</FrameLayout>
Thanks for help in advance.

Try using a ConstraintLayout. Here's a simple example. For layering, views are layered in the order listed in the xml so if you want the TextView in front put it last in the xml
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
app:srcCompat="#drawable/ic_home_black_24dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some Words"
android:padding="20dp"
android:background="#00ff00"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

ScrollView doesn't scroll in a ViewPager

In my app I use a TabLayout under a Toolbar, and a ViewPager filling the rest of the space. I need one of the fragments under the tab to be able to scroll. tried using ScrollView, NestedScrollView and android:fillViewport="true" with no success.
I've looked at other questions about the same problem, tried anything that was suggested in the answers, but they all didn't solve my problem.
the activity that contains the ViewPager's code:
<?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:orientation="vertical"
tools:context=".UserProfile">
<include
android:id="#+id/userToolbar"
layout="#layout/user_info_toolbar_layout" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/userToolbar"
android:background="#android:color/holo_blue_light"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/black">
<com.google.android.material.tabs.TabItem
android:id="#+id/dashboardTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/dashboard_tab_text_en" />
<com.google.android.material.tabs.TabItem
android:id="#+id/statisticsTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/statistics_tab_text_en" />
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/userInfoViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/tabLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>
the fragment's code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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/user_dashboard_fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
tools:context=".Dashboard">
<androidx.constraintlayout.widget.ConstraintLayout
android:padding="40dp"
android:id="#+id/userInfoContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.github.abdularis.civ.CircleImageView
android:id="#+id/userImage"
android:layout_width="match_parent"
android:layout_height="0dp"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/male_user_sample1"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/username_sample"
android:textColor="#color/colorPrimaryDark"
android:textSize="30sp"
app:layout_constraintTop_toBottomOf="#id/userImage" />
<com.ramijemli.percentagechartview.PercentageChartView
android:id="#+id/userLevelProgress"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="20dp"
android:outlineAmbientShadowColor="#color/colorPrimary"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/username"
app:pcv_animDuration="1000"
app:pcv_animInterpolator="anticipate_overshoot"
app:pcv_drawBackground="false"
app:pcv_drawBackgroundBar="false"
app:pcv_mode="ring"
app:pcv_orientation="counter_clockwise"
app:pcv_progress="100"
app:pcv_startAngle="270"
app:pcv_textColor="#color/colorPrimary"
app:pcv_textShadowRadius="100"
app:pcv_textSize="50sp" />
<TextView
android:id="#+id/userLevel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/level_sample"
android:textColor="#color/colorPrimary"
android:textSize="40sp"
app:layout_constraintTop_toBottomOf="#id/userLevelProgress" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
I can't find the problem in my code that causes the fragment under the ViewPager being unscrollable.

Rty this
In your ViewPager
<androidx.viewpager.widget.ViewPager
android:id="#+id/userInfoViewPager"
android:layout_width="match_parent"
android:layout_height="0dp" // <- ****
app:layout_constraintBottom_toBottomOf="parent" // <- ****
app:layout_constraintTop_toBottomOf="#id/tablayout"
/>
Then, in fragment xml
<ScrollView
....
android:layout_width="match_parent"
android:layout_height="match_parent" // <- ****
>
<androidx.constraintlayout.widget.ConstraintLayout
android:padding="40dp"
android:id="#+id/userInfoContainer"
android:layout_width="match_parent"
android:layout_height="match_parent" // <- ****
>

it's seems like there some bug with ConstraintLayout inside ScrollView ,Don't forget that If you constraint some view's bottom to constraint layout's bottom. Scrollview could not scroll. Use NestedScrollView with viewport true is working good for me
<android.support.v4.widget.NestedScrollView>
......
......
</android.support.v4.widget.NestedScrollView>

CardView Spacing between each separate card is non-existent

Below you will find a screenshot. As you can see, between each card in my CardView, there is no spacing (They are bunched up below one another) The CardView
I am trying to get a spacing between each separate card. (Each card contains an image, an item number and a boolean)
I have tried card_view:cardUseCompatPadding="true" and adding padding manually.
activity_login.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="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="16dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:id="#+id/cv"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
card_view:cardPreventCornerOverlap="true"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/person_photo"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="16dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/person_name"
android:layout_toRightOf="#+id/person_photo"
android:layout_alignParentTop="true"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/person_age"
android:layout_toRightOf="#+id/person_photo"
android:layout_below="#+id/person_name" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
recyclerview_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:backgroundTint="#e6e6e6">
<android.support.v7.widget.RecyclerView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/rv">
</android.support.v7.widget.RecyclerView>
</LinearLayout>

In the parent of CardView: LinearLayout define android:layout_margin="XXdp". That might help.

You need to define margin top inside widget.CardView:
android:layout_marginTop="2dp"
And You don't need the linear layout.

Constraint layout margins keep changing

The margins of the left button keep changing as you can see in the video and I would like them to not change.
I am doing a calculator and i want to move all the buttons togheter without changing the margins.
The video is there: https://youtu.be/UT3zINpaMhY
Here is the code:
<?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/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.a3ibm.calculator.MainActivity">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBaseline_toBaselineOf="#+id/button2"
app:layout_constraintRight_toLeftOf="#+id/button2"
android:layout_marginRight="86dp" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.864"
app:layout_constraintVertical_bias="0.319" />
</android.support.constraint.ConstraintLayout>

Here is the possible solution you want. The problem was with centering:
<?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/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button2"
android:layout_marginEnd="56dp"
android:layout_marginRight="56dp"
app:layout_constraintTop_toTopOf="#+id/button2"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
tools:layout_editor_absoluteY="186dp"
tools:layout_editor_absoluteX="208dp" />
</android.support.constraint.ConstraintLayout>

XML layout 2 views in centre, one at top

I created linearlayout with two buttons in center (buttons 1 and 2), but I can't manage it to create the view 3 on top, which I need to make it fill whole width and adjust it's height by it (keep proportions). How do I create third view?
Image:
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
<LinearLayout
android:orientation="vertical"
android:layout_gravity="center_vertical"
android:layout_width="fill_parent" android:layout_height="wrap_content" >
<ImageButton
android:background="#drawable/btn_one"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0" />
<ImageButton
android:background="#drawable/btn_second"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1.0" />
</LinearLayout>

I would recommend you use relative layouts, they are the closest thing in android to an "absolute layout" replace the button tags with Image button tags
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
</RelativeLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="215dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button3"
android:layout_below="#+id/button2"
android:layout_alignStart="#+id/button2" />
</RelativeLayout>

try this code set height and width what size of image button you need and simple look what you need.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.2"
android:orientation="vertical"
android:gravity="center">
<ImageButton
android:layout_width="200dp"
android:layout_height="50dp"/>
<ImageButton
android:layout_width="200dp"
android:layout_height="50dp" />
</LinearLayout>