I want to display an image and text in a recyclerview, but the height of the image get alot smaller when the app is running. It's set to 80x80 dp but seems to be 80x~20 dp when actually displayed. If anyone have any idea on what might be wrong i'd really appreciate som help :)
Main.XML
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
</RelativeLayout>
recyclerview.XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_width="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/item_image"
android:layout_width="80dp"
android:scaleType="centerCrop"
android:layout_height="80dp" />
<TextView
android:id="#+id/item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:maxWidth="80dp"
android:textSize="12sp"
android:textStyle="bold"
android:padding="8dp"
tools:text="First filter" />
</LinearLayout>
Related
Status Bar currently translucent but image not showing underneath , I try adding fitSystemWindow attr to root view but it's not working!
This is my xml layout code
<androidx.coordinatorlayout.widget.CoordinatorLayout 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" >
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" >
<ImageView
android:id="#+id/quote_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/quote_page"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:layout_marginRight="8dp"
android:layout_marginTop="42dp"
app:cardBackgroundColor="#color/darker_gray"
app:cardCornerRadius="8dp"
app:contentPadding="8dp" >
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/ic_crown"
android:tint="#color/white" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/category_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
app:cardBackgroundColor="#color/darker_gray"
app:cardCornerRadius="8dp"
app:contentPaddingBottom="8dp"
app:contentPaddingLeft="16dp"
app:contentPaddingRight="16dp"
app:contentPaddingTop="8dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginRight="8dp"
android:src="#drawable/ic_category"
android:tint="#color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="General" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/theme_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
app:cardBackgroundColor="#color/darker_gray"
app:cardCornerRadius="8dp"
app:contentPadding="8dp" >
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/ic_paint"
android:tint="#color/white" />
</androidx.cardview.widget.CardView>
</FrameLayout>
<fragment
android:id="#+id/category_fragment"
android:name="com.oasis.goad.CategoryFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:behavior_skipCollapsed="true" />
<fragment
android:id="#+id/theme_fragment"
android:name="com.oasis.goad.ThemeFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:behavior_skipCollapsed="true" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Currently this is what the view looks like but image don't overlaps status bar.
Phone used for testing is dot notch, is it most likely the problem image not overlaping statusbar? Or can I restructure my layout, my layout is wrong? Or is FrameLayout the problem? Pls can you provide me to link of previously solve problems like this?
I'm trying to display cool dot when I want to notify new items. When i set negative margin or translation, the dot is cut, theses littles ilustration will make things a lot clearer:
What i want :
What I get :
Here's my layout xml :
<?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="240dp"
android:layout_margin="10dp"
android:layout_marginBottom="20dp"
android:layout_gravity="center_horizontal"
android:elevation="1dp"
android:background="#drawable/bg_element_list"
android:foreground="#drawable/effect_ripple"
android:clickable="true"
android:focusable="true">
<ImageView
android:id="#+id/file_img"
android:layout_width="fill_parent"
android:layout_height="210dp"
android:paddingTop="10dp"
android:paddingBottom="5dp"
android:src="#drawable/ic_pdf"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/file_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="20sp"
android:paddingEnd="20sp"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="teeeeeeeeeeeeeeeeeeeeeeeeeeeeeest"
android:textAlignment="center"
android:textColor="#color/dark_grey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/file_img" />
<ImageView
android:id="#+id/file_new"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/ic_newfile"
android:translationY="-22dp"
android:translationX="22dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Someone have an idea?
Thanks
Try this with your parameter's
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:id="#+id/profileCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="210dp"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="teeeeeeeeeeeeeeeeeeeeeeeeeeeeeest"
android:textColor="#727272"
android:textSize="20sp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/userImageProfile"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignEnd="#+id/profileCard"
android:layout_marginEnd="-15dp"
android:elevation="8dp"
android:src="#mipmap/ic_launcher"
app:tint="#color/black" />
</RelativeLayout>
On the ConstraintLayout, set
android:clipChildren="false"
This will allow the ImageView to draw outside the ConstraintLayout. See the documentation.
If you use padding on the layout instead of layout_margin, and set clipToPadding as false, things will be able to draw within the padding area. Margin is really for required space outside of the View, padding is space inside it (where it draws its contents)
here i am asking for your help.
I'm trying to implement a nestedscrollview inside a coordinatorlayout with some other stuff but the nestedscroll view keeps transparent no matter what i do.
I have already thought a lot but couldn't find any solution.
I want it to have a "solid" white background not this (+/- 30% white) background, here as some printscreens:
Before
Then when i start it sliding:
After
As we can see it the background text (that is inside the coordinator but out the nested) still readable and i can even start actions like press the drawer button that should be hidden.
Here is my main layout code which hold the NestedScrollView:
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:scrollbars="none"
app:behavior_hideable="true"
app:behavior_peekHeight="64dp"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<include layout="#layout/fragment_fast_access" />
</androidx.core.widget.NestedScrollView>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And this is the Fragment i want to show inside it:
<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"
tools:context=".FastAccessFragment">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="288dp" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="64dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="64dp">
<ImageView
android:id="#+id/fastAccess_inCard_coverAlbum"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="center"
android:layout_marginStart="16dp"
android:contentDescription="#string/album_cover"
android:scaleType="centerCrop"
android:src="#drawable/gradient_bg_main"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/fastAccess_inCard_songName"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginHorizontal="16dp"
android:layout_marginBottom="2dp"
android:ellipsize="end"
android:gravity="bottom"
android:maxLines="1"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#android:color/black"
app:layout_constraintBottom_toTopOf="#id/fastAccess_inCard_artistName"
app:layout_constraintEnd_toStartOf="#id/fastAccess_inCard_buttonPlay"
app:layout_constraintStart_toEndOf="#id/fastAccess_inCard_coverAlbum"
app:layout_constraintTop_toTopOf="parent"
tools:text="Song name" />
<TextView
android:id="#+id/fastAccess_inCard_artistName"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginHorizontal="16dp"
android:ellipsize="end"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/fastAccess_inCard_buttonPlay"
app:layout_constraintStart_toEndOf="#id/fastAccess_inCard_coverAlbum"
app:layout_constraintTop_toBottomOf="#id/fastAccess_inCard_songName"
tools:text="Artist" />
<ImageButton
android:id="#+id/fastAccess_inCard_buttonPlay"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginEnd="16dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="#string/button_play"
android:focusable="true"
android:src="#drawable/ic_play"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/fastAccess_inCard_buttonPlaylist"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/fastAccess_inCard_buttonPlaylist"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="#string/show_playlist"
android:focusable="true"
android:scaleType="centerCrop"
android:src="#drawable/ic_playlist"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Thanks in advance ;)
Need help at stretching my buttons in GridLayout so they would take all of the free space under the TextView
Here is my hierarchy
P.S. source code:
<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">
<TextView
android:id="#+id/display"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/display">
<Button
android:id="#+id/buttonOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/display" />
check if you are assigning the height and width in px, and change them to % (percentage).. is there any way you can show the source ?
P.S. this is how i fixed it.. i've changed it to Linear
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/re``s-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/display"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/display">
<Button
android:id="#+id/buttonOne"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/display" />
</GridLayout>
I am new to XML and wanted to create a simple start page of a game. First I startet with the Android Studio 3.0 Layout maker and came up to something like this(second image). The biggest problem is to get the 3 ImageButtons on the bottom right. After lots of trying and google I couldnt find the solution, is it eaven possible with just XML code?
In my case until now it looks 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
tools:context="de.chipsapps.ca.identiti.MenuACT">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="220dp"
android:layout_height="220dp"
android:layout_marginTop="30dp"
android:layout_marginBottom="30dp"
android:cropToPadding="false"
app:srcCompat="#drawable/logo" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/buttons_style1"
android:textColor="#color/colorPrimaryFont"
android:paddingBottom="12dp"
android:paddingTop="12dp"
android:text="#string/play"
android:textSize="30sp" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:textColor="#color/colorPrimaryFont"
android:background="#drawable/buttons_style1"
android:paddingBottom="12dp"
android:paddingTop="12dp"
android:text="#string/rate"
android:textSize="30sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_margin="15dp"
android:layout_weight="0.33"
android:adjustViewBounds="false"
android:background="#drawable/button_style2"
android:cropToPadding="false"
android:scaleType="centerInside"
app:srcCompat="#drawable/settings" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="0.33"
android:scaleType="centerInside"
android:layout_margin="15dp"
android:background="#drawable/button_style2"
app:srcCompat="#drawable/highscores" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="0.33"
android:scaleType="centerInside"
android:layout_margin="15dp"
android:background="#drawable/button_style2"
app:srcCompat="#drawable/share" />
</LinearLayout>
</LinearLayout>
Is it possible to get this with XML?
Hopefully someone can help :D
EDIT tryied 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
tools:context="de.chipsapps.ca.identiti.MenuACT">
<View
android:id="#+id/bigCircle"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="48dp"
android:background="#drawable/logo"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"/>
but that looks like that:
Here's how I would do it:
<?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:background="#color/green">
<View
android:id="#+id/bigCircle"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="48dp"
android:background="#drawable/circle"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"/>
<TextView
android:id="#+id/play"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:paddingTop="6dp"
android:paddingBottom="6dp"
android:gravity="center"
android:textColor="#88ffffff"
android:textSize="24sp"
android:text="PLAY"
android:background="#color/green_dark"
app:layout_constraintTop_toBottomOf="#+id/bigCircle"
app:layout_constraintLeft_toLeftOf="#+id/bigCircle"
app:layout_constraintRight_toRightOf="#+id/bigCircle"/>
<TextView
android:id="#+id/rate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:paddingTop="6dp"
android:paddingBottom="6dp"
android:gravity="center"
android:textColor="#88ffffff"
android:textSize="24sp"
android:text="RATE"
android:background="#color/green_dark"
app:layout_constraintTop_toBottomOf="#+id/play"
app:layout_constraintLeft_toLeftOf="#+id/bigCircle"
app:layout_constraintRight_toRightOf="#+id/bigCircle"/>
<ImageView
android:id="#+id/settings"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="6dp"
android:scaleType="center"
android:background="#drawable/circle"
app:layout_constraintTop_toBottomOf="#+id/rate"
app:layout_constraintLeft_toLeftOf="#+id/rate"
app:layout_constraintRight_toLeftOf="#+id/space1"
app:layout_constraintDimensionRatio="1:1"
app:srcCompat="#drawable/ic_settings_white_24dp"/>
<android.support.v4.widget.Space
android:id="#+id/space1"
android:layout_width="6dp"
android:layout_height="0dp"
app:layout_constraintLeft_toRightOf="#+id/settings"
app:layout_constraintRight_toLeftOf="#+id/trophy"/>
<ImageView
android:id="#+id/trophy"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="6dp"
android:scaleType="center"
android:background="#drawable/circle"
app:layout_constraintTop_toBottomOf="#+id/rate"
app:layout_constraintLeft_toRightOf="#+id/space1"
app:layout_constraintRight_toLeftOf="#+id/space2"
app:srcCompat="#drawable/ic_settings_white_24dp"
app:layout_constraintDimensionRatio="1:1"/>
<android.support.v4.widget.Space
android:id="#+id/space2"
android:layout_width="6dp"
android:layout_height="0dp"
app:layout_constraintLeft_toRightOf="#+id/trophy"
app:layout_constraintRight_toLeftOf="#+id/share"/>
<ImageView
android:id="#+id/share"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="6dp"
android:scaleType="center"
android:background="#drawable/circle"
app:layout_constraintTop_toBottomOf="#+id/rate"
app:layout_constraintLeft_toRightOf="#+id/space2"
app:layout_constraintRight_toRightOf="#+id/rate"
app:srcCompat="#drawable/ic_settings_white_24dp"
app:layout_constraintDimensionRatio="1:1"/>
</android.support.constraint.ConstraintLayout>
And the circle background:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/green_dark"/>
</shape>
Obviously you'll have to replace the images and colors with your real images and colors, and you'll probably want to adjust the spacing, but this should get you started.
The important parts of the solution are:
For the top circle view, use a percentage width and an aspect ratio in order to make it a perfect circle that doesn't fill the whole screen
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
For the bottom row of images, use the center scaleType so that the image isn't stretched to fill the whole view
android:scaleType="center"
Note: the app:layout_constraintWidth_percent attribute requires that you use version 1.1.0 of the constraint-layout support library.
Add margin to main LinearLayout like below.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:orientation="vertical">
...
</LinearLayout>
Remove both inner linear layouts. Use constraints to connect elements, and margins for places where You want distance between elements and borders.
If You want an element to take all available space, except for some space on the sides, give it width of 0dp and connect with constraints to both sides.
For more info on the topic, read this
https://developer.android.com/training/constraint-layout/index.html
Like, for instance, add this to buttons:
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
Another example:
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"/>