Textview under framelayout overrides with another icons - android

I want my layout to look like this:
I used framelayout for this. The icons fit well but how can I fit the text as well? I tried textview but it overrides. Any help will be appreciated.
Here is my code so far:
<FrameLayout
android:id="#+id/fl_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#565858"
android:padding="20dp">
<Button
android:id="#+id/button1"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="center"
android:background="#drawable/ic_wallpaper_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SET"
android:textColor="#color/white"
></TextView>
<Button
android:id="#+id/button2"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="end|center_vertical"
android:background="#drawable/ic_share_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:text="SHARE"/>
<ImageButton
android:id="#+id/downloadimg"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="start|center_vertical"
android:background="#drawable/ic_file_download_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:text="DOWNLOAD"/>
</FrameLayout>

There are several ways to design this layout. On of them is using ConstraintLayout. You can try this solution.
<androidx.constraintlayout.widget.ConstraintLayout android:id="#+id/fl_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#565858"
android:paddingTop="20dp"
android:paddingBottom="20dp"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Button
android:id="#+id/button1"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="center"
app:layout_constraintStart_toStartOf="#id/tvSet"
app:layout_constraintEnd_toEndOf="#id/tvSet"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/ic_wallpaper_black_24dp" />
<TextView
android:id="#+id/tvSet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SET"
android:textColor="#color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/button1"/>
<Button
android:id="#+id/button2"
android:layout_width="35dp"
android:layout_height="35dp"
app:layout_constraintEnd_toEndOf="#id/tvShare"
app:layout_constraintStart_toStartOf="#id/tvShare"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/ic_share_black_24dp"/>
<TextView
android:id="#+id/tvShare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:text="SHARE"
android:layout_marginEnd="20dp"
app:layout_constraintTop_toBottomOf="#id/button2"
app:layout_constraintEnd_toEndOf="parent"/>
<ImageButton
android:id="#+id/downloadimg"
android:layout_width="35dp"
android:layout_height="35dp"
app:layout_constraintStart_toStartOf="#id/tvDownload"
app:layout_constraintEnd_toEndOf="#id/tvDownload"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/ic_file_download_black_24dp" />
<TextView
android:id="#+id/tvDownload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:text="DOWNLOAD"
android:layout_marginStart="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/downloadimg"/>
</androidx.constraintlayout.widget.ConstraintLayout>

You can simply wrap a vertical orientated LinearLayout around each component (button and textview).
A much easier way is to start your project with the auto generated layout that Android Studio provides.

There are several ways to design this layout. On of them is using LinearLayout. Checkout this solution.
<LinearLayout
android:id="#+id/fl_footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#565858"
android:padding="20dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="#+id/button1"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="center"
android:background="#drawable/ic_wallpaper_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SET"
android:textColor="#color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="#+id/button2"
android:layout_width="35dp"
android:layout_height="35dp"
android:background="#drawable/ic_share_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SHARE"
android:textColor="#color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="#+id/downloadimg"
android:layout_width="35dp"
android:layout_height="35dp"
android:background="#drawable/ic_file_download_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DOWNLOAD"
android:textColor="#color/white" />
</LinearLayout>
</LinearLayout>

Related

LinearLayout can't align properly

Hi I want a layout like bellow
Main amount 120 usd
Extra charge 2 usd
----------------------------
Sub Total 122 usd
Discount 5 usd
----------------------------
Total amount 117 usd
I am totally not familiar with constraint layout I tried to use LinearLayout gravity/layout/alignment gravity right for right part but its not working ,all aligned from left.I will be glad if someone give a example code for this layout plz.
Update: my current code
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:text="Main Amount"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="10 "
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="USD"
android:layout_height="match_parent" />
</LinearLayout>
For this kind of view use LinearLayout with weightSum property to the parent LinearLayout and use layout_weight for the Children LinearLayout
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2">
<TextView
android:layout_width="wrap_content"
android:text="Main Amount"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="10 "
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_gravity="left"
android:textAlignment="gravity"
android:text="USD"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
LinearLayout is going to be difficult without a lot of hard coding of layout_width on the children. Have you tried TableLayout?
https://developer.android.com/reference/android/widget/TableLayout
TableLayout can be a pain sometimes to get perfect, but it will give you the layout you are looking for.
You can try something like this:
I used LinearLayout as the parent and add RelativeLayout to it to create align the TextViews the way you want to.
You can dupe the Relative layout the create the rest.
not sure if it's the best way... but it works
<LinearLayout 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=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Main" />
<TextView
android:id="#+id/amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/main"
android:text="amount" />
<TextView
android:id="#+id/extra"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Extra"
android:layout_below="#+id/amount"
/>
<TextView
android:id="#+id/charge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/extra"
android:layout_alignBottom="#+id/extra"
android:text="charge" />
<TextView
android:id="#+id/usd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/main"
android:layout_alignParentRight="true"
android:text="usd"
android:layout_marginRight="30dp"
/>
<TextView
android:id="#+id/num1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/main"
android:layout_toLeftOf="#+id/usd"
android:text="120"
android:layout_marginRight="10dp"
/>
<TextView
android:id="#+id/usd2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/extra"
android:layout_alignParentRight="true"
android:text="usd"
android:layout_marginRight="30dp"
/>
<TextView
android:id="#+id/num2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/extra"
android:layout_toLeftOf="#+id/usd2"
android:text="120"
android:layout_marginRight="10dp"
/>
</RelativeLayout>
I believe that for this layout you better use ConstraintLayout.
It will take you only a few minutes to build this layout, you can add Guidelines to make your life easier.
In addition, your layout will be responsive to all screen sizes so consider using ConstraintLyaout
Here is an example of you wanted layout usingConstraintLyaout:
<?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">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button6"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button3" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="4dp"
android:text="Button"
android:background="#color/bronze"
app:layout_constraintBottom_toTopOf="#+id/button7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button5" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="4dp"
android:text="Button"
android:background="#color/bronze"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/button" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button7"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button7" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button2" />
<TextView
android:id="#+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button3" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/button4"
app:layout_constraintEnd_toEndOf="#+id/textView11"
app:layout_constraintTop_toTopOf="#+id/button4" />
</android.support.constraint.ConstraintLayout>
It will look like this:

How to fix wrong display of components inside 'TableLayout' on different screens?

I am making a layout for MainScreen of an app using TableLayout and I want to set 6 square Buttons inside TableLayout (3 rows, 2 Buttons inside each of them).
Buttons are supposed to be placed with the same spacing between and have the same size.
The problem is that I can't make it look like I want, because layout looks different on different screen resolutions.
I know it may be normal behaviour, but I have no idea how to position layout correctly.
Is there any workarround instead of making different XML files for different resolutions?
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/dark_site_gray"
android:orientation="vertical"
tools:context=".MainScreenActivity">
<TextView
android:id="#+id/helloText"
android:layout_width="match_parent"
android:layout_height="110dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:fontFamily="#font/alfa_slab_one"
android:gravity="center"
android:text="Witaj "
android:textColor="#color/mdtp_white"
android:textSize="23sp" />
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:paddingEnd="20dp"
android:paddingStart="20dp">
<TableRow>
<RelativeLayout
android:id="#+id/badge_layout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="10dp">
<RelativeLayout
android:id="#+id/relative_layout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/main_button1"
android:layout_width="150dp"
android:layout_height="150dip"
android:gravity="center"
android:text="Otrzymane" />
</RelativeLayout>
<TextView
android:id="#+id/badge_notificationTopLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/relative_layout1"
android:background="#drawable/item_count"
android:text="37"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/badge_layout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="10dp">
<RelativeLayout
android:id="#+id/relative_layout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/main_button2"
android:layout_width="150dp"
android:layout_height="150dip"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:text="Zaakceptowane" />
</RelativeLayout>
<TextView
android:id="#+id/badge_notificationTopRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/relative_layout2"
android:background="#drawable/item_count"
android:text="16"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
</TableRow>
<TableRow>
<RelativeLayout
android:id="#+id/badge_layout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="10dp">
<RelativeLayout
android:id="#+id/relative_layout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/main_button3"
android:layout_width="150dp"
android:layout_height="150dip"
android:layout_alignParentBottom="false"
android:text="W trakcie" />
</RelativeLayout>
<TextView
android:id="#+id/badge_notificationCenterLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/relative_layout3"
android:background="#drawable/item_count"
android:text="0"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/badge_layout4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="10dp">
<RelativeLayout
android:id="#+id/relative_layout4"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/main_button4"
android:layout_width="150dp"
android:layout_height="150dip"
android:text="Zakończone"
/>
</RelativeLayout>
<TextView
android:id="#+id/badge_notificationCenterRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/relative_layout4"
android:background="#drawable/item_count"
android:text="0"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
</TableRow>
<TableRow>
<RelativeLayout
android:id="#+id/badge_layoutBottomLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="10dp">
<RelativeLayout
android:id="#+id/relative_layout5"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/main_button5"
android:layout_width="150dp"
android:layout_height="150dip"
android:text="Zdjęcia" />
</RelativeLayout>
<TextView
android:id="#+id/badge_notificationBottomLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/relative_layout5"
android:background="#drawable/item_count"
android:text="0"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/badge_layout6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="10dp">
<RelativeLayout
android:id="#+id/relative_layout6"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/main_button6"
android:layout_width="150dp"
android:layout_height="150dip"
android:gravity="center"
android:text="Wyjdź" />
</RelativeLayout>
<TextView
android:id="#+id/badge_notificationBottomRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/relative_layout6"
android:background="#drawable/item_count"
android:text="20"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
</TableRow>
</TableLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/fullListHolder">
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/acceptedListHolder">
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
Results:
Galaxy J4+:
Galaxy J6 2018:
Galaxy S5:
Galaxy S7:
It would be best to use ConstraintLayout, its very easy and very responsive, in your example you are giving fixed size to your views - different phone got different screen size and this is why you will see different display on differant phones. here is an example for a layout that looks like you need:
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="125dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button6" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="126dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/button7" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="118dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="133dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/button5" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="424dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="423dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/textView" />

graph not showing in horizontalscrollview android

i am microcharts.droid.ChartView in xamarin to make a line graph, and i want it to be horizontal scroll able, but by using following code graph is not showing up.
<?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="match_parent"
android:background="#444444">
<refractored.controls.CircleImageView
app:civ_border_width="2dp"
app:civ_border_color="#FFFFFF"
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/profilepicimageview"
android:src="#drawable/profilepic"
android:scaleType="centerCrop"
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp" />
<TextView
android:text="..."
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_below="#id/profilepicimageview"
android:textColor="#android:color/white"
android:id="#+id/txtHomeFullName"
android:layout_marginLeft="5dp" />
<TextView
android:text="12500"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/HomeUserTextViewScore"
android:textColor="#android:color/white"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginTop="30dp"
android:layout_marginRight="60dp" />
<ImageView
android:src="#drawable/star"
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageViewStarHome"
android:scaleType="centerCrop"
android:layout_marginTop="30dp"
android:layout_toLeftOf="#id/HomeUserTextViewScore" />
<ProgressBar
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:maxHeight="15dp"
android:minHeight="15dp"
android:layout_below="#id/imageViewStarHome"
android:id="#+id/progressBarHome"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"
android:layout_marginRight="30dp" />
<HorizontalScrollView
android:id="#+id/scrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="80dp">
<TextView
android:text="WELCOME TO PERKIT"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#302f2f"
android:textColor="#android:color/white"
android:id="#+id/textViewWelcomeToPerkit" />
<microcharts.droid.ChartView
android:id="#+id/chartView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</HorizontalScrollView>
<LinearLayout
android:id="#+id/linebtn"
android:layout_height="55dp"
android:layout_width="match_parent"
android:background="#444444"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal">
<ImageButton
android:src="#drawable/rewardDisabled"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginRight="16dp"
android:background="#drawable/roundedbutton"
android:id="#+id/btnHomeReward" />
<ImageButton
android:src="#drawable/leaderDisabled"
android:id="#+id/btnHomeTournaments"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginRight="8dp"
android:background="#drawable/roundedbutton" />
<ImageButton
android:src="#drawable/settingsDisabled"
android:id="#+id/btnHomeSettings"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginLeft="8dp"
android:background="#drawable/roundedbutton" />
<ImageButton
android:src="#drawable/homeEnabled"
android:id="#+id/btnHomeHome"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_marginLeft="16dp"
android:background="#drawable/roundedbuttonEnabled" />
</LinearLayout>
<TextView
android:text="Loading.."
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#android:color/white"
android:id="#+id/txtLoadingTextHome"
android:gravity="center"
android:background="#8889" />
</RelativeLayout>
i want to make the graph horizontal scroll able. to show on layout.
thanks. how can i achieve it in android.i am developing the app in xamarin android. is there any other good library to achieve this?
Try to specify a fixed layout_width to the chartView

How to properly build a layout?

I'm kinda new with android programming and I can figure out many problems thanks to StackOverflow. But there's a thing where I keep struggle : Layouts.
I use DP as advised but it looks like it's not the ultimate solution.
See below, my XML code and what it what it looks like on my Nexus 5X :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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="com.example.damien.dartscorer.MainActivity"
android:clipToPadding="false">
<View
android:layout_width="match_parent"
android:layout_height="350dp"
android:background="#b71c1c"/>
<ImageView
android:id="#+id/mask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="24dp"
android:scaleType="fitCenter"
android:src="#drawable/targe_mask"
android:visibility="invisible"
android:layout_marginBottom="280dp"/>
<ImageView
android:id="#+id/target"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="24dp"
android:scaleType="fitCenter"
android:src="#drawable/target"
android:visibility="visible"
android:layout_marginBottom="280dp"/>
<TextView
android:id="#+id/pointTextView"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_marginBottom="10dp"
android:layout_marginTop="15dp"
android:layout_marginVertical="90dp"
android:background="#drawable/pressed_button"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="20sp"
android:visibility="invisible" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="315dp">
<Space
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1">
</Space>
<Button
android:id="#+id/button_x2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/pressed_button"
android:onClick="timesTwoClick"
android:text="x2"
android:textStyle="bold"
android:textSize="18dp"
android:textColor="#ffebee" />
<Space
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1">
</Space>
<Button
android:id="#+id/btn_25"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/halfb"
android:elevation="9dp"/>
<Space
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1">
</Space>
<Button
android:id="#+id/btn_missed"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/zero" />
<Space
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1">
</Space>
<Button
android:id="#+id/btn_50"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/bull" />
<Space
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1">
</Space>
<Button
android:id="#+id/button_x3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/pressed_button"
android:onClick="timesThreeClick"
android:text="x3"
android:textStyle="bold"
android:textSize="18dp"
android:textColor="#ffebee" />
<Space
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1">
</Space>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_gravity="bottom">
<TextView
android:id="#+id/playerName1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="60dp"
android:layout_marginTop="32dp"
android:text="Player"
android:visibility="visible"
android:textSize="24sp" />
<TextView
android:id="#+id/playerName2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="60dp"
android:layout_marginTop="32dp"
android:text="Player"
android:visibility="visible"
android:textSize="24sp" />
<TextView
android:id="#+id/playerName3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/scoreC"
android:layout_marginStart="60dp"
android:text="Player"
android:visibility="visible"
android:textSize="24sp" />
<TextView
android:id="#+id/playerName4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/scoreD"
android:layout_alignParentEnd="true"
android:layout_marginEnd="60dp"
android:text="Player"
android:visibility="visible"
android:textSize="24sp" />
<TextView
android:id="#+id/scoreA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/playerName1"
android:layout_marginStart="60dp"
android:visibility="visible"
android:textSize="18sp"
android:text="Pts" />
<TextView
android:id="#+id/scoreB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#+id/playerName2"
android:layout_marginBottom="24dp"
android:layout_marginEnd="60dp"
android:visibility="visible"
android:textSize="18sp"
android:text="Pts" />
<TextView
android:id="#+id/scoreC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="32dp"
android:layout_marginStart="60dp"
android:visibility="visible"
android:textSize="18sp"
android:text="Pts" />
<TextView
android:id="#+id/scoreD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="32dp"
android:layout_marginEnd="60dp"
android:textSize="18sp"
android:visibility="visible"
android:text="Pts" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/winLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#DD000000">
</View>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="32dp"
android:textColor="#FFEAED"
android:layout_centerHorizontal="true"
android:layout_marginTop="150dp"
android:id="#+id/winner" />
<Button
android:id="#+id/btn_replay"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_below="#+id/winner"
android:layout_centerHorizontal="true"
android:layout_marginTop="140dp"
android:background="#drawable/replay" />
<Button
android:id="#+id/btn_home"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_below="#+id/btn_replay"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:background="#drawable/home" />
</RelativeLayout>
</FrameLayout>
As you can see on this second image, the layout sucks on a Pixel and yet, the screen don't have huge difference ! So how can I build something a minimum consistent ?
Also, I can't add elevation to my buttons and i don't really know why.
Thanks for helping,
Damien
This is not how an Android XML layout should be, this code does not follow guidelines for UI development like parent and child elements. Please check some codes of XML layouts first then try developing with that.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false">
<LinearLayout
android:id="#+id/ll_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<View
android:layout_width="match_parent"
android:layout_height="350dp"
android:background="#b71c1c"/>
</LinearLayout>
<TextView
android:id="#+id/tv_1"
android:layout_below="#+id/ll_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:text="Some data"/>
<TextView
android:layout_below="#+id/ll_top"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:text="some other data"/>
</RelativeLayout>
this is a sample code just try this and stud it by changing parameters

How do I prevent one TextView from pushing the other out of the screen?

[SOLVED] Marked the working solution. #GIBIN THOMAS: this suggestion works as well (similar).
Below I've posted an issue which arise when the Scoring increases, making it to expand and therefor push the other TextView out of the screen. I've tried changing the Width and height in all kinds of ways for both the TextViews themselves and the Layout that's wrapping them, without any luck.
PROBLEM: Anyone got a good solution how to set my Layout and/or TextViews width and height to prevent the Scoring TextView from pushing the Lives TextView out of the screen?
.
This is my XML-file:
The layout & textviews below are all inside another layout (including 4 buttons, one imageview and another textView - excluded in the code)
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/currentScoreText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:text="#string/current_score"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentScoreEasy"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/current_score_0"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="205dp"
android:layout_marginStart="205dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/lives"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:gravity="center"
android:text="#string/lives"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentLivesEasy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lives_5"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
Try this layout:
use android:weightSum and android:layout_weight properly
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:orientation="horizontal"
android:weightSum="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="left"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="#+id/currentScoreText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:text="SCORE"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentScoreEasy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SCORE"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="#+id/lives"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:gravity="center"
android:text="Lives"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentLivesEasy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lives"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
Output:
This will fix your issue
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/currentScoreText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:text="Current Score"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentScoreEasy"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Scrore"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/lives"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:gravity="center"
android:text="Lives"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentLivesEasy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lives 5"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
Please remove the strings i have added also if you have further doubts feel free to note down below
Please make sure to apply proper weight and other changes as follows :
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:orientation="horizontal"
android:padding="10dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:orientation="horizontal">
<TextView
android:id="#+id/currentScoreText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:text="current_score"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentScoreEasy"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:layout_height="wrap_content"
android:text="current_score_0"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:id="#+id/lives"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:gravity="center"
android:text="lives"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentLivesEasy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="lives_5"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
Just give the LinearLayout , layout_weight="5" .. Like
android:layout_weight="3" and make the android:layout_width = "0px"
Note="Set the layout weight according to your spacing" ...
The Linear Layout in which u have fitted these two textviews
Simply replace your current score linear layout with this relative layout and you are done.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/currentScoreText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:layout_alignParentLeft="true"
android:text="current_score"
android:textColor="#android:color/black"
android:textSize="20sp" />
<TextView
android:id="#+id/currentScoreEasy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="current_score_0"
android:textColor="#android:color/holo_red_dark"
android:textSize="20sp" />
</RelativeLayout>

Categories

Resources