Как сохранить экран как изображение в мобильном устройстве. Я использую kotlin, чтобы создать приложение для создания мемов для android - PullRequest
Новая
       5

Как сохранить экран как изображение в мобильном устройстве. Я использую kotlin, чтобы создать приложение для создания мемов для android

0 голосов
/ 27 мая 2020

Я делаю приложение для создания мемов. Я загружу мемы из базы данных firebase, и пользователь выберет один из шаблонов мемов и начнет его редактировать. Для ввода текста в мемы я использую библиотеку github implementation 'com.github.hantrungkien:Awesome-Input-Layout:1.0.0'. Она позволяет пользователю вращать текстовое представление, перемещать его пальцем и все такое. Но проблема в том, что я новичок в android dev. Я не знаю, как сохранить фоновое изображение мема и текст, введенный пользователем на устройстве или в галерее пользователя. Расскажите, пожалуйста, подробные инструкции, так как я новенький. Приветствуется любая помощь.

Код активности по редактированию моего мема 

package com.example.memecreator

import android.app.Activity
import android.content.Context
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.inputmethod.InputMethodManager
import android.widget.Button
import android.widget.RelativeLayout
import com.squareup.picasso.Picasso
import htkien.awesome_input.AwesomeInputLayout
import kotlinx.android.synthetic.main.activity_meme.*


class MemeActivity : AppCompatActivity() {

    val TAG = MainActivity::class.java.simpleName

    var mLayoutRoot: RelativeLayout? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_meme)
        setSupportActionBar(meme_toolbar)
        supportActionBar!!.setDisplayHomeAsUpEnabled(true)
        meme_toolbar.setNavigationOnClickListener {
            finish()
        }

//I am passing intent from last activity and using picasso to load images. Its working fine.


        val intent=intent
        val memeImage=intent.getStringExtra("image")
        Picasso.get().load(memeImage).into(meme_image)
        mLayoutRoot=findViewById<RelativeLayout>(R.id.rl_meme)
        val added=findViewById<Button>(R.id.btn_add_text)
        added.setOnClickListener {
            onClickBtnAddText()
        }
    }



    override fun onBackPressed() {
        if (!mLayoutRoot!!.isFocused) {
            mLayoutRoot!!.requestFocus()
            mLayoutRoot!!.requestFocusFromTouch()
        } else {
            super.onBackPressed()
        }
    }

    private fun onClickBtnAddText() {
        val awesomeLayout = LayoutInflater.from(this).inflate(
            R.layout.layout_awesome_input,
            mLayoutRoot,
            false
        ) as AwesomeInputLayout
        mLayoutRoot?.addView(awesomeLayout)
        awesomeLayout.post {
            val w = mLayoutRoot!!.width
            val h = mLayoutRoot!!.height
            awesomeLayout.x = w / 2 - awesomeLayout.width / 2.toFloat()
            awesomeLayout.y = h / 2 - awesomeLayout.height / 2.toFloat()
            awesomeLayout.requestLayout()
            awesomeLayout.visibility = View.VISIBLE
            showKeyboard(this@MemeActivity)
        }
        awesomeLayout.setDeleteViewListener { awesomeLayout ->
            hideKeyboard(awesomeLayout)
            mLayoutRoot!!.requestFocus()
            mLayoutRoot!!.requestFocusFromTouch()
            try {
                mLayoutRoot!!.removeView(awesomeLayout)
            } catch (e: IndexOutOfBoundsException) {
                Log.e(TAG, "onDeleteView: ", e)
            }
        }
    }

    private fun hideKeyboard(view: View) {
        val imm =
            view.context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        imm.toggleSoftInput(
            InputMethodManager.HIDE_IMPLICIT_ONLY,
            0
        ) // hide
    }

    private fun showKeyboard(activity: Activity) {
        val imm = activity.getSystemService(
            Activity.INPUT_METHOD_SERVICE
        ) as InputMethodManager
        imm.toggleSoftInput(
            0,
            InputMethodManager.HIDE_IMPLICIT_ONLY
        ) // show
    }
}

Редактирование моего мема xml код 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_meme"
    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=".MemeActivity">
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_layout_meme"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="0dp"
        android:layout_marginTop="0dp"
        android:background="@android:color/white">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/meme_toolbar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/colorDarkGrey">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/app_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Meme"
                    android:textSize="20sp"
                    android:maxLines="1"
                    android:textStyle="bold"
                    android:textColor="@android:color/white"
                    android:layout_centerVertical="true"/>


            </RelativeLayout>

        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/meme_image"
            android:layout_width="match_parent"
            android:layout_height="420dp"
            android:layout_marginTop="152dp"
            android:scaleType="fitXY"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/btn_add_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@id/meme_image"
            android:text="Add Text"
            android:layout_marginStart="40dp"
            android:layout_marginEnd="40dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/meme_image" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</RelativeLayout>

и, наконец, дизайн текста редактирования, который я используется из библиотеки github 

<?xml version="1.0" encoding="utf-8"?>
<htkien.awesome_input.AwesomeInputLayout
    xmlns:autofit="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:layout_marginTop="152dp"
    android:background="@drawable/button_black_background"
    android:orientation="vertical"
    android:visibility="invisible">

    <ImageButton
        android:id="@+id/button_delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="@android:color/transparent"
        android:scaleType="fitXY"
        android:src="@drawable/ic_cross" />

    <EditText
        android:id="@+id/edit_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="10dp"
        android:hint="Type"
        android:imeOptions="flagNoExtractUi"
        android:textColor="@color/colorDark"
        android:textColorHint="@color/colorDark"
        android:textSize="16sp" />

</htkien.awesome_input.AwesomeInputLayout>

Это снимок экрана моего экрана активности редактирования мема. Хочу сохранить в устройстве

1 Ответ

0 голосов
/ 27 мая 2020

Давайте немного изменим макет ConstraintLayout внутри activity_meme, 

...
...

<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">

    <FrameLayout
        android:id="@+id/meme_container"
        android:layout_width="match_parent"
        android:layout_height="420dp"
        android:layout_marginTop="152dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/meme_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY" />

    </FrameLayout>

    <Button
        android:id="@+id/btn_add_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/meme_container"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="40dp"
        android:text="Add Text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/meme_container" />

</androidx.constraintlayout.widget.ConstraintLayout>

...
...

Внутри onCreate, замените 

 mLayoutRoot = findViewById<RelativeLayout>(R.id.rl_meme)

на 

mLayoutRoot = findViewById<FrameLayout>(R.id.meme_container)

Этот макет теперь будет содержать изображение мема с текстом. Поэтому мы вызываем drawToBitmap на mLayoutRoot и сохраняем изображение.

...